从列表中添加/删除项目作为视图中模型的属性答案

【问题标题】：Adding/Removing items from a list as a property of a model in a view从列表中添加/删除项目作为视图中模型的属性
【发布时间】：2012-08-06 17:19:33
【问题描述】：

我正在使用http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style 此处的指南，并且正在使用 MVC2。

我已经将它与控制器方法一起使用：

[HttpPost]
public ActionResult CreateStockRequest(StockRequestModel viewModel, List<StockRequestModel.StockRequestItem> items)
{
    viewModel.Items = items;

    // Validate the request and submit it
    return View(viewModel);
}

如您所见，即使我的模型包含 Items 方法，我也必须添加一个 items 参数，因为模型上的属性没有被填充。

我尝试在BeginCollectionItem 方法中将items 更改为Items，并尝试了各种其他值，但如果不在控制器方法中添加单独的items 参数，我无法使其工作。

tl;dr：如何从视图中添加/删除/编辑模型的列表属性中的项目？

查看

<table>
    <thead>
        <tr>
            <td><%= Html.LabelFor(m => m.Items[0].Item )%></td>
            <td><%= Html.LabelFor(m => m.Items[0].Quantity )%></td>
        </tr>
    </thead>
    <tbody id="editorRows">
        <% foreach (var item in Model.Items)
           {
               Html.RenderPartial("StockRequestItemEditor", item);
        }%>
    </tbody>
    <tfoot>
        <tr><td colspan="2">&nbsp;</td></tr>
        <tr>
            <td colspan="2"><%= Html.ActionLink("Add Item...", "BlankEditorRow", null, new { id = "addItem" })%></td>
            <script type="text/javascript">
                $("#addItem").click(function() {
                    $.ajax({
                        url: this.href,
                        cache: false,
                        success: function(html) { $("#editorRows").append(html); }
                    });
                    return false;
                });
            </script>
        </tr>
    </tfoot>
</table>

局部视图

<tr>
    <% using(Html.BeginCollectionItem("Items")) { %>
        <td>
            <%= Html.ComboBoxFor(m => m.Item,
                                 null,
                                 Url.Action("Products", "Data", new { area = (string)null }),
                                 Model.Item,
                                 2)%>
        </td>
        <td><%= Html.TextBoxFor(m => m.Quantity)%></td>
    <% } %>
</tr>

【问题讨论】：

更新了视图和局部视图

标签： c# asp.net-mvc asp.net-mvc-2

【解决方案1】：

这是一个很长的镜头，但也许这就是问题所在：

Html.RenderPartial("StockRequestItemEditor", item);

在 POST 操作中检查 viewModel 时，我注意到集合中的项目数正确，但它们都为空。这向我表明这是模型绑定器的前缀问题。所以也许这样的事情会起作用：

var dictPrefix = new ViewDataDictionary();
dictPrefix.TemplateInfo.HtmlFieldPrefix = "SomePrefix";

Html.RenderPartial("StockRequestItemEditor", item, dictPrefix);

我认为RenderPartial() 不会在不使用此重载的情况下传递前缀（尽管可能是错误的）。我不完全确定绑定前缀是如何工作的，所以我实际上不知道名称是什么，但它似乎在这里相关。该集合对我来说肯定有正确数量的项目，但没有一个是正确绑定的。

希望这足以促使其他人给你正确的答案。

【讨论】：

"SomePrefix" 应该类似于 "Items[" + i + "]"。
我不确定如何使用这些信息。我的理解是 BeginCollectionItem 方法基本上是这样做的（仅使用 GUID 作为索引，以便添加/删除内容）。

【解决方案2】：

为什么不使用视图模型？

public class StockRequestModel 
{
    public List<StockRequestItem> Items { get; set; }

    ... some other properties
}

然后让您的控制器操作将此视图模型作为参数：

[HttpPost]
public ActionResult CreateStockRequest(StockRequestModel viewModel)
{
    // TODO: do something with viewModel.Items ...

    return View(viewModel);
}

在你的视野中：

<div class="editorRow">
    <% using(Html.BeginCollectionItem("Items")) { %>
        ...
    <% } %>
</div>

【讨论】：