如何序列化视图模型并将其推送到 HTML 页面以使用 JSON 结构
How do I serialize and push a ViewModel out to HTML page to use the JSON structure?
我喜欢将我的视图模型结构推送到我的视图中,然后在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>
如果你不想将 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>
相关文章:
- TinyMCE保留预定义的html结构
- jQuery的HTML结构追加数组
- 正在创建嵌套的HTML结构
- 遍历HTML结构以搜索属性
- 如何用java脚本编写html结构
- 正在用jQuery改变HTML结构
- 如何从平面JavaScript数组创建分层HTML结构
- 如果有多个
,请在后文条目时将新的 HTML 结构添加到
- 如何格式化 html 结构中特定符号内换行的文本并设置其格式
- 如何使用 jQuery 创建丰富的客户端体验时避免锁定我的 HTML 结构
- 在更改函数后使用 jQuery 选择对象,修改了需要选择的元素的 html 结构
- 无限滚动我的HTML结构
- DOM 不代表 d3 强制布局的 html 结构
- JQuery/Javascript - 突出显示文本并环绕标签,而无需更改 html 结构
- 在 HTML 结构中打印 JSON 数据问题
- 在使用Ajax仅检索数据库中的数据之间,如何更好地从html结构中的数据库中检索数据
- 在v-for中动态创建一个html结构
- jquery克隆了一个没有文本内容的html结构
- 如果序列与Html结构匹配,则需要Javascript
- 如果我的HTML结构包含另一个父HTML标记或id类等,则需要重定向