时间戳

首页 > 解决方案 > 如何使用 AJAX 结果更新 Master detail razor 页面中的模型

ajax - 如何使用 AJAX 结果更新 Master detail razor 页面中的模型

问题描述

我有一个带有行的父表。
当他们选择一行时，将触发一个返回子详细信息的 AJAX 调用。

我有多个显示子属性的文本框

 <div class="row">
    @Html.CheckBoxFor(m => m.Child.Property)
    @Html.LabelFor(m => m.Child.Property)
 </div>

但我看不到如何用我在 AJAX 结果中得到的孩子更新文本框。

我能做的最好的事情是从“完整”方法手动更新每个字段。但是我还有大约 30 个字段要添加，这感觉像是错误的方法。

如何在不使用局部和不刷新整个页面的情况下将编辑框绑定到返回的模型？

我在@model 中添加了 Child 作为属性，并且 TextFor 似乎可以正确绑定。但是当然

 @Model.Child = child

才不是。所以他们从不显示任何数据。

标签： ajaxasp.net-mvcrazor

解决方案

这个问题是基于我的一个误解。起初，当我意识到自己的错误时，我删除了这个问题。我正在恢复它，因为我认为对于新手来说这是一个容易陷入的错误，一旦你这样做，答案就很难理清了。

问题是，一旦页面被渲染，@model 就不再存在了。没有像我想象的那样在幕后进行数据绑定。

你的选择是

  1. 手动填充元素。（这将需要编辑以适合您的特定元素）

     function DisplayMergeSection(data) {
     for (var key of Object.keys(data)) {
         DisplayElement(data, key, "#Clients_");
     }
 }

 function DisplayElement(data, key, prefix) {
     return;
     var val = data[key];
     var valString = data[key + "String"];
     var element = $(prefix + key)[0];
     if (element && element.type === 'text') {
         if ((val || '').toString().indexOf("Date(") > -1) {
             var dtStart = new Date(parseInt(val.substr(6)));
             element.value = moment(dtStart).format('MM/DD/YYYY');
         } else {
             element.value = val;
         }
     } else if (element && element.type === 'checkbox') {
         element.checked = val;
     } else if (element && element.type === 'select-one') {
         element.value = valString;
     } else if (element && element.nodeName === 'DIV') {
         if ((val || '').toString().indexOf("Date(") > -1) {
             var dtStart = new Date(parseInt(val.substr(6)));
             element.innerText = moment(dtStart).format('MM/DD/YYYY');
         } else {
             element.innerText = val;
         }
     }
 }

  2. 创建一堆带有敲除的可观察对象，然后设置数据绑定。这干净多了。
    https://knockoutjs.com/documentation/json-data.html

  3. 使用淘汰插件设置映射。
    https://knockoutjs.com/documentation/plugins-mapping.html

推荐阅读