Call an ASP.NET MVC application's URL from javascript

Question

I'm new to ASP.NET MVC. After reading many different examples I still can't get this done.

I have some JS scripts bundled and one out of the bundle (because I'm using a different main script per page)

(_Layout.cshtml)

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/datatables")
@RenderSection("scripts", required: false)

And in my view

(index.cshtml)

@section Scripts
{
    <script src="@Url.Content("~/Scripts/index.js")"></script>
}

In javascript code I am trying to call a specific URL of my application

(index.js)

$('#table').DataTable({
    ajax: '@Url.Action("List", "Documents")'
});

Of course in my application a controller is definend with the name DocumentsController and with a List method, returning the correct JSON.

Still it seems no-one is ever replacing my url

If I include my index.js in the bundle, nothing changes. Where is the mistake? Who and when is replacing that URL?

Thank you

please show your controller code.

AmirNorsou
– AmirNorsou

2020-03-15 11:26:30 +00:00
Commented Mar 15, 2020 at 11:26 — AmirNorsou
– AmirNorsou, Commented Mar 15, 2020 at 11:26

Dai · Accepted Answer · 2020-03-15 11:35:08Z

0

You can't use Razor code inside a *.js file because they're served directly as static files and aren't processed by ASP.NET (nor *.ts files because they're transpiled to *.js at build-time).

What you can do instead is to render Razor-generated JavaScript in your View/Page and have your TypeScript or JavaScript expect that data to be available.

Like so:

Index.cshtml

<script type="text/javascript">
var scriptUrls = {
    listDocuments: '@Url.Action("List", "Documents")';
};
</script>

Index.ts (if using TypeScript)

interface PageUrls {
    readonly listDocuments: string;
};

declare var scriptUrls: PageUrls;

//

$('#table').DataTable({
    ajax: scriptUrls.listDocuments
});

Index.js

$('#table').DataTable({
    ajax: scriptUrls.listDocuments
});

edited Mar 15, 2020 at 11:35

answered Mar 15, 2020 at 11:24

Dai

157k31 gold badges314 silver badges435 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AmirNorsou Over a year ago

I think you're wrong, look here : link

Dai Over a year ago

@AmirNorouzpour The link you pointed to is for a <script> element inside a .cshtml file. Whereas my answer for this question is for when the script is inside a separate *.js file.

Marco Over a year ago

Ok, now it's clear. I did assume that code was in js file. thank you.

Collectives™ on Stack Overflow

Call an ASP.NET MVC application's URL from javascript

1 Answer 1

Index.cshtml

Index.ts (if using TypeScript)

Index.js

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Index.cshtml

Index.ts (if using TypeScript)

Index.js

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related