CODEWITHSUNDEEP
asp.net-mvcrazor
Chopo87
Chopo87

Reputation: 1290

Correctly using quote marks in MVC view Razor

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 'with' quotes

In the above example this is desirable.

However, take this second example:

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

I end up with:

myJSFunction('myString')

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?

Upvotes: 0

Views: 3326

Answers (3)

Nick Albrecht
Nick Albrecht

Reputation: 16938

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>

Upvotes: 1

Shyju
Shyju

Reputation: 218832

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>

Upvotes: 2

Tim Rogers
Tim Rogers

Reputation: 21713

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

Upvotes: 2

Related Questions