如何序列化 ViewModel 并将其推送到 HTML 页面以使用 JSON 结构？答案

【问题标题】：How do I serialize and push a ViewModel out to HTML page to use the JSON structure?如何序列化 ViewModel 并将其推送到 HTML 页面以使用 JSON 结构？
【发布时间】：2013-01-22 20:06:22
【问题描述】：

我喜欢将我的视图模型结构推送到我的视图中，然后在 javascript 中使用它们。有什么更优雅的方法来做到这一点？这几行代码有点丑。

<script type="text/javascript">
       var PartChangeModel = @Html.Raw(Json.Encode(Model.PartChange));
       var PartModel = @Html.Raw(Json.Encode(Model.Part));
       var BOMItemModel = @Html.Raw(Json.Encode(Model.BOMItem));
</script>

【问题讨论】：

这里有一个类似的问题，但仍然像我一样做：stackoverflow.com/questions/10813636/…

标签： c# javascript asp.net-mvc json razor

【解决方案1】：

如果您不想将 Razor 标记与 JavaScript 混合使用，那么 AJAX 调用可能是最好的。使用 jQuery，您可以向返回序列化模型的控制器端点发出 get 请求。当然，主要的警告是这种方法需要在初始页面加载之上额外往返服务器，但我不会让这阻止我。

客户端

$(function() {
    $.getJSON('part/get', function(data) {
      // do something with response
    });
}

服务器端

public class PartChangeModel { }

public class PartModel { }

public class BOMItemModel { }

public class PartViewModel { }

public class PartController : Controller {
    public ActionResult Get() {
        var partChangeModel = new PartChangeModel { /* init properties via repo, etc. */ }
        var partModel = new PartModel { /* init properties via repo, etc. */ }
        var bomItemModel = new BOMItemModel { /* init properties via repo, etc. */ }

        var viewModel = new PartViewModel {
            PartChangeModel = partChangeModel,
            PartModel = partModel,
            BOMItemModel = bomItemModel
        }

        return Json(viewModel);
    }
}

【讨论】：

是的，我考虑过这一点，但我努力降低 HTTP 调用，我仍然希望将它推送到服务器端。我做了足够多的 HTTP 调用来提取我所有的 json 数据。 :)
我倾向于采用的另一种方法是在对象上实现 .ToJson() 扩展方法，并将其放在像 Newtonsoft.Json 这样的东西之上。所以在你看来，你可以做类似 var PartChangeModel = @Model.PartChange.ToJson(); var PartModel =@Model.Part.ToJson(); var BOMItemModel = @Model.BOMItem.ToJson();
不知道刻度线显然会被转义/html 编码，所以我想你需要这样做，除非你使用 @: 呈现纯文本的语法。 asp.net/web-pages/tutorials/basics/…
我为此创建了一个 HTML 助手。我想过一个扩展方法，但是我要扩展什么类型的对象，对象？我不希望这种方法出现在所有东西上。
这就是你要命名它的原因。它只会在您引用该命名空间后显示。就像在调用 Select、Where、OrderBy 等之前必须使用 System.Linq 添加一样。

【解决方案2】：

为此尝试一些 HTML 助手。这似乎有效。

 public static MvcHtmlString SerializeJsonForClient(this HtmlHelper helper, string JavascriptVariableName, object ObjectToSerialize)
        {
            return MvcHtmlString.Create(String.Format("var {0} = {1};", JavascriptVariableName, Json.Encode(ObjectToSerialize)));
        }

然后你可以像这样从 Razor 调用它：

<script type="text/javascript">
    @Html.SerializeJsonForClient("PartChangeModel", Model.PartChange)
    @Html.SerializeJsonForClient("PartModel", Model.Part)
    @Html.SerializeJsonForClient("BOMItemModel", Model.BOMItem)
</script>

【讨论】：

【解决方案3】：

根据 A-Dubb 的建议，我将其放入扩展方法中。哪种方式更有意义？大概有六六打之类的东西。

 public static MvcHtmlString ToJson(this Object ObjectToSerialize, string JavascriptVariableName)
        {
            return MvcHtmlString.Create(String.Format("var {0} = {1};", JavascriptVariableName, Json.Encode(ObjectToSerialize)));
        }

然后你可以像这样从 Razor 调用它：

<script type="text/javascript">
    @Model.PartChange.ToJson("PartChangeModel")
    @Model.Part.ToJson("PartModel")
    @Model.BOMItem.ToJson("BOMItemModel")
</script>

【讨论】：