如何序列化视图模型并将其推送到 HTML 页面以使用 JSON 结构

本文关键字：HTML 结构 JSON 视图 序列化 模型 | 更新日期: 2023-09-27 17:55:21

我喜欢将我的视图模型结构推送到我的视图中，然后在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>

如何序列化视图模型并将其推送到 HTML 页面以使用 JSON 结构

如果你不想将 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);
    }
}

为此尝试一些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>

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

 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>
相关文章：