Question

我有一个ASP MVC 3页面，允许用户创建一个下拉列表并动态添加项目。例如，这是页面首次加载时的外观。

enter image description here

左侧的信息用于指定下拉列表将位于哪个页面（Navbar Item）以及我们将给出下拉列表的名称（显然Drop Down List Name）。< / p>

右侧的信息（Allowed Value和Display Value）将是特定的下拉列表项。当用户单击Add Another链接时，Ajax调用将转到控制器，返回部分视图，然后将其附加到Drop Down Items <fieldset>，如下所示：

enter image description here

问题是，一旦用户点击Submit按钮，没有任何项目进入控制器。

我仍然是ASP MVC的新手，所以我想知道我是否正确地采用了这种方式。这是将项目动态添加到列表的正确方法吗？

以下是此视图最初在控制器中的创建方式

    public ActionResult NewList()
    {
        List<DropDownValues> drop = new List<DropDownValues>();
        drop.Add(new DropDownValues());

        return View(drop);
    }

创建类型DropDownValues的列表并将其发送到视图，该视图顶部带有此标记

@model IEnumerable<Monet.Models.DropDownValues>

下面的Ajax调用

<script>
    $(document).ready(function () {
        $("#addItem").click(function () {
            if ($('#Field').text() != "" && $('#DisplayPage').text() != "") {
                $.ajax({
                    url: '@Url.Action("BlankDropDownItem", "DropDownValues")',
                    data: { field: $('#Field').val(), displayPage: $('#DisplayPage').val() },
                    dataType: 'html',
                    cache: false,
                    success: function (html) {
                        $("#items").append(html);
                    }
                });
            } else {
                alert("Please enter a Drop Down List Name and Navbar Item first!");
            }
            return false;
        });
    });
</script>

调用此控制器方法

    public ActionResult BlankDropDownItem(string field, string displayPage)
    {
        DropDownValues partial = new DropDownValues();
        partial.Field = field;
        partial.DisplayPage = displayPage;

        return PartialView("DropDownItemPartial", partial);
    }

然后将此部分视图附加到主页

@model Monet.Models.DropDownValues


@Html.HiddenFor(model => model.Field)
@Html.HiddenFor(model => model.DisplayPage)

<div class="editor-label">
    @Html.LabelFor(model => model.AllowedValue)
</div>
<div class="label-field">
    @Html.EditorFor(model => model.AllowedValue)
    @Html.ValidationMessageFor(model => model.AllowedValue)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.DisplayValue)
</div>
<div class="label-field">
    @Html.EditorFor(model => model.DisplayValue)
    @Html.ValidationMessageFor(model => model.DisplayValue)
</div>

我正在尝试使用隐藏字段，以确保所有新项目都使用正确的Field和Navbar Item值存储在数据库中（同样，不确定这是否是正确的方法来解决这个问题）。

非常感谢任何建议/意见。 THX！

Answer 1

你可以使用Steven Sanderson的BeginCollectionItem助手来帮助你：http://nuget.org/packages/BeginCollectionItem/

他的博客文章解释了使用WebForms视图引擎的原理，但它同样适用于Razor：http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

如果您想了解提交具有相同名称的输入字段集合所涉及的细节，请在此处阅读Haack的博客文章：http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

希望这能给你一些指示！

将部分视图添加到列表中

1 个答案: