Ajouter dynamiquement un élément à la collection

Question

J'ai une vue avec l'ajout d'élément à une collection : Il m'ajoute un élément au HTML, mais lorsque j'appelle ActionResult, le Model.TagModelsis reste vide (au départ il est vide).

            Hello
            @foreach (var item in Model.TagModels)
            { 

                    @Html.EditorFor(model => item.Name)
                    @Html.ValidationMessageFor(model => item.Name)

            }

            $(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;
                });
            });

Voici mon viewmodel :

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

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

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

Pourquoi n'y a-t-il pas de mise à jour sur le modèle ? Quand je change les propriétés des autres éléments statiques, tout se passe bien

EDIT Pour MHollis :

Merci Anton pour votre réponse :)

Maintenant j'ai

            $(document).ready(function () {
                $("#addItem").click(function () {
                    $.ajax({
                        url: this.href,
                        cache: false,
                        success: function (html) { $("#tags_div").append(html); }
                    });
                    return false;
                });
            });

Et tags_div :

            Hello
            @Html.ActionLink("Ajouter un autre...", "BlankEditorRow", null, new { id = "addItem" })

            @foreach (var item in Model.TagModels)
            { 

                    @Html.EditorFor(model => item.Name)

            }

Et la méthode PartialViewResult :

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

et la vue partielle :

@*@using Szamam.Models
@model TagModel

    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
*@

L'élément est ajouté mais lorsque l'actionresult est faite, la collection est vide :/

Il doit y avoir une autre raison :/

Answer 1

C'est parce que les entrées que vous ajoutez via javascript ont l'identifiant "item_name" et le nom "item.name". Ils devraient avoir le nom "TagModels[0].Name", "TagModels[1].Name", "TagModel[2].Name". Note : Ces informations proviennent d' ici

MISE À JOUR

D'accord, j'ai pris le temps de faire fonctionner cela en fonction des données que vous avez fournies. Heureusement, j'ai besoin de quelque chose de similaire pour un projet sur lequel je travaille actuellement. Malheureusement, mon projet est en VB.Net, mais pour vous aider, j'ai écrit ce code en C# (évidemment). Note : Vous pourriez copier-coller ce code dans un projet propre, à l'exception du manque de déclarations d'utilisation.

Vue

@model MvcApplication1.Models.QuestionTagViewModel
@{
    Layout = null;
}

        $(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;
            });
        });

    TagsTest

    @using (Html.BeginForm())
    { 

                Bonjour
            @for (int i = 0; i < Model.TagModels.Count; i++)
            {

                    @Html.EditorFor(model => model.TagModels[i].Name)
                    @Html.ValidationMessageFor(model => model.TagModels[i].Name)

            }

    }

Modèle

namespace MvcApplication1.Models
{
    public class QuestionTagViewModel
    {

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

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

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

Contrôleur

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult TagsTest()
        {
            var tagmodels = new List();
            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;
        }
    }
}