如何使用 AJAX 结果更新主细节剃刀页面中的模型

Question

我有一个 parent table 行。
当他们 select 一行时，一个 AJAX 调用会触发 returns child 详细信息。

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

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

但我看不到如何使用 child 我返回的 AJAX 结果更新文本框。

我能做的最好的事情就是通过 'complete' 方法手动更新每个字段。但是我还有大约 30 个字段要添加，感觉是错误的方法。

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

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

 @Model.Child = child

没有。所以他们从不显示任何数据。

Answer 1

这个问题是基于我的误解。起初，当我意识到自己的错误时，我删除了问题。我恢复它是因为我认为新手很容易犯错，一旦犯了，答案就很难弄清楚了。

问题是页面呈现后@model 不再存在。没有像我想象的那样在幕后进行数据绑定。

你的选择是

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

 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;
         }
     }
 }

用knockout创建一堆observable，然后设置数据绑定。这样干净多了。
https://knockoutjs.com/documentation/json-data.html
使用 knockout 插件设置映射。
https://knockoutjs.com/documentation/plugins-mapping.html

如何使用 AJAX 结果更新主细节剃刀页面中的模型

How do I update model in Master detail razor page with AJAX results

ajax

asp.net-mvc

razor