MVC C# Code in Javascript

Question

On a cshtml page in my View i easily get the URL to an action with thise line:

<h1>@Url.Action("NewComment", "Case")</h1>

And if I write this in Javascript:

<script>
    alert('@Url.Action("NewComment", "Case")');
</script>

It also comes up correct in the alert.

However my problem is that at the bottom of the page I have several other javascript beeing referenced like this:

<script src="~/Scripts/custom/SomeScript.js"></script>

And if I write alert('@Url.Action("NewComment", "Case")');

In that file. It just comes up as @Url.Action("NewComment", "Case") in the alert box.

So how come it doesn't work in this file?

In the same file I also have a click method with $.ajax({ method and the url is referenced like this: url: '@Url.Action("NewComment","Case")', and here it works fine again.

So how come it works here again? Is it something with that Ajax method is a Jquery Object??

The spesific problem I have is that I need to reference the URL.Action method i the Ajax call of a Jquery Datatable.

var table_comment= $('#comment_table').dataTable({
    "sDom": "<'dt-toolbar'>",
    ajax: {
        url: "/Case/NewComment/", //This works but want to change it to use URL Action
        url: '@Url.Action("NewComment", "Case")', //don't understand why this doesn't work
        type: "POST",
        data: {"id": Case_ID }
    },

Yes. Ajax code that works fine with Url.Action is i a seperate JS file and the datatable code is also in a seperate JS file — stig
– stig, Commented Aug 22, 2014 at 10:36

aknuds1 · Accepted Answer · 2014-08-22 10:40:41Z

3

The reason that @Url.Action("NewComment", "Case") works in *.cshtml, is that it is rendered to HTML on the server by ASP.NET MVC. As for your *.js files, these are not transformed by ASP.NET MVC, so what you see is what you get.

Specifically, .cshtml files are C# Razor templates, which get rendered by ASP.NET MVC to .html files.

As for your .js files, perhaps you could work around this by defining your URLs as global variables in your .cshtml, which you simply refer to in your .js files.

<script>
var newCommentUrl = '@Url.Action("NewComment", "Case")';
</script>

edited Aug 22, 2014 at 10:40

answered Aug 22, 2014 at 10:31

aknuds1

68.5k69 gold badges208 silver badges321 bronze badges

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

3 Comments

stig Over a year ago

But how come this works: $.ajax({ url: '@Url.Action("NewComment","Case")' ... etc. This is also in a seperate JS file

aknuds1 Over a year ago

@stibay I don't know. There shouldn't be any template transformation in .js files (because they aren't Razor templates), so I have no idea why @Url.Action("NewComment","Case") would be transformed.

stig Over a year ago

Yea. That works actually. Defining the variable in javascript on the cshtml page and refer to it in the js. file :) Still wierd that the Ajax methods can access it

Kartikeya Khosla · Accepted Answer · 2014-08-22 10:45:37Z

0

You cannot write Razor syntax inside separate js file because after all its Razor syntax '@' which only

Razor engine could interpret(and could be written inside .cshtml extension Pages only) and razor engine

convert it to appropriate HTML so that is why

in separate js file file when you write alert("@Url.Action("NewComment", "Case")") it comes as

@Url.Action("NewComment", "Case")

edited Aug 22, 2014 at 10:45

answered Aug 22, 2014 at 10:38

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Comments

m.t.bennett · Accepted Answer · 2014-08-22 10:46:39Z

0

You can't have razor syntax ( @Url.Action ) inside a linked JavaScript file - Visual Studio doesn't work like that.

As a solution, write out your variables in javaScript in your CSHTML file like so:

<script type="Text/javascript">
 var dataTableURL = '@Url.Action("NewComment","Case")';
</script>

And then underneath this reference your external javascript file

<script src='@Url.Content("~/Scripts/MyJavaScriptFile.cs")' type="text/javascript"></script>

And modify your javscript variable to use the above variable:

var table_comment= $('#comment_table').dataTable({
    "sDom": "<'dt-toolbar'>",
    ajax: {
        url:dataTableURL,
        type: "POST",
        data: {"id": Case_ID }
    },

answered Aug 22, 2014 at 10:46

m.t.bennett

1,31917 silver badges34 bronze badges

1 Comment

stig Over a year ago

Yea. This worked as aknuds1 suggested ;) Still think it's pretty funny that if I have a click method in an external JS file. F.ex like this: $(document).on("click", ".save-comment", function (e) { and this function runs $.ajax({ method I can reference the url parameter like this: url: '@Url.Action("NewComment","Case")' and it works perfect :)

stig · Accepted Answer · 2014-08-27 06:54:56Z

0

I found out a way better solution for this!

RazorJS :) Works perfect.

http://www.nuget.org/packages/RazorJS

answered Aug 27, 2014 at 6:54

stig

1,2406 gold badges26 silver badges45 bronze badges

Collectives™ on Stack Overflow

MVC C# Code in Javascript

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related