ASP.NET MVC does not fire jQuery Ajax POST

Question

I made similar solutions many times, so that's why I'm really surprised why this one is not working. When I click on link, this should submit data via jQuery Ajax to Controller. But instead browser just open link.

Here is Controller:

[HttpPost]
public async Task<JsonResult> Hide(int id)
{
    MailRepository mailRep = new MailRepository();
    var result = await mailRep.HideMail(id);
    if (result.Result == Enums.IsSuccess.Succes)
    {
        return Json(new { IsSuccess = true }, JsonRequestBehavior.AllowGet);
    }
    else
        return Json(new { IsSuccess = false, DataError = result.DataError }, JsonRequestBehavior.AllowGet);
}

And here is Razor view:

<a href="@Url.Action("Hide", "Mail", new {id = a.Id})" id="hide" title="hide e-mail" class="btn btn-warning"><i class="glyphicon glyphicon-eye-close"></i></a>

And jQuery:

$("#hide").on("click", function () {
    $.ajax({
        type: "POST",
        url: $(this).attr("href"),
        dataType: "json",
        data: {},
        success: function (data) {
            if (data.IsSuccess === true) {
                $("div.alert-success").removeClass("hidden");
                setTimeout(function () {
                    $("div.alert-success").addClass("hidden");
                }, 5000);
                window.location.reload();
            } else {
                $("#error").text(data.DataError);
                $("div.alert-warning").removeClass("hidden");
                setTimeout(function () {
                    $("div.alert-warning").addClass("hidden");
                }, 5000);
            }
        },
        error: function (request, status, error) {
            alert(request.responseText);
        }
    });
    return false;
});

Answer 1

You are searching by an element called #hide, You need ensure that this element already exist when your jquery event is fired.

If element doesn't exist, so your jquery Ajax wont work.

Answer 2

解决方案很愚蠢 - 选择器a#hide而不是#hide 。