c# - JavaScriptを使用してWebGrid行を削除しますか?

Question

私はwebgridmvc3にいます。列があります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を使用して 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>

Answer 3

次のように、jQueryクリックハンドラーを要素にアタッチしてみてください。

HTML：

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

Javascript：

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