在我的 table 调用中无法将正确的 table 行获取到我的 ajax 数据属性

Question

我有这个代码。我的问题是删除 table 上的右行。正如您在 html 上看到的那样，每个 table 行都有一个删除按钮。我如何在 ajax 调用数据属性中根据我选择按下的删除按钮获得正确的 table 行。现在我已经在数据属性中尝试过这个 ("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

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

$(".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 辅助方法为您的删除操作方法生成正确的 url，而不是在 javascript 代码中进行硬编码。

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

现在，当用户点击时，只需获取数据-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"});
}

在我的 table 调用中无法将正确的 table 行获取到我的 ajax 数据属性

Cant get the right tablerow in my table, to my data propertie in my ajax call

html

c#

asp.net-mvc

jquery

asp.net-ajax