使用编辑器模板显示多个表单

Question

我的问题与这个非常相似。我正在开发的应用程序是用 MVC 3 和 Razor 编写的。它允许用户从商店中选择商品并将每件商品发送到不同的地址。

这是我的视图模型：

public class DeliveryDetailsViewModel
{
    public FromDetailsViewModel From { get; set; }
    public IList<ToDetailsViewModel> To { get; set; }
}

public class DetailsViewModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
}

public class FromDetailsViewModel : DetailsViewModel
{
    public string StreetAddress { get; set; }
    public string Suburb { get; set; }
    public string Postcode { get; set; }
}

public class ToDetailsViewModel : DetailsViewModel
{
    public string Message { get; set; }
}

我的视图类似于下面。

@model Store.ViewModels.DeliveryDetailsViewModel

@Html.EditorFor(m => m.From)

@Html.EditorFor(m => m.To)

我的目的是显示一组表单（购物车中的每个商品一个），以便用户能够输入不同的送货详细信息。每个表单都有自己的提交按钮。

呈现“To”表单的编辑器模板如下：

@model Store.ViewModels.ToDetailsViewModel

@using (Html.BeginForm("ConfirmTo", "Delivery"))
{
    @Html.TextBoxFor(m => m.FirstName)
    @Html.TextBoxFor(m => m.LastName)
    @Html.TextBoxFor(m => m.Email)
    @Html.TextBoxFor(m => m.Message)

    <input type="submit" value="Confirm" />
}

我的控制器：

public class DeliveryController : Controller
{
    public ActionResult Index()
    {
        var model = new DeliveryDetailsViewModel();
        model.From = new FromDetailsViewModel();
        model.To = new List<ToDetailsViewModel>();
        return View(model);
    }

    public ActionResult ConfirmTo(ToDetailsViewModel toDetails)
    {
        // Save to database.
    }
}

我有几个问题：

1. “to”编辑器模板不呈现任何内容（尽管以前是这样）。它引用模型类型不匹配（即 ToDetailsViewModel 与 List 不同），尽管我认为编辑器模板应该附加输入字段名称的索引以启用正确的绑定。

2. 当单击“确认”并提交“至”列表中的第一个表单时，控制器会收到具有正确绑定的视图模型。提交以下任何表单（索引为 1 或更大）都会调用ConfirmTo 操作并传递一个为 null 的 ToDetailsViewModel。

任何帮助将不胜感激，如果您想了解有关我遇到的问题或我正在使用的代码的更多信息，请随时询问。

Answer 1

1）“to”编辑器模板未渲染任何内容

在您的控制器操作中，您没有在列表中放置任何内容。你刚刚实例化了它。所以添加一些元素：

model.To = new List<ToDetailsViewModel>();
model.To.Add(new ToDetailsViewModel());
model.To.Add(new ToDetailsViewModel());
...

2) 当单击“确认”并提交“至”列表中的第一个表单时，控制器会收到具有正确绑定的视图模型。提交以下任何表单（索引为 1 或更大）都会调用ConfirmTo 操作并传递一个为空的ToDetailsViewModel。

如果这甚至适用于第一个元素，我会感到惊讶，因为输入字段当前没有正确的名称。它们都以 To[someIndex] 为前缀，而您的 ConfirmTo 需要平面模型，而不是集合。

因此，您可以将前缀设置为空字符串，以便在 ~/Views/Shared/EditorTemplates/ToDetailsViewModel.cshtml 编辑器模板中生成正确的输入元素：

@model ToDetailsViewModel
@{
    ViewData.TemplateInfo.HtmlFieldPrefix = "";
}
@using (Html.BeginForm("ConfirmTo", "Home"))
{
    @Html.TextBoxFor(m => m.FirstName)
    @Html.TextBoxFor(m => m.LastName)
    @Html.TextBoxFor(m => m.Email)
    @Html.TextBoxFor(m => m.Message)

    <input type="submit" value="Confirm" />
}

Answer 2

1）你尝试一下这个，因为你的视图模型有

public IList<ToDetailsViewModel> To { get; set; }

To 是一个列表，因此你的编辑器模板应该有

@model IEnumerable<Store.ViewModels.ToDetailsViewModel>

，并且模板应该使用 foreach

@foreach(model in Model){}