how to show a jQuery ui DialogBox in ASP.NET MVC - asp.net-mvc

Question

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
#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>
and this is my form, it has more fields but I just show one, the button and the div I want to show
#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

Your razor view looks fine, but your JavaScript is only instantiating the dialog every time the submit button is clicked. If you want, you can move the dialog instantiation out of the submit click callback, and replace that with a $("#dialog-confirm").dialog("open"); call:
$(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');
});
});