MVC 5 BeginCollectionItem с частичным CRUD

Ответ 1

Для достижения этой цели вам не нужно использовать BeginCollectionItem. Из-за того, что я должен сам изучить это и попытаться использовать его для аналогичной проблемы, похоже, он был создан для таких проблем с более ранними версиями MVC.

Используйте частичные представления для отображения и обновления списка. Один частичный просмотр для отображения и итерации по списку объектов, а другой для создания нового объекта, который после отправки назад для обновления списка покажет вновь созданный объект в частичном представлении со списком.

У меня был аналогичный вопрос, который должен решить вашу проблему, нажмите здесь

Надеюсь, что это поможет.

Обновление Причина, по которой ваше удаление не работает, заключается в том, что вы не можете вызывать JS из Partial View, поместить его в основное представление (@section Script). Кроме того, я думаю, что вы немного запутались в своем ключевом слове и ключевом слове в своих div, посмотрите ниже.

Итак, вы должны иметь:

Частичный вид

@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>

Ответ 2

Рассматривайте представления как независимые. Если ваш частичный вид был полным, вы передали бы ему IEnumerable<ClassB>

чтобы сделать с помощью

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

Кроме того, вы не можете использовать foreach с EditorFor, поскольку для создания имени на основе индекса недостаточно информации. Вместо этого используйте обычный цикл. Затем анализатор выражений может преобразовать его в 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), поэтому, если вы можете предоставить остальную часть кода контроллера, я расширю его.

Ответ 3

Допустим, что ClassA - ваш ViewModel:

Вам нужен только один частичный просмотр или просмотр для обновления обоих:

например. 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"/>

}

Примечание. В частичном представлении вы используете цикл foreach, MVC Model Binder Требуется, чтобы поля ввода были в формате:

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

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

Итак, для этого мы используем для цикла

Затем в контроллере:

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

И Edit.cshtml будет:

    @model ClassA

    @Html.BeginForm(){

    @Html.TextBoxFor(m => m.name)

@Html.Partial("classBs", model.classB)

    <input type="submit"  value = "save"/>

    }

Ответ 4

Вы можете использовать (EditorTemplates) для просмотра (ClassB) следующим образом:

1- Создайте папку с именем (EditorTemplates) в папке (Views/Home) (Предположим, что имя вашего контроллера - это Home):

2- В созданной папке (EditorTemplates) создайте представление с именем (ClassB)

и добавьте следующий шаблон для представления (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>

Редактор автоматически перебирает список объектов, отображающих представление для каждого из них.