Display jquery dialog when Ajax calls in Asp.net MVC

If you want to display jquery dialog box when you post using Ajax there are various Jquery dialog available you can check them here.
For Now I am going to tell you how can you use jquery confirmation dialog when click on button which post to action in asp.net mvc using Ajax.

First We need to include neccessary libraries.
<pre name="code" class="js">
<script src="../../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.button.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.position.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.resizable.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.dialog.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.effects.core.js" type="text/javascript"></script>
</pre>
these are the necessary script need to include for calling jquery confirmation dialog.
in addition to this I added two css files to look dialog pretty.

<link rel="stylesheet" href="../../Content/demos.css">
<link rel="stylesheet" href="../../Content/jquery.ui.all.css">

after this we need to set Ajax in Asp.net MVC.

as we know Ajax is used for partial page refresh,which uses javascript.microsoft provides two beautiful js for ajax just include them in your page as follows:

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

and for calling ajax using the following ajax extension methods with a dropdown and submit button to post to action using Ajax.

<% using(Ajax.BeginForm("GetTime",
new AjaxOptions { UpdateTargetId = "myResults" })) { %>
<p>
Show me the time in:
<select name="zone" id="zone">
<option value="utc">UTC</option>
<option value="bst">BST</option>
<option value="mdt">MDT</option>
</select>
<input type="submit" value="Go"  id="create-user"/>
</p>
<% } %>

<div id="myResults" style="border: 2px dotted red; padding: .5em;">
Results will appear here
</div>

in the above code when the submit is clicked an ajax call is made for the associated action which returns the response as string which will update the text inside div myResult.

for this my action is as follows:

 public ActionResult GetTime(string zone)
{
DateTime time = DateTime.UtcNow.AddHours(1);
if (Request.IsAjaxRequest())
{
// Produce a fragment of HTML
string fragment = string.Format(
"
The time in {0} is {1:h:MM:ss tt}
", 
zone.ToUpper(),time);
return Content(fragment);
}
else
{
// Produce a complete HTML page
return View(time);
}
}

well we need to write a little bit of script so that we can detect when submit button is clicked then we can call jquery to display confirmation dialog.  <script type="text/javascript">     var zone;     $(function() {         // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!         $("#dialog:ui-dialog").dialog("destroy");  //display the dialog-form div as confirmation dialog.         $("#dialog-form").dialog({             autoOpen: false,             height: 300,             width: 350,             resizable: false,             modal: true,             closeOnEscape: true,             draggable: false,             show: 'slide',             stack: true,             buttons: { //the confirmation dialog will contain two button one is submit and other is cancel,if someone clicks on submit then will we post the data to specified url(in this case our action) and then receive the response and update the text inside myResult div.                 Submit: function() {                     var url = "/Home/GetTime/" + zone;                     $.post(url, function(data) {                         $('#myResults').html(data);                                            });                     $(this).dialog("close");                 },                 Cancel: function() {                     $(this).dialog("close");                 }             },             close: function() {             }         }); //this will use to detect wether "create-user" button has been clicked if so we need to display the div with Id "dialog-form"         $("#create-user")             .button()             .click(function() {                 zone = $("#zone").val();                 $("#dialog-form").dialog("open");                 return false;             });     });     </script> Here is the final screenshot which will appear when you click on submit button

so when you click on Go button the confirmation dialog opens and when click on submit the content inside myresult div is updated with response given by the action using Ajax. Hope guys you enjoyed this article.