使用javascript删除webgrid行？答案

【问题标题】：Delete webgrid row using javascript?使用javascript删除webgrid行？
【发布时间】：2013-03-05 15:30:13
【问题描述】：

我在 mvc3 中有一个 webgrid。它有delete 列。单击它后，我想运行一个 Javascript 函数，通过将行 ID 作为参数传递给 Javascript 函数，将用户重定向到控制器的操作。

我该怎么做？该列不是Htmlactionlink。

【问题讨论】：

看起来问题 [stackoverflow.com/questions/31650659/… 与上述问题有关。 [1]：stackoverflow.com/questions/31650659/…

标签： c# javascript asp.net-mvc asp.net-mvc-3 webgrid

【解决方案1】：

假设这是您拥有行的方式：-

<tr id="thisRowId">
  .
  .
  .
 <td>
    <a id="deleteBtn" data-rowId="thisRowId">delete</a>
 </td>
<tr>

为您的删除点击提供通用功能

$('#deleteBtn').click(function(){

var id =   $(this).data('rowId'); // or use $(this).closest('tr').attr('id');

$.ajax({
url: "controller/action",
type: 'Delete', // assuming your action is marked with HttpDelete Attribute or do not need this option if action is marked with HttpGet attribute
data: {'id' : "'" + id  "'"} // pass in id here
success : yoursuccessfunction
});

};

【讨论】：

【解决方案2】：

正如 here 所记录的，这是一个在 AJAX 请求之后从 WebGrid 中删除表行的示例。 WebGrid 无法轻松识别表中的特定项目。问题是如何识别要删除的行。在示例中，MvcHtmlString 用于将 span 标签注入列中。它包含一个 id 值，该值随后用于标识要从表中删除的行。

<div id="ssGrid">
    @{
        var grid = new WebGrid(canPage: false, canSort: false);
        grid.Bind(
            source: Model,
            columnNames: new[] { "Location", "Number" }
        );
    }
    @grid.GetHtml(
        tableStyle: "webGrid",
        headerStyle: "header",
        alternatingRowStyle: "alt",
        columns: grid.Columns(
            grid.Column("Location", "Location"),
            grid.Column("Number", "Number"),
            grid.Column(
                format: (item) => 
                    new MvcHtmlString(string.Format("<span id='ssGrid{0}'>{1}</span>",
                                          item.SecondarySystemId,
                                          @Ajax.RouteLink("Delete",
                                              "Detail", // route name
                                              new { action = "DeleteSecondarySystem", actionId = item.SecondarySystemId },
                                              new AjaxOptions { 
                                                  OnComplete = "removeRow('ssGrid" + item.SecondarySystemId + "')"
                                              }
                                          )
                                     )
                    )
            )
        )
    )
</div>

<script>
    function removeRow(rowId) {
        $("#" + rowId).closest("tr").remove();
    }
</script>

【讨论】：

【解决方案3】：

您可以尝试将 jQuery 单击处理程序附加到元素，如下所示：

HTML：

<tr>
  <td>
    <a id="your id">delete</a>
  </td>
<tr>

Javascript：

$("tr a").click(function() {
  //your code
});

【讨论】：