如何获得使用jQuery和mvc 5显示的确认弹出窗口？

我想呈现一个jQuery的弹出到剃刀视图。我在我的视图中创建了一个链接，但是当我点击它时，出现404错误，表示无法找到页面。如何获得使用jQuery和mvc 5显示的确认弹出窗口？

我已经使用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视图requring弹出

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

任何援助将不胜感激。

来源

2014-09-04 SlipperyBalmain

我结束了在我看来，使用代替我用动作片的动作链接之前，如下所示：

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

这还不是最完美的解决方案，但它运作良好，在我的工作方案。

来源

2014-09-05 12:42:01 SlipperyBalmain

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

来源

2014-09-04 14:08:14

改变的href没有什么区别，但使用oncick处理器听起来像我需要什么，你会如何尽管如此？我刚刚得到一个未处理的运行时错误。 – SlipperyBalmain 2014-09-04 14:18:41

如何获得使用jQuery和mvc 5显示的确认弹出窗口？

回答

相关问题