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

Question

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

@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");
                }
            }
        });
    });
});

剃刀视图：

@{
    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>
}

Answer 1

尝试使用e.preventDefault() 并进行一些更改，如下所示：-

<script type="text/javascript">

    //$("#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");
                    }
                }
            });
          $("#dialog-confirm").dialog("open"); // <------- open dialog this way.
        });
    });
</script>