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

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

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>

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

1 个答案: