title: how to show a jQuery ui DialogBox in ASP.NET MVC
body: <p>I´m working on a MVC ASP.NET project and I would like to use a dialog box using jQuery ui every time a user clicks a specific button, was pretty easy for me in PHP but now in ASP.NEt I'm kinda stuck and cannot find the reason why, this is my code and the beginning of the page</p>
  
  <pre><code>@model GFC_Site.Models.UserModel.RegistroUser
  
  @{
      ViewBag.Title = "Registro";
  }
  
  @Styles.Render("~/Content/themes/base/css")
  @Scripts.Render("~/bundles/jqueryui")
  
  @*I added the jquery, jquery ui and its due css via this way too in case the bundle created by myself has errors*@
  
  &lt;script src="~/Scripts/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery-ui-1.12.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.validate.unobtrusive.min.js"&gt;&lt;/script&gt;
  &lt;link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" /&gt;
  &lt;link href="~/Content/themes/base/all.css" rel="stylesheet" /&gt;
  &lt;link href="~/Content/themes/base/dialog.css" rel="stylesheet" /&gt;
  &lt;link href="~/Content/themes/cupertino/jquery-ui.cupertino.min.css" rel="stylesheet" /&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function ()
      {
          $("#submit").click(function () {           
          $("#dialog-confirm").dialog({
              autoOpen: false,
              resizable: false,
              height: 170,
              width: 350,
              show: { effect: 'drop', direction: "up" },
              modal: true,
              draggable: true,
              open: function (event, ui) {
                  $(".ui-dialog-titlebar-close").hide();
  
              },
              buttons: {
                  "OK": function () {
                      $(this).dialog("close");
                      window.location.href = url;
                  },
                  "Cancel": function () {
                      $(this).dialog("close");
                  }
              }
          });
          });
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>and this is my form, it has more fields but I just show one, the button and the div I want to show </p>
  
  <pre><code> @using (Html.BeginForm("Registro", "Login", FormMethod.Post, new { @class = "form-horizontal", role = "form", id="nuevo" }))
              {
                  @Html.AntiForgeryToken()
  
      &lt;div&gt;
          &lt;hr /&gt;
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.NIT, new { @class = "sr-only control-label col-md-2" })
  
              &lt;div class="col-md-12"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;div class="input-group-addon"&gt;digite NIT Proveedor&lt;/div&gt;
                      @Html.TextBoxFor(model =&gt; model.NIT, new { @class = "form-control", @type = "text" })
                  &lt;/div&gt;
                  &lt;p class="text-danger"&gt; @Html.ValidationMessageFor(model =&gt; model.NIT)&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;button type="submit" id="submit" value="Registrarse" class="btn btn-primary" @*onclick="return confirm('Desea ingresar información de registro?')"*@ &gt;
                      Registrarse
                      &lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="dialog-confirm" style="display: none"&gt;
          &lt;p&gt;&lt;span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"&gt;&lt;/span&gt; Are you sure to delete? &lt;/p&gt;
      &lt;/div&gt;
              }
  </code></pre>