Embedding C# code using <%= code %> within javascript <script> tags

Question

Hi All,

I'm using ASP.NET MVC and would like to get Model information for use within my javascript. I've strongly typed the view, and thus am able to use <%= Model.Name %> within my HTML to get Model data.

But once I'm in the <script> tags, I get no intellisense (in Visual Studio) when using <%, and the information doesn't seem to be rendering properly. Is there something I'm missing to be able to use the angle bracket scheme within Javascript?

Thanks.

CLARIFICATION: I should have posted the code I'm trying to use the first time around. To elaborate a bit more, I'm trying to use JQuery's $.getJSON to get data from the Model (via the Controller), and populate a JSON object. The javascript I'm using is below:

    <script type="text/javascript">
 $(document).ready(function() {
  $.getJSON("<%=Url.Action("PopulateJournalOptions", "Evaluation", Model.ID) %>", populateJSON);
 });
</script>

PopulateJournalOptions is my Controller Action, Evaluation is my Controller Name, and Model.ID is what I'm trying to pass to it. Incidentally, I should be able to achieve the same thing using:

<script type="text/javascript">
 $(document).ready(function() {
  $.getJSON("/Evaluation/PopulateJournalOptions/<%= Model.ID %>", populateJSON);
 });
</script>

But even here, I'm not sure those angle brackets are being used correctly. It definitely looks a bit off. Thanks for the help.

UDPATE: Went ahead and tried the second method above and it does indeed work. I'm still having trouble using the first method that uses Url.Action(), which is a shame because I think it's the better method. But the <% tags are definitely rendering data now. I guess it just threw me when there was no intellisense and they didn't highlight like normal. Thanks for the quick responses. Any ideas on the right format for the first option above?

Answer 1

Generally speaking, <%= %> blocks should only be used within quotes in Javascript. Because you're inside quoted text, Intellisense may not work.

Answer 2

It ought to work - your C# should execute server side before the JavaScript does clientside. Intellisense may just be confused by the context.

I use this technique with PHP and JavaScript sometimes.

Answer 3

You might try single quotes:

$.getJSON('<%=Url.Action("PopulateJournalOptions", "Evaluation", Model.ID) %>', populateJSON);

Answer 4

You need to be careful when writing strings into script tags, because as it is javascript the expectation is that the string has special characters encoded properly. Additionally, if that string contains something like "</script>" you run the risk of browsers that aren't running javascript ending the script block early.

An easy way to encode the strings is with a JSON serializer, perhaps JavaScriptSerializer().

<script>
    var targetUrl = <%= (new JavaScriptSerializer()).Serialize("http://url/") %>;
</script>

I think this is safer. You'd want to put this code in a helper function, I just instantiate JavaScriptSerializer() in-place there so its the simplest example possible.

One side effect of this is that the <%= %> expression is not within quotes, which sounds like it would help your original autocomplete support issures. Note that Serialize() will not only properly escape the string for javascript, it will also escape-encode the '<' and '>' characters so that "</script>" scenario can't happen.

Answer 5

Correct me if I'm wrong, but I've never seen Url.Action used like this:

<%= Url.Action("PopulateJournalOptions", "Evaluation", Model.ID) %>

shouldn't it be like this?

<%= Url.Action("PopulateJournalOptions", "Evaluation", new { ID = Model.ID } ) %>

Note new { ID = Model.ID }

Url.Action uses reflection on an object's properties to figure out what the route values are. Since an int object has no fields/properties, it will not detect anything.