Jquery 如何在javascript中向MVC模型添加项？

我想使用java脚本动态地将项目添加到模型中的列表中。如何使MVC将新项绑定到模型

我的模型：

public class Garage
{
    public string Name{ get; set; }
    public string Location { get; set; }
    public IList<Car> Cars{ get; set; }
}

public class Car
{
    public string Color{ get; set; }
    public string Name { get; set; }
}

我的java脚本ajax调用：

            $('.addCarButton').click(function () {
            $.ajax({
                url: "<%= Url.Action("CreateCars") %>",
                cache: false,
                success: function (html) { $("#cars").append(html); }
            });
            return false;
        });

$（'.addCarButton'）。单击（函数（）{
$.ajax({
url:“”，
cache:false，
成功：函数（html）{$（“#cars”）.append（html）；}
});
返回false；
});

这会很好地呈现html，但不会将汽车添加到汽车列表中

---

如何做到这一点？

您可以看一看，其中Steven Sanderson提供了一个关于如何实现这一点的分步教程。

遵循这个jQuery插件，它是专门为在事务的详细部分添加新元素客户端而设计的

---

我意识到这是一个老问题，但在尝试了上述建议和其他一些可能的解决方案后，我没有走多远（新项目不会发布）。从理论上讲，BeginCollectionItem似乎是一个不错的解决方案，但它不会发布新的项目，并且它对列表项目的格式产生了意想不到的影响

解决方案非常简单，并且不需要任何外部库（除了JQuery）。这在ASP.NET MVC5中适用于我

为行项目创建编辑器模板

路径：Views/Shared/EditorTemplate/NuggetSourceDto.cshtml

@model [namespace].NuggetSourceDto

@{
    ViewBag.Title = "NuggetSourceDto";
}

<li id=@Model.Id>
    @Html.HiddenFor(t => t.Id)
    @Html.TextBoxFor(s => s.Url, new { @class = "form-control", autofocus = "autofocus" })
    <a role="button" class="glyphicon glyphicon-remove"></a>
</li>

当用户单击“添加行”按钮（“下面代码中的addSourceBtn”）时，我使用ajax获取模板的html

MVC控制器获取方法：

[HttpGet]
public PartialViewResult AddBlankSourcesRow()
{
    return PartialView("EditorTemplates/NuggetSourceDto", new NuggetSourceDto());
}

js处理程序：

$(document).ready(function () {
    $('#addSourceBtn').click(function () {
        var indexOfNewItem = $('#sourceList li').length;

        $.ajax({
            url: '/nugget/AddBlankSourcesRow/',
            cache: false,
            success: function (html) {
                var newItem = $(html);
                var randId = Math.random() * 10000000;
                randId = Math.floor(randId);
                newItem.attr('id', 'newSource__' + randId);
                newItem.find('input').first().attr({
                    //name: 'NuggetSources[3].Id'
                    name: 'NuggetSources[' + indexOfNewItem + '].Id',
                    id: 'NuggetSources_' + indexOfNewItem + '__Id',
                    value: randId
                });
                newItem.find('input[id^=Url]').attr({
                    name: 'NuggetSources[' + indexOfNewItem + '].Url',
                    id: 'NuggetSources_' + indexOfNewItem + '__Url'
                });
                $('#sourceList').append(newItem);
            }
        });
        return false;
    });
});

所有这些中的lynchpin都是为了确保新插入的元素对每个属性都有一个name属性，该属性包括集合的名称和有效索引：

        newItem.find('input').first().attr({
            //name: 'NuggetSources[3].Id'
            name: 'NuggetSources[' + indexOfNewItem + '].Id'
        });
        newItem.find('input[id^=Url]').attr({
            name: 'NuggetSources[' + indexOfNewItem + '].Url'
        });

否则，MVC控制器中的新项目将被忽略

---

此解决方案仅处理添加新行。对于删除，因为索引很重要，一种解决方案是向服务器发出删除请求，然后重新加载列表，或者只修复js中的现有索引。

不需要添加javascript单击处理程序。MVC中已经提供了这些thin。

@Html.EditorFor(m => m.NuggetSources);

[HttpGet]
public PartialViewResult AddBlankSourcesRow()
{
    return PartialView("EditorTemplates/NuggetSourceDto", new NuggetSourceDto());
}

$(document).ready(function () {
    $('#addSourceBtn').click(function () {
        var indexOfNewItem = $('#sourceList li').length;

        $.ajax({
            url: '/nugget/AddBlankSourcesRow/',
            cache: false,
            success: function (html) {
                var newItem = $(html);
                var randId = Math.random() * 10000000;
                randId = Math.floor(randId);
                newItem.attr('id', 'newSource__' + randId);
                newItem.find('input').first().attr({
                    //name: 'NuggetSources[3].Id'
                    name: 'NuggetSources[' + indexOfNewItem + '].Id',
                    id: 'NuggetSources_' + indexOfNewItem + '__Id',
                    value: randId
                });
                newItem.find('input[id^=Url]').attr({
                    name: 'NuggetSources[' + indexOfNewItem + '].Url',
                    id: 'NuggetSources_' + indexOfNewItem + '__Url'
                });
                $('#sourceList').append(newItem);
            }
        });
        return false;
    });
});

        newItem.find('input').first().attr({
            //name: 'NuggetSources[3].Id'
            name: 'NuggetSources[' + indexOfNewItem + '].Id'
        });
        newItem.find('input[id^=Url]').attr({
            name: 'NuggetSources[' + indexOfNewItem + '].Url'
        });