Question

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

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

任何人都可以解释我做错了什么以及为什么？

部分cshtml：popup

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

非常感谢任何帮助。

Answer 1

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

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

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

Answer 2

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

如何使用jquery和mvc 5显示确认弹出窗口？

2 个答案: