Question

我已经对问题进行了更改，这仍然是相同的，但希望通过模型以及我想要实现的目标以及我遇到问题的方式更加清晰。

下面显示了两个类，Company和Employee，Company有一个Employees列表。

这将是一个输入表单，因此开始时将没有数据。

最终，我希望用户能够根据需要向Company对象模型添加尽可能多的Employee对象，并且可以更新Employee对象

我使用BeginCollectionItem在正确的轨道上，所以我可以添加/删除任意数量的Employee对象吗？当我点击Add按钮时，它会将它带到另一个页面上的部分视图（使用AjaxActionLink），但不能使用JavaScript。

更新删除了AjaxActionLink并改为使用JavaScript。

索引

@model MvcTest.Models.Company
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Company</h2>
<div>
    @Html.LabelFor(m => m.Name)
    @Html.EditorFor(m => m.Name)
</div>
<fieldset>
    <legend>Employees</legend>
    <div id="new-Employee">
        @foreach (var Employee in Model.Employees)
        {
            Html.RenderPartial("_Employee", Employee);
        }
    </div>
    <div>
        <input type="button" id="addemployee" name="addemployee" value="Add Employee"/>
        <br/>
    </div>
    <br/>
    @section Scripts
    {
        <script type="text/javascript">
            $('#addemployee').on('click', function () {
                $.ajax({
                    async: false,
                    url: '/Company/AddNewEmployee'
                }).success(function (partialView) {
                    $('#new-Employee').append(partialView);
                });
            });
        </script>
    }
</fieldset>
<div>
    <input type="submit" value="Submit" />
</div>

_Employee PartialView

    @model MvcTest.Models.Employee

@using (Html.BeginCollectionItem("Employees"))
{
    <div class="employeeRow">
        @Html.LabelFor(m => m.Name)
        @Html.EditorFor(m => m.Name)

        @Html.LabelFor(m => m.Telephone)
        @Html.EditorFor(m => m.Telephone)

        @Html.LabelFor(m => m.Mobile)
        @Html.EditorFor(m => m.Mobile)

        @Html.LabelFor(m => m.JobTitle)
        @Html.EditorFor(m => m.JobTitle)

        <a href="#" class="deleteRow">Delete</a>
    </div>
}

@section Scripts
{
$("a.deleteRow").live("click", function(){
    $(this).parents("div.employeeRow:first").remove();
return false;
});
}

控制器

public class CompanyController : Controller
    {
        // GET: Company
        public ActionResult Index()
        {
            var newCompany = new Company();
            return View(newCompany);
        }
        public ActionResult AddNewEmployee()
        {
            var employee = new Employee();
            return PartialView("_Employee", employee);
        }
    }

模型

public class Company
    {
        [Key]
        public int Id { get; set; }
        [Display(Name = "Company")]
        public string Name { get; set; }
        public List<Employee> Employees { get; set; }

        //public Company()
        //{
        //    Employees = new List<Employee>
        //    {
        //        new Employee{ Name = "Enter name"}
        //    };
        //}
    }
    public class Employee
    {
        [Key]
        public int Id { get; set; }
        [Display(Name="Employee")]
        public string Name { get; set; }
        public string Telephone { get; set; }
        public string Mobile {get;set;}
        [Display(Name="Job Title")]
        public string JobTitle {get;set;}
    }

Answer 1

您无需使用BeginCollectionItem即可实现此目的。从必须自己查看并尝试将其用于类似的问题，它似乎是为早期版本的MVC创建了这种性质的问题。

使用部分视图显示和更新列表。一个局部视图用于显示和遍历对象列表，另一个用于创建一个新对象，在回发后更新列表将在部分视图中显示新创建的对象和列表。

我在这里发布了一个类似的问题，可以解决您的问题，click here

希望这有帮助。

<强>更新删除不起作用的原因是因为您无法从部分视图调用JS，将其放在主视图中（@section Script）。另外我觉得你的div中的class和id关键字有点混乱，看看下面。

所以你应该：

部分视图

@model MvcTest.Models.Employee
    @using (Html.BeginCollectionItem("Employees"))
    {
        <div id="employeeRow" class="employeeRow">
            @Html.LabelFor(m => m.Name)
            @Html.EditorFor(m => m.Name)

            @Html.LabelFor(m => m.Telephone)
            @Html.EditorFor(m => m.Telephone)

            @Html.LabelFor(m => m.Mobile)
            @Html.EditorFor(m => m.Mobile)

            @Html.LabelFor(m => m.JobTitle)
            @Html.EditorFor(m => m.JobTitle)

            <a href="#" id="deleteRow" class="deleteRow" onclick="deleteFunction()">Delete</a>
        </div>
    }

主视图

    @model MvcTest.Models.Company
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Company</h2>
<div>
    @Html.LabelFor(m => m.Name)
    @Html.EditorFor(m => m.Name)
</div>
<fieldset>
    <legend>Employees</legend>
    <div id="new-Employee">
        @foreach (var Employee in Model.Employees)
        {
            Html.RenderPartial("_Employee", Employee);
        }
    </div>
    <div>
        <input type="button" id="addemployee" name="addemployee" value="Add Employee"/>
        <br/>
    </div>
    <br/>
    @section Scripts
    {
        <script type="text/javascript">
            $('#addemployee').on('click', function () {
                $.ajax({
                    async: false,
                    url: '/Company/AddNewEmployee'
                }).success(function (partialView) {
                    $('#new-Employee').append(partialView);
                });
            });

            $("#deleteRow").live("click", function () {
                $(this).parents("#employeeRow:first").remove();
                return false;
            });
        </script>
    }
</fieldset>
<div>
    <input type="submit" value="Submit" />
</div>

Answer 2

让我们说ClassA是您的ViewModel：

您只需要一个部分视图或视图来同时更新：

e.g。的 Edit.cshtml

@model ClassA @Html.BeginForm(){ @Html.TextBoxFor(m => m.name) for(int i = 0; i< Model.classB.Count; i++){ @Html.TextBoxFor(m => Model.classB[i].name) <button type="button"> Add </button> <button type="button"> Remove </button> } <input type="submit" value = "save"/> }

注意：在Partial视图中，您使用的是foreach循环，MVC Model Binder需要输入字段的格式为：

list[0].prop1 list[0].prop2 list[0].prop3 list[1].prop1 list[1].prop2 list[1].prop3

因此，我们使用for循环

然后在控制器中：

[HttpPost] public ActionResult Edit(ClassA model){ // HEre you will see model.ClassB list // you can then save them one by one foreach(var item in Model.classB){ save } return View(model); }

如果要从列表中动态添加或删除项目：

创建另一个部分视图classBs：

@model List<classB> <div id="lists"> foreach (var contact in Model) { @Html.Partial("ClassBRow", contact) } </div> <button data-action-url="@Url.Action("ClassBRow","CONTROLLER")" class="btn btn-primary pull-right" id="addItem">Add</button> <script> $("#addItem").click(function () { var btn = $(this); $.ajax({ url: btn.data('action-url'), success: function (html) { $("#lists").append(html); } }); return false; }); </script>

创建另一个部分视图：ClassBRow.cshtml：

@model classB using (Html.BeginCollectionItem("classB")) { @Html.HiddenFor(m => m.isDeleted, new { data_is_deleted = "false" }) @Html.TextBoxFor(m => Model.name, new { @class = "form-control" }) <span class="glyphicon glyphicon-trash" data-action="removeItem" title="remove" style="cursor:pointer"></span> }

在您的控制器中：

public ActionResult ClassBRow() { return PartialView(new classB()); }

AND Edit.cshtml变为：

@model ClassA @Html.BeginForm(){ @Html.TextBoxFor(m => m.name) @Html.Partial("classBs", model.classB) <input type="submit" value = "save"/> }

Answer 3

将观点视为独立的。如果您的部分视图是完整视图，则会将其传递给IEnumerable<ClassB>

所以渲染：

 @Html.Partial("ClassBView", Model.ClassB)

此外，您不能将foreach与EditorFor一起使用，因为没有足够的信息来根据索引创建名称。请使用普通for循环。然后，表达式解析器可以将其转换为name="name[1]"等，因为索引在表达式中可用：

@model IEnumerable<Project.Models.ClassB>

@if(Model != null)
{
    for (int i = 0; i < Model.Count; i++)
    {
    <tr>
        <td>
            @Html.EditorFor(modelItem => Model[i].Name)
            <input type="button" value="Clear" />
            <input type="submit" value="Create" />
        </td>
    </tr>
    }
}

您的示例中缺少更多内容（例如Clear和Create连接的内容），因此如果您可以提供其余的控制器代码，我将展开此内容。

Answer 4

您可以使用（EditorTemplates）查看（ClassB）如下：

1-在（Views / Home）文件夹下创建名为（EditorTemplates）的文件夹（假设您的控制器名称为Home）：

2-在创建的（EditorTemplates）文件夹下，创建一个名为（ClassB）的视图

enter image description here

并为（ClassB）视图添加以下模板：

@model Project.Models.ClassB
@if(Model != null)
{

    <tr>
        <td>
            @Html.EditorFor(modelItem => Model.Name)
            <input type="button" value="Clear" />
            <input type="submit" value="Create" />
        </td>
    </tr>

}

和（ClassAView）应如下所示：

@model Project.Models.ClassA

<tr>
<td>
@Html.EditorFor(m => m.name)
</td>
<td>
@Html.EditorFor(m => m.classB);
</td>
</tr>

编辑器将自动遍历渲染每个对象视图的对象列表。

具有部分CRUD的MVC 5 BeginCollectionItem

4 个答案: