使用jQuery表单的部分视图和模型在MVC 4中提交

Question

我正在开发基于MVC 4的网络应用程序，我正在尝试使用HTML表单。我在视图模型中有几个单独的模型，如下所示：

public class NewAccountViewModel
{
    UserModel User { get; set; }
    AccountModel Account { get; set; }
    TicketModel Ticket { get; set; }
}

然后我将其用作我视图的模型。视图还包含每个模型的部分视图。每个局部视图也使用视图模型作为模型，我从主视图传递视图模型实例，如下所示：

@Html.Partial("~/Views/Account/_User.cshtml", Model)

然后在部分视图中，我添加了以下字段：

@Html.TextBoxFor(m => m.User.Name)

在我的POST处理程序中，我接受视图模型实例作为参数，我可以使用从那里提交的表单中提交的数据。表单使用jQuery.post提交，$('#nameofmyform').serialize()作为数据。

这种方法与预期一样有效。但是，部分视图和视图模型之间的耦合太紧。如果我想在具有不同视图模型的不同控制器中使用User模型，那么由于局部视图使用此特定视图模型，因此无法实现。

所以，我的尝试是这样的：

@Html.Partial("~/Views/Account/_User.cshtml", Model.User)

然后，使用实际模型作为局部视图的模型，我绑定了字段：

@Html.TextBoxFor(m => m.Name)

这是单向的，因为所有字段都使用视图模型中的数据及其包含的模型正确填充。但是，在POST上，视图模型未正确序列化。通过检查从表单发回的数据，我看到在第一种方法中，所有内容都绑定到视图模型，它使用如下数据序列化表单：

{ "User.Name" : "Blahblah" ...

使用第二种方法时，它只是按模型序列化表单：

{ "Name" : "Blahblah" ...

这样，视图模型的模型属性在POST处理程序中都是空值。

所以，我真正想知道的是：是否有可能以某种方式在视图模型中添加属性名称，以便在我的视图模型中正确地序列化它？我需要在JavaScript / jQuery中执行此操作，还是可以在我的.NET代码中完成？

Answer 1

使用编辑器模板而不是部分：

@Html.EditorFor(x => x.User, "_User")

然后定义~/Views/Shared/EditorTemplates/_User.cshtml：

@model User
...
@Html.TextBoxFor(m => m.Name)

现在您的输入字段将被正确命名，因为与partials相反，编辑器模板会遵循导航上下文。

Answer 2

您可以像这样设置字段前​​缀：

ViewData.TemplateInfo.HtmlFieldPrefix = "User";