私のajaxの呼び出しで私のデータの特性に私のテーブルの右のtablerowを得ること

Question

私はこのコードを持っています。私の問題は、私のテーブル上の右の行を削除することです。 htmlの各行には、削除ボタンがあります。私はどのように私のajax呼び出しでデータのプロパティは、削除ボタンを押すことを選択ベースに適切なテーブルの行を取得することができます。今私はこれをデータのプロパティで試してみた （ "id =" + $（this）.attr（ "Id"）） しかし、それは仕事量です。誰かがより良いIDEを持っていますか？

//My Html 
    @foreach (var discount in Model.DiscountList) 
{ 
    <tr> 
     <td>@Html.TextBox("codeTextBox", discount.Code) </td> 
     <td><input type="checkbox" name="freeShippingCheckBox" id="freeShippingCheckBox" checked="@discount.FreeShipping" /> </td> 
     <td><input type="checkbox" id="activeCheckBox" name="activeCheckBox" checked="@discount.Active" /></td> 
     <td><input type="datetime" value="@discount.CreatedDate" readonly /></td> 
     <td> 
      <input type="button" value="Delete" class="fa fa-remove" /> 
     </td> 
     <input id="@discount.Id.ToString()" type="hidden" value="@discount.Id" /> 
    </tr> 
} 

//my jquery/ajax 
@section scripts{ 
<script type="text/javascript"> 
    $(document).ready(function() { 

$(".fa-remove").on("click", function() { 
      if (confirm("Are you sure you want to delete this discount code?")) { 
       $.ajax({ 
        url: '@Url.Action("DeleteDiscountCode","Discount")', 
        type: "POST", 
        data: "id=" + $(this).attr("Id"), 
        success: function (data) { 
         if (data) { 
          alert("Deleted"); 
         } 

         location.reload(); 
        } 
       }); 
      } 
     }); 

    }); 
</script> 
} 

//my controller 

namespace Web.Controllers 
{ 
    public class DiscountController : BaseController 
    { 

     [HttpPost] 
     public void DeleteUser(string id) 
     { 

     } 
} 
} 

Answer 1

あなたが削除ボタンが

$(".fa-remove").on("click", function (e) { 
    e.preventDefault(); 
    var currentRow = $(this).closest("tr"); 

    //do your ajax call now 
}); 

currentRowであるテーブルの行を取得するためのjQuery closest()メソッドを使用することができますjQueryのラップされたオブジェクトです。したがって、必要なjQueryメソッドを呼び出すことができます。例えば、あなたはおそらく、あなたはまた、あなたの削除アクションメソッドに正しいURLを生成する代わりに、JavaScriptコードにすることをハードコーディングするUrl.Actionヘルパーメソッドを使用するかもしれないあなたのAJAX呼び出しの成功イベント

success: function (data) { 
        if (data) { 
         alert("Deleted"); 
         currentRow.remove(); 
        } 

でTRを削除したいです。

<input type="button" 
     data-url="@Url.Action("DeleteDiscountCode","Discount",new { id= discount.Id})" 
     value="Delete" class="fa fa-remove" /> 

ユーザーがクリックすると、単にdata-url値を取得し、それをajax呼び出しに使用します。

だから、完全なコードはねえ、この作品はあなたに感謝あなたのDeleteDiscountCodeにid

[HttpPost] 
public ActionResult DeleteDiscountCode(int id) 
{ 
    return Json(new { status="success"}); 
}