如何獲得使用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顯示的確認彈出窗口？

回答

相關問題