如何使用jquery和mvc 5来获得要显示的确认弹出窗口

本文关键字：显示 确认 窗口 jquery 何使用 mvc | 更新日期: 2023-09-27 18:20:35

我正在尝试将jquery弹出窗口呈现到剃刀视图上。我已经在我的视图中创建了一个链接，但当我点击它时，我会收到一个404错误，说找不到页面。

我使用过jsbin.com，所以我知道jquery代码是正确的，但很明显我遗漏了一些东西，我想我要么错误地呈现了javascript，要么我试图将弹出窗口放在错误的文件中。

有人能解释我做错了什么以及为什么吗？

部分cshtml:弹出

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Modal confirmation</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script>
        $(function() {
        $("#enableDisable").click(function () {
         $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:220,
        width:475,
        modal: true,
        buttons: {
          "OK": function() {
            $( this ).dialog( "close" );
          },
            Cancel: function() {
            $( this ).dialog( "close" );
          }
        }
      });
      });
    });
    </script>
</head>
<body>
    <a id="Link">
        click me
    </a>
    <div id="dialog-confirm" title="Empty the recycle bin?">
        Are you sure you want to change the status of: @ViewBag.UserName
    </div>
</body>
</html>

我的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>
        </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>
                        <a href="~/Views/Home/ChangeStatusConfirmation" id="enableDisable">
                            Change Status
                        </a>
                    </td>
                    <td>
                        @Html.ActionLink("View Permissions", "Permissions", new { userID = View  Bag.UserName, applicationName = item.Key })
                    </td>
                </tr>
                }
            } 
</table>

最后我的布局视图：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Business Security System</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @*@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("MyTeam", "MyTeam", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @*@Html.Partial("_LoginPartial")*@
                <p style="color:grey; text-align:right; margin-top:15px">@System.Security.Principal.WindowsIdentity.GetCurrent().Name</p>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        @*<footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
         </footer>*@
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

如有任何协助，我们将不胜感激。

如何使用jquery和mvc 5来获得要显示的确认弹出窗口

我最终在视图中使用了一个操作链接，而不是以前使用的操作选项卡，如图所示：

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

我没有把Jquery代码放在一个单独的文件中，而是把我需要的代码放在视图文件中，然后从那里运行它。

<div id="dialog-confirm" title="Change Status?">
    Are you sure you want to change the status of: @ViewBag.UserName
</div>
@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/dbname/currentstatus/"
                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });
        });
    </script>
}

这不是最优雅的解决方案，但它在我使用的解决方案中运行良好。

href="~/Views/Home/ChangeStatusConfirmation"似乎不对。它应该是~/ControllerName/ActionName。此外，如果您正在处理单击事件，则不应使用href属性。

相关文章：