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

Question

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

这是我的 ViewModel：

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<ToDetailsViewModel> 不同），尽管我认为编辑器模板应该将索引附加到输入字段名称以启用正确的绑定。

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

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

Answer 1

1) “to”编辑器模板不呈现任何内容

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

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

2) 当点击 Confirm 并提交 To 列表中的第一个表单时，控制器接收到具有正确绑定的视图模型。提交以下任何表单（索引为 1 或更大）都会调用 ConfirmTo 操作并传递一个为 null 的 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){}