在一个页面上将一个视图模型拆分为多个表单

Question

我有一个 ASP.NET MVC 5 应用程序，它对 MVC 使用了更多的 MVVM 方法：它具有用于实体框架模型的“视图模型”(VM)。

我们的场景：

• 我们有一个带有附带编辑视图的 VM，其中包含大约 7 个引导选项卡。
• 每个选项卡都包含自己的@using (Html.BeginForm(...)) { ... }。
• 当用户切换选项卡时，我们使用 AJAX 来保存其数据（如果有效）。

我们的挑战：

POST Edit(...) 操作需要在每次 AJAX 调用时提交常见的隐藏表单。我们最终会得到重复的隐藏字段，因为它们会在每个表单中重复：

@Html.HiddenFor(model => model.ChildVm.Application_No) 
@Html.HiddenFor(model => model.ChildVm.FormSubmitted)
// other hidden fields...

我们在设置其中一些字段时遇到问题，其中一些字段的值对于每个表单都是唯一的。因为我们通过重复 ID 来破坏 HTML 规则，所以我们必须使用一些丑陋的技巧在 jQuery 中设置它们的值：

// Razor helper method to fetch ASP.NET ID for control
var formSubmittedId = '@Html.ClientIdFor(m => m.ChildVm.FormSubmitted)';

// Tab change handler
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var form = $(e.relatedTarget).attr('href');
    var formId = $(e.relatedTarget).attr('href').replace('#', '');
    var previousTab = $(form + '-form');
    $(previousTab).find('#' + formSubmittedId).val(formId);
    //....
});

上述方法有效，但很难看。如何在没有重复 ID 的情况下，在同一个 CSHTML 上的多个表单中包含来自同一个视图模型的表单字段？如果我为字段提供不同的 ID，这不会破坏 Edit 的 POST 操作，它使用来自客户端的 ID 将它们与视图模型服务器端的各自属性相匹配？

谢谢。

Answer 1

表单回传其成功的表单控件的名称/值对，而不是其id 属性的值。 id 属性的唯一用途是用于 javascript/jquery 和 css 选择器。

为了防止无效的 html（重复的 id 属性），您只需使用删除属性（不需要 ugly 脚本）

@Html.HiddenFor(model => model.ChildVm.Application_No, new { id = "" }) 

但是，一般来说，您应该避免在视图中隐藏输入（与记录 ID 相关的输入除外，尽管该值最好作为路由值添加到您的视图中）。如果您需要 POST 方法中其他隐藏输入的值，那么您应该根据 ID 再次获取记录。

如果出于某种原因，您确实需要在每个 ajax 帖子中回发所有这些附加值，更好的解决方案是将这些输入仅包含在单独的 <form> 元素中，然后使用 .serialize() 方法进行组合值，例如

<form id="hiddeninputs">
    @Html.HiddenFor(model => model.ChildVm.Application_No)
    .... // other hidden inputs
<form>
@using (Html.BeginForm(....))
{
    .... // form controls for 1st tab
}
@using (Html.BeginForm(....))
{
    .... // form controls for 2nd tab
}

然后在脚本中发布表单

$('form').submit(function() {
    var formdata = $(this).serialize() + '&' + $('#hiddeninputs').serialize;
    $.ajax({
        ....
        data: formdata,
        ....
    });
    return false; // cancel the default submit

您甚至可以完全移除隐藏的输入，然后构造一个对象来回传

var hiddeninputs = {
    'ChildVm.Application_No': '@Model.ChildVm.Application_No',
    ....
}

并使用

var formdata = $(this).serialize() + '&' + $.param(hiddeninputs, true);