Question

我想用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; }
}

我的观点，它使用Garage作为模型：

<% using (Html.BeginForm())
{%>
<div id="cars">
         <% 
               foreach (var item in Model.Cars)
               {
                  Html.RenderPartial("CarView", item);
              } %>
</div>
<% } %>

我的CarView使用Car作为模型：

 <div class="carRow">               

        <%--   Color--%>
        <%=Html.CustomLabelFor(model => model.Color)%>
        <%= Html.TextBox(Model.Color) %>

         <%--   Name--%>
        <%=Html.CustomLabelFor(model => model.Name)%>
        <%= Html.TextBox(Model.Name) %>
 </div>

添加新Car时，我使用AJAX调用，并将其添加到html中。 AJAX在控制器中使用此方法：

 public ViewResult NewCar()
    {
        return View("CarView");
    }

我的java脚本ajax调用：

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

这很好地呈现了html，但它没有将汽车添加到汽车列表中。

如何做到这一点？

Answer 1

您可以查看following article，其中Steven Sanderson提供了有关如何实施此步骤的分步教程。

Answer 2

我意识到这是一个古老的问题，但在尝试了上述建议后，Steven Sanderson's BeginCollectionItem以及其他一些潜在的解决方案，我没有走得太远（新项目不会发布）。 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>

使用上面的模板（以下内容贯穿集合并为每个项目生成html）：

在我看来：

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

当用户点击“添加行”时按钮（＆＃39; addSourceBtn＆＃39;在我下面的代码中），我使用ajax来获取模板的html。

MVC控制器获取方法：

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

js handler：

$(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中的现有索引。

Answer 3

关注此jQuery插件，专门用于在事务的详细部分中添加新元素客户端

https://github.com/suraj-mahajan/Add-New-Row-jQuery-for-MVC

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

3 个答案: