asp.net-mvc - 如何在网格视图中使用输入？

Question

我将使用网格视图。它每行包含一个复选框。

它用于删除行。例如，当用户检查一些支票簿并单击删除按钮时，检查的行必须删除。

现在如何在我的操作中提供已检查的行 ID？

你有什么想法 ？

谢谢。

Answer 1

好的。我们假设您要检索产品列表并在原始 html 网格中显示它们。

首先，像这样安排你的视图：

@model IEnumerable<MyPrj.Product>
// ... Other codes ...
<table id="tblGrid">
    <tr>
        <th>Delete</th>
        <th>ProductName</th>
        // ... Other Properties ...
    </tr>
    @foreach(var item in Model)
    {
        <tr id="tr@(item.ProductID)">
            <td>
                @Html.Raw("<input type='checkbox' id='chk@(item.ProductID)' onclick='chkChange(@chkID)' />");        
            </td>
            <td>@item.ProductName</td>
            // ... Other Properties ...
        </tr>
    }
</table>

<input type="button" id="btnDelete" value="Delete Selected Rows" onclick="performDelete()"/>

现在，您有了自己的视图，它将使用提供的模型为您渲染网格。然后，您需要添加一些 javascript 和 jquery 代码来为您执行行删除。

处理复选框点击的函数：

<script>
    function chkChange(id) {
        if ($(id).val() != 'false')
            $(id).val('false');
        else
            $(id).val('true');
    }

    // ...
</script>

最后，一个处理删除按钮点击的函数：

function performDelete() {
    var rows = $("input:checked");
    rows.each(function () {
        $(this).parent().parent().remove();
    });
}

而已！- 你完成了。完整的<script>博客如下：

<script>
    function chkChange(id) {
        if ($(id).val() != 'false')
            $(id).val('false');
        else
            $(id).val('true');
    }

    function performDelete() {
        var rows = $("input:checked");
        rows.each(function () {
            $(this).parent().parent().remove();
        });
    }
</script>

Answer 2

您可以将网格及其复选框放置在 HTML 表单中，并将“删除”按钮设置为该表单的提交按钮。然后当点击按钮时，表单将被提交，选中复选框的值将被发送到控制器动作，以便您可以删除相应的记录。