asp.net-mvc - 按 ID 删除 MVC 5

Question

我将 BeginCollectionItem 与 MVC 5 结合使用，以便随时添加和删除行。

我遇到的一个问题是删除功能，我遵循了在线教程 其中使用 #divId:first 指定，这似乎表明每当删除第一行。这对我来说没有好处，对最终用户来说也没有意义。

由于我正在使用 BCI，我想从 html DOM 中删除它们，这样它们就没有数据库 ID。

如何通过模型的 ID 进行删除，这显然(我想我在某处读过)是由 BCI 自动生成的？

删除主视图中的功能

$('#deleterow').live('click', function () {
            $(this).parents('#newRow:first').remove();
            return false;
        });

包含我要按 ID 删除的行的部分 View

@model  Mvc.Models.Project
@using (Html.BeginCollectionItem("something"))
{
    <div id="newRow">
        @Html.LabelFor(m => m.Name)
        @Html.EditorFor(m => m.Name)

        <a href="#" id="deleterow">Delete</a>
    </div>
}

更新2

当查看呈现的 html 时，所有对象的 data-action 属性呈现为 0，因此 JQuery 不能也不会从 View 中删除行/对象。

更新

我想使用删除链接按钮而不是复选框，我认为这是可能的？对 jQuery 不太熟悉，但这是我打算研究的东西，对 MVC 来说也是相当新的，但这就是我到目前为止所拥有的:

主视图

<h3>Students</h3>
<div id="newStudent">
    @foreach(var Student in Model.students)
    {
        Html.RenderPartial("_Student");
    }
</div>
<input type="button" id="addStudent" name="addStudent" value="Add Student"/>

<input type="submit" value="Submit"/>
@section Scripts
{
    <script type="text/javascript">
        $('#addStudent').on('click', function () {
        $.ajax({
            async: false,
            url: 'School/AddNewStudent'
        }).success(function (partialView) {
            $('#newStudent').append(partialView);
        });
    });

    $('#newStudent').on('click', '.deleteStudent', function () {
        var id = $(this).data('id');
        if (id === 0) { // assumes Id is integer
            $(this).closest('.studentRow').remove();
        }
        else { // existing item - controller to delete from Db
            var url = '@Url.Action("action", "controller")';
            $.post(url, { ID: id }, function (response) {
                if (response) {
                    $(this).closest('.studentRow').remove();
                }
            }).fail(function (response) {
                // display error message
            });
        }
    });
    </script>
}

部分 View

@using (Html.BeginCollectionItem("students"))
{
    <div id="studentRow">
        @Html.HiddenFor(m => m.Id)
        @Html.LabelFor(m => m.Name)
        @Html.EditorFor(m => m.Name)

        <a href="#" class="deleteStudent" data-action="@Model.Id">Delete</a>
    </div>

}

Controller

public class SchoolController : Controller
{
    // GET: School
    public ActionResult Index()
    {
        var newSchool = new School();

        return View(newSchool);
    }

    public ActionResult AddNewStudent()
    {
        var student = new Student();
        return PartialView("_Student", student);
    }
    [HttpPost, ActionName("DeleteStudent")]
    public ActionResult DeleteStudent(School school)
    {
        foreach(var student in school.students.Where(s => !s.isDeleted))
        {
            return View(school.students);
        }

        return View();
    }
}

Answer 1

我所做的是创建了一个 IsDeleted特性Model/ViewModel ，将其作为隐藏字段放在行中，并且每个 Row 都有一个删除按钮

 using (Html.BeginCollectionItem("Contacts"))
    {
        <div class="row mt-10">
            @Html.HiddenFor(m => m.Id)
            @Html.HiddenFor(m => m.isDeleted, new { data_is_deleted = "false" })

.......Removed HTML

        <div class="col-md-1">
            <span class="glyphicon glyphicon-trash" data-action="removeItem" title="remove" style="cursor:pointer"></span>
        </div>

然后将此 jQuery 添加到 JavaScript 文件中。 (注意:不要将其添加到行部分 View 中，我将其添加到调用行部分 View 的 View 中)

您可能需要编辑此 jQuery 以匹配您的 HTML 结构，此 jQuery 的目标是将 IsDeleted 字段更新为 true 或 false，然后禁用其他输入字段

$(document).on('click', '*[data-action="removeItem"]', function(e){
    e.stopPropagation();
    var btn = $(this);
    var row = btn.closest('.row');
    var parent = btn.parent();
    var checkBox = parent.siblings('*[data-is-deleted]');

    var checkBoxVal = checkBox.val();
    if(checkBoxVal == 'False' || checkBox.val() == 'false'){
        checkBox.val('true');
        row.find('input, textarea, select').attr('readonly', 'readonly');
    } else {
        checkBox.val('false');
        row.find('input, textarea, select').attr("readonly", false);
    }
    checkBoxVal = checkBox.val();
});

这就是您的 View :

当发回 Controller 时:

foreach (var contact in contacts.Where(s => !s.isDeleted))
{
   // New and Updated Items
}

foreach (var contact in myModel.Where(s => s.isDeleted && s.Id!= 0))
 {              
    // Deleted Items
// You don't have to delete Items where Id == 0, Bcz they are not in the DB.
// Just some Item added to the View and then deleted without Save
  }

删除的项目将被禁用:注意:您可以通过编辑上面的 jQuery 来隐藏它们

编辑A: 实际的 Controller 代码是这样的:

[HttpPost]
public ActionResult SaveStudent(Student model){


// Save model items

// Then Save the List of Items like this:

    foreach (var contact in model.myListItems.Where(s => !s.isDeleted))
    {
       // New and Updated Items
    }

    foreach (var contact in model.myListItems.Where(s => s.isDeleted && s.Id!= 0))
     {              
        // Deleted Items
    // You don't have to delete Items where Id == 0, Bcz they are not in the DB.
    // Just some Item added to the View and then deleted without Save
      }


}