title: how to get a confirmation popup to display using jquery and mvc 5?
body: <p>I am trying to render a jquery popup onto a razor view. I have created a link in my view but when I click it I get a 404 error saying the page can't be found.</p>
  
  <p>I have used jsbin.com so I know the jquery code is correct but clearly I am missing something, I guess I am either incorrectly rendering the javascript or I am trying to put the popup in a wrong file. </p>
  
  <p>Can anyone explain what I have done wrong and why?</p>
  
  <p>partial cshtml: popup</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;jQuery UI Dialog - Modal confirmation&lt;/title&gt;
      &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"&gt;
      &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
      &lt;script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(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" );
            }
          }
        });
        });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a id="Link"&gt;
          click me
      &lt;/a&gt;
      &lt;div id="dialog-confirm" title="Empty the recycle bin?"&gt;
          Are you sure you want to change the status of: @ViewBag.UserName
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My Razor view requring the popup</p>
  
  <pre><code>@{
      ViewBag.Title = "User Details";
  }
  
  &lt;h2&gt;User Details&lt;/h2&gt;
  
  &lt;p&gt;&lt;b&gt;@ViewBag.UserName&lt;/b&gt;&lt;/p&gt;
  
      &lt;table class="table"&gt;
           &lt;tr&gt;
               &lt;th&gt;
                   Application Name
               &lt;/th&gt;
              &lt;th&gt;
                 Status
              &lt;/th&gt;
               &lt;th&gt;
  
               &lt;/th&gt;
  
          &lt;/tr&gt;
  
              @if (ViewBag.ApplicationStatuses.Count &gt; 0)
              {
                  @*Iterating Amadeus model using ViewBag *@
                  foreach (var item in ViewBag.ApplicationStatuses)
                  {
                  &lt;tr&gt;
                      &lt;td&gt;
                          @item.Key
                      &lt;/td&gt;
                      &lt;td&gt;
                          @item.Value
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;a href="~/Views/Home/ChangeStatusConfirmation" id="enableDisable"&gt;
                              Change Status
                          &lt;/a&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.ActionLink("View Permissions", "Permissions", new { userID = View  Bag.UserName, applicationName = item.Key })
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  }
              } 
  
  &lt;/table&gt;
  </code></pre>
  
  <p>finally my layout view:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;@ViewBag.Title - Business Security System&lt;/title&gt;
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"&gt;
      &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  @*@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("MyTeam", "MyTeam", "Home")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt;
  
                  &lt;/ul&gt;
                  @*@Html.Partial("_LoginPartial")*@
                  &lt;p style="color:grey; text-align:right; margin-top:15px"&gt;@System.Security.Principal.WindowsIdentity.GetCurrent().Name&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container body-content"&gt;
          @RenderBody()
          &lt;hr /&gt;
          @*&lt;footer&gt;
              &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET Application&lt;/p&gt;
           &lt;/footer&gt;*@
      &lt;/div&gt;
  
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any assistance will be greatly appreciated.</p>