c# - 使用javascript删除webgrid行？

Question

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

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

Answer 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
});

};

Answer 2

如此处WebGrid所述，这是从AJAX 请求中删除表行的示例。WebGrid不容易识别表中的特定项目。问题是如何识别要删除的行。在示例中，MvcHtmlString用于将跨度标记注入列中。它包含一个 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>

Answer 3

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

HTML：

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

Javascript：

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