Escaping JavaScript string literals in views

Question

Is there a utility function for escaping JavaScript in ASP.NET MVC views? I often need to init a little snippet of JavaScript using some values from the view; for instance I

Answer 1

In MVC 5 using Razor templates, the following is possible:

<script type="text/javascript">
    var page = new Page({ currentUser: @Html.Raw(Json.Encode(Model.UserName)) });
    page.init();
</script>

Answer 2

In .NET 4, The HttpUtility class has a variety of static encoding methods for various contexts, including a JavaScriptStringEncode method for this particular purpose.

It's often simpler to just use JSON deserialization, though.

Answer 3

In my case I needed a string not a json object and this is for Asp.Net Core:

@functions{
    public Microsoft.AspNetCore.Html.IHtmlContent ToJS(string value)
    {
        return Html.Raw("'" + value.Replace("'", "\\'").Replace("\r", "\\r").Replace("\n", "\\n") + "'");
    }

    public Microsoft.AspNetCore.Html.IHtmlContent ToJS(int value)
    {
        return Html.Raw("" + value);
    }
}

This will escape the ' and end of line characters. Also it leaves numbers (int) as a number. This could be overloaded to include float, decimal, etc. as needed.

So, I don't have to think about it or do anything different for each type:

var serverName = @ToJS(m.ServerName);
var appSiteUrl = @ToJS(m.SiteUrl);
var facebookId = @ToJS(m.FacebookAppId);

Answer 4

After some time working in ASP.NET MVC, I concluded that (most likely) there is no build-in helper for it. Of course, it's trivial to write your own. Here is it for the sake of completeness:

using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace MyProject.Helpers
{
    public static class JsonExtensions
    {
        public static string Json(this HtmlHelper html, object obj)
        {
            JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
            return jsonSerializer.Serialize(obj);
        }
    }
}

In a view, it can be used as follows:

<script type="text/javascript">
var page = new Page(<%= Html.Json(new { currentUser: Model.UserName } ) %>);
page.init();
</script>