如何在进入控制器操作之前使用操作链接来获得确认弹出窗口

我有一个操作链接，它调用一个控制器方法并传递一些数据来启用或禁用数据库系统中的用户。

@Html.ActionLink("Change Status", "ChangeStatus", "Home", new { userName = ViewBag.userName, applicationName = item.Key, currentStatus = item.Value }, new { @class = "enableDisable" })

这个链接工作正常，除了在调用控制器方法之前应该会出现一条JQuery弹出消息来确认操作。但是，操作链接绕过弹出窗口，直接调用控制器。

@section Scripts {
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script type="text/javascript">
        $("#dialog-confirm").hide();
        $(function () {
            $(".enableDisable").click(function () {
                $("#dialog-confirm").dialog({
                    resizable: false,
                    height: 220,
                    width: 475,
                    modal: true,
                    buttons: {
                        "OK": function () {
                            $(this).dialog("close");
                            window.location.href = "~/Home/ChangeStatus/userName/applicationName/currentStatus/"
                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });
        });
    </script>
}

有人知道我的代码中缺少什么吗？

编辑

JQuery现在位于一个js文件中，由以下代码调用：

@section Scripts {
    <link href="~/Content/jquery-ui-1.11.1.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui-1.11.1.js"></script>
    <script src="~/Scripts/Dialog.js"></script>
}

JQuery本身现在看起来是这样的：

$("#dialog-confirm").hide();
$(function () {
    $(".enableDisable").click(function (e) {
        e.preventDefault()
        var url = $(this).attr('href');
        $("#dialog-confirm").dialog({
            resizable: false,
            height: 220,
            width: 475,
            modal: true,
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                    window.location.href = url;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
});

Razor视图：

@{
    ViewBag.Title = "User Details";
}
<h2>User Details</h2>
<p><b>@ViewBag.UserName</b></p>
    <table class="table">
         <tr>
             <th>
                 Application Name
             </th>
            <th>
               Status
            </th>
             <th>
             </th>
             <th>
             </th>
        </tr>
            @if (ViewBag.ApplicationStatuses.Count > 0)
            {
                @*Iterating Amadeus model using ViewBag *@
                foreach (var item in ViewBag.ApplicationStatuses)
                {
                <tr>
                    <td>
                        @item.Key
                    </td>
                    <td>
                        @item.Value
                    </td>
                    <td>
                       @Html.ActionLink("Change Status", "ChangeStatus", "User", new { userName = ViewBag.userName, applicationName = item.Key }, new { @class = "enableDisable" })
                    </td>
                    <td>
                        @Html.ActionLink("View Roles", "Roles", new { userName = ViewBag.UserName, applicationName = item.Key })
                    </td>
                </tr>
                }
            } 
</table>
<div id="dialog-confirm" title="Change Status?">
    Are you sure you want to change the status of: @ViewBag.UserName?
</div>
@section Scripts {
    <link href="~/Content/jquery-ui-1.11.1.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui-1.11.1.js"></script>
    <script src="~/Scripts/Dialog.js"></script>
}