Asp.net mvc 选中复选框时删除表中的行

我有一个包含数据的表。在每一行中都有一个复选框和一个复选框，用于在标题处选中所有复选框。

---

选中此复选框后，将从数据库表中删除相应的行。此外，选中标题处的复选框后，将从数据库表中删除所有行。如何实现此asp.net mvc。

我将使用AJAX。在更改选中状态时，我将提交一个请求，删除所有选定的ID并刷新表数据。

使用

jQuery

、其他javascript库，或者在选中复选框时手动编写AJAX请求。然后在成功时更改

DOM

使用jQuery可以执行以下操作：

<table>
    <tr>
        <td><input type="checkbox" class="check" id="1" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check" id="2" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check" id="3" /></td>
    </tr>
</table>


$('.check').click(function() {
    var tableRow = $(this).parent().parent();
    var id = $(this).attr('id');
    $.ajax({ 
        url: 'http://www.YOURDOMAIN.com/Controller/Action/' + id,
        success: function(data) {
            $(tableRow).remove();
        }
    });
)};

$（'.check'）。单击（函数（）{
var tableRow=$（this.parent（）.parent（）；
var id=$（this.attr（'id'）；
$.ajax（{
网址：'http://www.YOURDOMAIN.com/Controller/Action/“+id，
成功：功能（数据）{
$（tableRow）.remove（）；
}
});
)};

---

这是一个非常基本的实现，您可以在删除行时使用一些动画来修饰它。您还需要通过一些错误处理来传递数据和返回数据。请在此处查看。

始终从模型开始：

public class ProductViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

然后控制器：

public class HomeController : Controller
{
    // TODO: Fetch this from a repository
    private static List<ProductViewModel> _products = new List<ProductViewModel>
    {
        new ProductViewModel { Id = 1, Name = "Product 1" },
        new ProductViewModel { Id = 2, Name = "Product 2" },
        new ProductViewModel { Id = 3, Name = "Product 3" },
        new ProductViewModel { Id = 4, Name = "Product 4" },
        new ProductViewModel { Id = 5, Name = "Product 5" },
    };

    public ActionResult Index()
    {
        return View(_products);
    }

    [HttpPost]
    public ActionResult Delete(IEnumerable<int> productIdsToDelete)
    {
        // TODO: Perform the delete from a repository
        _products.RemoveAll(p => productIdsToDelete.Contains(p.Id));
        return RedirectToAction("index");
    }
}

以及产品编辑器模板（

~/Views/Home/EditorTemplates/ProductViewModel.ascx

）：

表示如果选中复选框，将进行ajax调用并引用表，然后再次选中其他复选框，同样的情况也会发生。这是asp.net mvc。我应该如何将信息传递给控制器，选择了哪些复选框。可能是ID，我将发布编辑选项。查看复选框上的新URL和ID。不过，我会研究一个JSON web服务，它更轻、更容易实现。另外，它与MVC配合使用非常好，因为有一个

JSONRESULT

操作类型。我不明白复选框的值是如何确定的，请解释一下好吗？我是MVC的新手，正在努力解决这个问题。谢谢

<% using (Html.BeginForm("delete", "home", FormMethod.Post)) { %>

    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Select</th>
            </tr>
        </thead>
        <tbody>
            <%= Html.EditorForModel()%>
        </tbody>
    </table>

    <input type="submit" value="Delete selected products" />

<% } %>

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ToDD.Controllers.ProductViewModel>" %>
<tr>
    <td>
        <%: Model.Name %>
    </td>
    <td>
        <input type="checkbox" name="productIdsToDelete" value="<%: Model.Id %>" />
    </td>
</tr>