如何在ASP.NET MVC中顯示jQuery ui DialogBox

Question

我正在開發一個MVC ASP.NET項目，並且我想每次用戶單擊某個特定按鈕時都使用jQuery ui對話框，這很容易我在PHP，但現在在ASP.NEt我有點卡住，無法找到原因，這是我的代碼和頁面

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

<script src="~/Scripts/jquery-3.1.1.min.js"></script> 
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script> 
<script src="~/Scripts/jquery.validate.min.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> 
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" /> 
<link href="~/Content/themes/base/all.css" rel="stylesheet" /> 
<link href="~/Content/themes/base/dialog.css" rel="stylesheet" /> 
<link href="~/Content/themes/cupertino/jquery-ui.cupertino.min.css" rel="stylesheet" /> 

<script type="text/javascript"> 

    $(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"); 
       } 
      } 
     }); 
     }); 
    }); 
    </script> 

的開始，這是我的形式，它具有更多的字段，但我只顯示一個，我想要顯示的按鈕和div

@using (Html.BeginForm("Registro", "Login", FormMethod.Post, new { @class = "form-horizontal", role = "form", id="nuevo" })) 
      { 
       @Html.AntiForgeryToken() 

    <div> 
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

     <div class="form-group"> 
      @Html.LabelFor(model => model.NIT, new { @class = "sr-only control-label col-md-2" }) 

      <div class="col-md-12"> 
       <div class="input-group"> 
        <div class="input-group-addon">digite NIT Proveedor</div> 
        @Html.TextBoxFor(model => model.NIT, new { @class = "form-control", @type = "text" }) 
       </div> 
       <p class="text-danger"> @Html.ValidationMessageFor(model => model.NIT)</p> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-12"> 
       <button type="submit" id="submit" value="Registrarse" class="btn btn-primary" @*onclick="return confirm('Desea ingresar información de registro?')"*@ > 
        Registrarse 
        <span class="glyphicon glyphicon-user"></span> 
       </button> 
      </div> 
     </div> 

    </div> 

    <div id="dialog-confirm" style="display: none"> 
     <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span> Are you sure to delete? </p> 
    </div> 
      } 

Answer 1

您的剃鬚刀視圖看起來不錯，但您的JavaScript只是實例化在每次點擊提交按鈕時點擊對話框。如果你願意，你可以移動對話框實例進行提交點擊回調，並更換了電話$("#dialog-confirm").dialog("open");：

$(document).ready(function() { 
    // instantiate the dialog on document ready 
    $("#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"); 
     } 
     } 
    }); 

    $("#submit").click(function() { 
     // open the dialog on the submit button click 
     $('#dialog-confirm').dialog('open'); 
    }); 
});