将项目动态添加到集合答案

【问题标题】：Dynamically add item to collection将项目动态添加到集合
【发布时间】：2011-07-02 19:36:15
【问题描述】：

我有一个向集合添加元素的视图：它将 me 元素添加到 html，但是当我调用 ActionResult 时，Model.TagModelsis 仍然为空（开始时为空）。

<div id="tags_div">
            <label id="add_tag">Hello</label>
            @foreach (var item in Model.TagModels)
            { 

                <div class="editor-field">
                    @Html.EditorFor(model => item.Name)
                    @Html.ValidationMessageFor(model => item.Name)
                </div>

            }</div>

        <script type="text/javascript">
            $(document).ready(function () {
                var $newdiv1 = $('<div class="ui-button-text"><input class="text-box single-line" id="item_Name" name="item.Name" type="text" value="b" /><span class="field-validation-valid" data-valmsg-for="item.Name" data-valmsg-replace="true"></span></div>');
                $("#add_tag").live("click", function () {
                    $(this).append($newdiv1);
                    return false;
                });
            });
        </script>

这是我的视图模型：

public class QuestionTagViewModel
    {
        public QuestionModel QuestionModel { get; set; }

        //private List<TagModel> _tagModels=new List<TagModel>(){new TagModel(){Name = "a"},new TagModel(){Name = "b"}};
        private List<TagModel> _tagModels = new List<TagModel>();

        public List<TagModel> TagModels
        {
            get { return _tagModels; }
            set { _tagModels = value; }
        }
    }

为什么模型没有更新？当我更改静态元素的其他属性时，一切正常

编辑致 MHollis：

感谢安东的回复:)

现在我有

<script type="text/javascript">
            $(document).ready(function () {
                $("#addItem").click(function () {
                    $.ajax({
                        url: this.href,
                        cache: false,
                        success: function (html) { $("#tags_div").append(html); }
                    });
                    return false;
                });
            });
        </script>

还有tags_div：

<div id="tags_div">
            <label id="add_tag">Hello</label>
            @Html.ActionLink("Add another...", "BlankEditorRow", null, new { id = "addItem" })

            @foreach (var item in Model.TagModels)
            { 

                <div class="editor-field">
                    @Html.EditorFor(model => item.Name)
                </div>

            }</div>

还有那个 PartialViewResult 方法：

public PartialViewResult BlankEditorRow()
        {
            var x=PartialView("TagRow", new TagModel());
            return x;
        }

和局部视图：

@*@using Szamam.Models
@model TagModel

<div class="editor-field">
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>*@


<div class="editor-field">
<input class="text-box single-line" id="[0].Name"  name="[0].Name" type="text" value="b" />
</div>

元素正在添加，但当执行结果时，集合为空：/

所以应该还有别的原因：/

【问题讨论】：

标签： jquery asp.net-mvc-3 razor

【解决方案1】：

这是因为您通过 javascript 添加的输入具有“item_name”的 id 和“item.name”的名称。它们需要具有“TagModels[0].Name”、“TagModels[1].Name”、“TagModel[2].Name”的名称。注意：这是在here找到的关闭信息

更新

好的，鉴于您提供的数据，我继续并花时间完成这项工作。谢天谢地，我现在正在从事的项目需要类似的东西，不幸的是我的项目在 VB.Net 中，但为了帮助你，我在 C# 中编写了这段代码（显然）。注意：除了缺少 using 语句之外，您可以将这段代码复制并粘贴到一个干净的项目中。

查看

@model MvcApplication1.Models.QuestionTagViewModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var re = /\[(.*?)\]/ ;
            $("#add_tag").click(function() {
                var name = $(".tagRows:last>input").attr("name");
                var m = re.exec(name);
                var itemNumber = parseInt(m[1]) + 1;
                var $newdiv1 = $('<div class="tagRows"><input class="text-box single-line" id="TagModels' + itemNumber + '__Name" name="TagModels[' + itemNumber + '].Name" type="text"><span class="field-validation-valid" data-valmsg-for="TagModels[' + itemNumber + '].Name" data-valmsg-replace="true"></span></div>');
                $(".tagRows:last").after($newdiv1);
                return false;
            });
        });
    </script>
    <title>TagsTest</title>
</head>
<body>
    @using (Html.BeginForm())
    { 
        <div id="tags_div">
            <label id="add_tag">
                Hello</label>
            @for (int i = 0; i < Model.TagModels.Count; i++)
            {
                <div class="tagRows">
                    @Html.EditorFor(model => model.TagModels[i].Name)
                    @Html.ValidationMessageFor(model => model.TagModels[i].Name)
                </div>
            }
        </div>
        <input type="submit" name="submit" value="Submit" />
    }
</body>
</html>

模型

namespace MvcApplication1.Models
{
    public class QuestionTagViewModel
    {

        //private List<TagModel> _tagModels=new List<TagModel>(){new TagModel(){Name = "a"},new TagModel(){Name = "b"}};
        private List<TagModel> _tagModels = new List<TagModel>();

        public List<TagModel> TagModels
        {
            get { return _tagModels; }
            set { _tagModels = value; }
        }
    }

    public class TagModel
    {
        public string Name { get; set; }
    }
}

控制器

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult TagsTest()
        {
            var tagmodels = new List<TagModel>();
            tagmodels.Add(new TagModel() { Name = "Tag1" });
            tagmodels.Add(new TagModel() { Name = "Tag2" });
            tagmodels.Add(new TagModel() { Name = "Tag3" });
            var model = new QuestionTagViewModel() { TagModels = tagmodels };


            return View(model);
        }

        [HttpPost]
        public ActionResult TagsTest(QuestionTagViewModel model)
        {
            return null;
        }
    }
}

【讨论】：

我不能同意你的看法。如果我的收藏一开始有 10 个元素，那么它们的 id 为“item_name”，名称为“item.name”
我想引导您阅读这篇博文。 weblogs.asp.net/nmarun/archive/2010/03/13/…
伟大的姆霍利斯！明天我将开始赏金，我会给你它:) 有一个“错误”。当我第二次点击标签“你好”时，我失去了添加的元素：/想要的效果是添加下一个元素。你能纠正它吗？ :)
@user278618 在那里，修复了视图中的错误。很好走。