单击视图上的操作链接，控制器检查条件，returns JSON、jQuery Ajax 不起作用

Question

单击视图上的 ActionLink，控制器检查条件，returns JSON、JQuery Ajax 不起作用。

点击"Delete" ActionLink，"Delete"控制器如果客户的"Orders" 属性为空，如果不为空，将弹出一条消息。如果为空，则处理到 "Delete" 视图。

代码如下：

1，在视图上，@Html和<script>一起在一个遍历所有客户的循环中。

@Html.ActionLink("Delete", "Delete", new { id = item.CustomerId }, htmlAttributes: new { @class = "mergo-actionlink", id = "customer-delete-ajax" })

<script type="text/javascript">
$('#customer-delete-ajax').click(
    function doSomething() {
        $.ajax({
            dataType: "json",
            url: '@Url.Action("Delete", "Controllers", new { id = item.CustomerId })',
            success: function (data) {
                alert(data.message);
            },
            async: false
        });
    }
);
</script>

2、"Delete"控制器

public ActionResult Delete(Guid? id)
{
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Customer customer = db.Customers.Find(id);
        if (customer == null)
        {
            return HttpNotFound();
        }

        if (customer.Orders.ToList().Count() != 0)
        {
            return Json(new { message = "This customer has order(s) attached." }, "text/plain", JsonRequestBehavior.AllowGet);
        }
        return View(customer);
}

Answer 1

你的问题很难理解，但至于"Ajax doesn't work":

您声明 "the @Html and <script> are together in a loop which goes through all the customers"。这将是第一个错误，因为这会创建大量使用相同 ID 的元素，而 ID 必须是唯一的。尝试使用 class 名称作为触发器（下面的示例）。
JavaScript 不应该是该循环的一部分。无需循环此脚本 - 如果有的话，它会造成破坏。将其移出循环，并尝试使用 class 作为触发器，而不是像上面提到的那样（下面的示例）。
您的 ActionLink 和 click 事件将同时调用相同的操作，使用相同的参数。我不确定我是否理解您对此的期望，但我假设 ActionLink 根本不应该调用 Action。

要解决上述问题，请按照以下步骤操作并尝试使用以下代码：

// loop begins
@Html.ActionLink("Delete", "Delete", new { id = item.CustomerId }, htmlAttributes: new { @class = "mergo-actionlink", data_value = item.CustomerId })
// loop ends

<script type="text/javascript">
$('.mergo-actionlink').click(function() {
    var clickedId = $(this).attr('data-value');
    $.ajax({
        dataType: "json",
        url: '@Url.Action("Delete", "Controllers")',
        data: { id: clickedId },
        success: function (data) {
            alert(data.message);
        },
        async: false
    });
    return false;
}); 
</script>

然后在您的控制器中，注释掉 return View(customer);。实际上，Action 应该 return 的唯一东西是 json，因为那是你的 Ajax 唯一会接受的东西。您可以将 return 类型更改为 JsonResult 以明确显示。

单击视图上的操作链接，控制器检查条件，returns JSON、jQuery Ajax 不起作用

Click actionlink on view, controller checks condition, returns JSON, jQuery Ajax doesn't work

ajax

json

controller

actionlink

asp.net-mvc-5