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

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 articleSteven Sanderson提供的有关如何实现此步骤的分步教程.