不能得到正确的表在我的表，我的数据属性在我的ajax调用

本文关键字：我的 数据属性 ajax 调用 不能 | 更新日期: 2023-09-27 18:05:06

我有这个代码。我的问题是删除表上的右行。正如您可以在html上看到的，每个表行都有一个删除按钮。我怎么能在我的ajax调用的数据属性得到正确的表行基于删除按钮我选择按。现在我已经在数据属性中尝试了这一点("id=" + $(this).attr(" id "))但它不起作用。有人有更好的主意吗?

//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)
        {
        }
}
}

不能得到正确的表在我的表，我的数据属性在我的ajax调用

您可以使用jQuery closest()方法来获取删除按钮所在的表行

$(".fa-remove").on("click", function (e) {
   e.preventDefault();
   var currentRow = $(this).closest("tr");
   //do your ajax call now
});

currentRow是一个jQuery包装对象。因此，您可以调用所需的相关jQuery方法。例如，您可能想要删除ajax调用的成功事件

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

你也可以使用Url.Action helper方法来生成正确的url到你的delete action方法，而不是在javascript代码中硬编码。

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

现在，当用户单击时，只需获取data-url值并将其用于ajax调用。

所以完整的代码是

$(".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");
                        }
    });
  }        
});

假设您的DeleteDiscountCode接受id

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