Сериализация .NET объекта в JavaScript variable на HTML странице внутрь Script-блока

Старые добрые hidden inputs

Часто приходится передавать в HTML страницу данные, которые необходимо потом использовать из JavaScript. Издавна для этого используется самый простой способ: hidden inputs. То есть, если нам нужно передать Uri адрес веб сервиса, мы на странице рендерим что-то вроде

  <input type="hidden" name="webServiceUri" value="URI we need"/> 

и можем при помощи jQuery или plain old JavaScript найти этот input по имени и прочитать переданное значение.

Но когда нужно передавать много параметров или даже массивы, то этот способ становится не удобным. Можно конечно сделать REST сервис, который отдает все данные по AJAX-запросу со страницы (сессионные данные), но в большенстве случаев это излишне.

В настоящее время часто используется другой способ — на стороне сервера отрендерить в HTML все необходимые данные в виде JavaScript переменной внутри Script-блока.

Рассмотрим как это сделать в ASP.NET MVC.

Сценарий использования будет таким:

• у нас есть .NET класс который инкапсулирует в себе требуемые настройки и мы можем использовать любой класс для этого
• у нас есть Extension метод для MVC HtmlHelper, который принимает имя JavaScript переменной и объект, который нужно сериализовать
• сериализуемый класс передается во View внутри ViewModel или ViewBag
• имя JavaScript переменной может передаватся во View из контроллера или хард-кодится во View

После рендеринга страницы мы получаем код аналогичный следующему:

<script type="text/javascript">    var settings = {"WebServiceUri":"URI we need","UserId":"1212"}; </script> 

Extension метод для MVC HtmlHelper получился таким:

  /// <summary>   /// This class provides the extension methods to ASP.NET MVC HtmlHelper.   /// </summary>   public static class HtmlHelperExtensions   {     /// <summary>     /// This method renders the given model class as JavaScript variable within Html Script tag.     /// </summary>     /// <param name="htmlHelper">HtmlHelper instance we extend by this method.</param>     /// <param name="variableName">The name of JavaScript variable the rendered Json object will be assigned to.</param>     /// <param name="model">The model class to be rendered to Json and assigned to the variable.</param>     /// <returns>Html representation of Html Script tag.</returns>     public static MvcHtmlString RenderJsToScriptBlock(this HtmlHelper htmlHelper, string variableName, object model)     {       #region Pre-conditions       if (string.IsNullOrWhiteSpace(variableName)) { throw new ArgumentNullException("variableName"); }       #endregion Pre-conditions        if (null == model) { return MvcHtmlString.Empty; }        TagBuilder tagBuilder = new TagBuilder(@"script");       tagBuilder.MergeAttribute(@"type", @"text/javascript");        // use InnerHtml because it doesn't encode characters       tagBuilder.InnerHtml = string.Format("var {0} = {1};", variableName, htmlHelper.Raw(Json.Encode(model)));        return new MvcHtmlString(tagBuilder.ToString());     }   } 

Немного Unit-тестов с использованием moq фреймворка и MSTest:

    [TestMethod, TestCategory("Unit")]     [ExpectedException(typeof(ArgumentNullException))]     public void Should_Not_Accept_Null_VariableName()     {       HtmlHelper helper = new HtmlHelper(new Mock<ViewContext>().Object, new Mock<IViewDataContainer>().Object);       helper.RenderJsToScriptBlock(null, null);     }      [TestMethod, TestCategory("Unit")]     [ExpectedException(typeof(ArgumentNullException))]     public void Should_Not_Accept_Empty_VariableName()     {       HtmlHelper helper = new HtmlHelper(new Mock<ViewContext>().Object, new Mock<IViewDataContainer>().Object);       helper.RenderJsToScriptBlock(string.Empty, null);     }      [TestMethod, TestCategory("Unit")]     public void Should_Return_Empty_MvcHtmlString_For_NullModel()     {       HtmlHelper helper = new HtmlHelper(new Mock<ViewContext>().Object, new Mock<IViewDataContainer>().Object);       MvcHtmlString mvcHtmlString = helper.RenderJsToScriptBlock("variableName", null);       Assert.AreEqual(mvcHtmlString, MvcHtmlString.Empty);     }      [TestMethod, TestCategory("Unit")]     public void Should_Return_Correct_Result_For_Correct_Input()     {       const string expectedHtmlString = "<script type=\"text/javascript\">var variableName = {\"UserName\":\"Alex\"};</script>";        HtmlHelper helper = new HtmlHelper(new Mock<ViewContext>().Object, new Mock<IViewDataContainer>().Object);       var model = new { UserName = "Alex" };       MvcHtmlString mvcHtmlString = helper.RenderJsToScriptBlock("variableName", model);        Assert.AreEqual(mvcHtmlString.ToHtmlString(), expectedHtmlString);     }