Correctly using quote marks in MVC view Razor

Question

I am having some difficulties using quote marks in ASP.Net Razer view as I keep ending up with them replaced with '

If I for example type:

@{string test = "String 'with' quotes"}
@test

I end up with:

String &#39;with&#39; quotes

In the above example this is desirable.

However, take this second example:

@{string myJSFunction = myJSFunction('myString')"}
@myJSFunction

I end up with:

myJSFunction(&#39;myString&#39;)

Which results in a broken javascript function.

I have tried excaping the quote marks with \, but they don't seem to be having any effect.

Here is the actual problem I am faced with:

@using (Ajax.BeginForm(
  "_MonthRanges", 
  "Projects", 
  new { id = ViewBag.InputResourceID }, 
  new AjaxOptions { 
      HttpMethod = "POST", 
      UpdateTargetId = "MonthRanges", 
      InsertionMode = InsertionMode.Replace,
      OnComplete = @myJSFunction
}))

Any advice?

Shyju · Answer 1 · 2013-04-11T14:04:10.977

2

In razor, @ will encode and render. Try Html.Raw method. This method returns markup that is not HTML encoded.

@Html.Raw(myJSFunction)

So if you want to execute the function in a script block, you can do it like

@{string myJSFunction = "alert('Rise and Shine')";}
<script type="text/javascript">  
    @Html.Raw(myJSFunction)
</script>

edited Apr 11 '13 at 14:04

answered Apr 11 '13 at 13:53

Shyju

214,206
104
411
497

score 2 · Answer 2 · answered Apr 11 '13 at 13:54

2

The @ operator always HTML-encodes strings. If you want the raw string value, use @Html.Raw(myJSFunction).

answered Apr 11 '13 at 13:54

Tim Rogers

21,297
6
52
68

Ok, thanks. However this does not seem to work in my scenario: I need to set the `onComplete` parameter of Ajax.BeginForm to `myJSFunction` `OnComplete = Html.Raw(myJSFunction)` – Chopo87 Apr 11 '13 at 14:03
@Chopo87: Why you are then assigning to a variable. Directly mention the function name there. – Shyju Apr 11 '13 at 14:05
Because I actualy have to resolve some other variables into parameters and can't seem to do it in line. see this link: http://stackoverflow.com/questions/15947755/asp-net-mvc-ajax-beginform-oncomplete-pass-c-sharp-arguments-in-razor-view/15947878#15947878 – Chopo87 Apr 11 '13 at 14:09
@Chopo87 Should be `OnComplete = @Html.Raw(myJSFunction)` – Tim Rogers Apr 11 '13 at 15:27

score 1 · Accepted Answer · edited May 23 '17 at 10:25

The solution to your issue is already mentioned (Html.Raw()) but I'm not sure why you're using @ in your code sample given. From the looks of it you're already in code block when you try to assign it, so why use the razor.

@using (Ajax.BeginForm(
  "_MonthRanges", 
  "Projects", 
  new { id = ViewBag.InputResourceID }, 
  new AjaxOptions { 
      HttpMethod = "POST", 
      UpdateTargetId = "MonthRanges", 
      InsertionMode = InsertionMode.Replace,
      OnComplete = @myJSFunction
}))

should be

@using (Ajax.BeginForm(
  "_MonthRanges", 
  "Projects", 
  new { id = ViewBag.InputResourceID }, 
  new AjaxOptions { 
      HttpMethod = "POST", 
      UpdateTargetId = "MonthRanges", 
      InsertionMode = InsertionMode.Replace,
      OnComplete = myJSFunction
}))

@ is what tells the StreamWriter for the page to write the result to the response, and as such is intended to be injected into the page after HtmlEncoding. Using Html.Raw bypasses the Html encoding aspect but in your case you're not writing it the page directly yourself, you're letting Html.BeginForm handle that, so you don't need the @ in the assignment of your OnComplete function.

UPDATE: Ok, another thing I forgot to mention is that the methods passed to the AjaxOptions are Javascript functions only, no parameters by the looks of it. Parameters are passed in automatically by the Unobtrusive scripts that handle all the wiring. So your form should look like this...

@using (Ajax.BeginForm(
  "_MonthRanges", 
  "Projects", 
  new { id = ViewBag.InputResourceID }, 
  new AjaxOptions { 
      HttpMethod = "POST", 
      UpdateTargetId = "MonthRanges", 
      InsertionMode = InsertionMode.Replace,
      OnComplete = "myJSFunction"
}))

And it will handle the rest. If you need to pass additional parameters in the myJSFunction function, you're probably going to have to expose them via other means. Either as a javascript variable or by associating it with some other element and access it using $("elementselector").data("dataAttributeName") (this is my preferred and suggested method). One of the common requested modifications made to the unobtrusive ajax JavaScript libraries (I wish Microsoft would just adopt this change and be done with it) is to set the context of this to the element that triggered the ajax event. So for in this case it would make this equal to the form element. With all this in mind, here's my recommendation.

First: Modify your Unobtrusive Ajax script file so that the source element gets assigned to the this keyword so that's it's available in your JavaScript handling the unobtrusive events. This question outlines what it involves (one line added to the file)

Second: Add your string to one of the data attributes on your form

@using (Ajax.BeginForm(
    "_MonthRanges",
    "Projects",
    new {id = ViewBag.InputResourceID},
    new AjaxOptions
        {
            HttpMethod = "POST",
            UpdateTargetId = "MonthRanges",
            InsertionMode = InsertionMode.Replace,

            OnComplete = "myJSFunction"
        },
    new { data_parameter_name = "myString" }))

Third: Access your parameter from inside of the javascriptfunction handling your event.

<script>
    function myJSFunction(data, textStatus, jqXHR)
    {
        //data, textStatus and jqXHR are set for you by the unobtrusive ajax script file automatically, feel free to use them
        var parameter = $(this).data("parameterName");
        alert(parameter);
    }
</script>

You seem to be correct in saying that the @ is not necessary, however, I still end up with the `'` =( — Chopo87, Apr 11 '13 at 14:56
Now you got me curios as to what's going on here. I'm gonn setup a page just like this and see what the deal is... — Nick Albrecht, Apr 12 '13 at 15:18
K, I've updated my answer with my suggestion, give that a shot. — Nick Albrecht, Apr 12 '13 at 15:48

Correctly using quote marks in MVC view Razor

3 Answers3