使用javascript刪除webgrid行？

Question

我在mvc3中有一個webgrid。它有列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

你可以嘗試jQuery的click處理程序附加到元素，像這樣：

HTML：

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

的Javascript：

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

Answer 3

如記錄here，這是從給WebGrid以下的AJAX請求錶行的一個例子。 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>