c# - 如何使用操作链接在进入 Controller 操作之前获得确认弹出窗口？

Question

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

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

此链接工作正常，只是在调用 Controller 方法之前应该出现一条 JQuery 弹出消息来确认操作。然而，操作链接绕过弹出窗口并直接调用 Controller 。

@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 View :

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