Je n'ai pas le bon tablerow dans ma table, à ma propriété de données dans mon appel ajax

Question

J'ai ce code. Mon problème est de supprimer la bonne rangée sur ma table. Comme vous pouvez le voir sur le html chaque rangée de table a un bouton de suppression. Comment puis-je dans mon appel ajax dans la propriété de données obtenir la bonne rangée de table sur la base de quel bouton de suppression je choisis d'appuyer sur. maintenant j'ai essayé ceci dans la propriété de données ("id =" + $ (ceci) .attr ("Id")) Mais cela dosent le travail. Est-ce que quelqu'un a une meilleure idée?

//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

Vous pouvez utiliser la méthode jQuery closest() pour obtenir la ligne de table dans laquelle votre bouton de suppression est

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

    //do your ajax call now 
}); 

currentRow est un objet jQuery enveloppé. Vous pouvez donc appeler les méthodes jQuery appropriées requises. Par exemple, vous voulez probablement supprimer le tr dans votre événement de succès de l'appel ajax

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

Vous pouvez également utiliser la méthode d'aide Url.Action pour générer l'URL correcte à votre méthode d'action de suppression au lieu de coder en dur que dans le code javascript. Maintenant, lorsque l'utilisateur clique, il suffit d'obtenir la valeur de l'URL de données et de l'utiliser pour l'appel ajax.

donc le code complet sera

$(".fa-remove").on("click", function (e) { 

    e.preventDefault(); 
    var currentRow = $(this).closest("tr"); 

    if (confirm("Are you sure you want to delete this discount code?")) { 
    $.post($(this).data("url"),function(data){ 
         if (data.status==="success") { 
          alert("Deleted"); 
          currentRow.remove(); 
         } 
         else 
         { 
          alert("expected truthy! but got something else"); 
         } 

    }); 
    }   
}); 

En supposant que votre DeleteDiscountCode accepte un id

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