Jquery form submit confirm dialog

Introduction of Jquery form submit confirm dialog

Consider a scenario where we need to post the values of ASP.NET MVC Form on click of "Yes" button in confirm dialog. There are many questions raised in different forums on this topic so i thought lets discuss this today. Here i will try to explain how we can do it with easy steps. 

Approach for Jquery form submit confirm dialog

First step would be to create a class called "Customer.cs"  and using this as our model to our view.

 
public class Customer
{
 public string Fname { get; set; }
 public string Lname { get; set; }
 public string Address { get; set; }
}

I will use the existing "HomeController.cs" file for this example so lets change the content of "index.cshtml" view to incorporate customer model changes. Below is the sample of ASP.NET MVC Form -

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { Id = "frmCustomer" }))
{

 <div class="row">

  <div>

   @Html.LabelFor(m => m.Fname)

   @Html.TextBoxFor(m => m.Fname)

  </div>

  <div class="error_align_left align_left_processor">

   @Html.ValidationMessageFor(m => m.Fname)

  </div>

 </div>

 <div class="row">

  <div>

   @Html.LabelFor(m => m.Lname)

   @Html.TextBoxFor(m => m.Lname)

  </div>

  <div class="error_align_left align_left_processor">

   @Html.ValidationMessageFor(m => m.Lname)

  </div>

 </div>

 <div class="row">

  <div>

   @Html.LabelFor(m => m.Address)

   @Html.TextBoxFor(m => m.Address)

  </div>

  <div class="error_align_left align_left_processor">

   @Html.ValidationMessageFor(m => m.Address)

  </div>

 </div>

 <div class="align_left_tabs">

  <input type="button" value="Save" name="Save" id="SaveCustomer" />

 </div>
}

As you can see in the above code snippet of ASP.NET MVC Form, properties  - "Fname", "Lname" and "Address" are all input fields. So once the user enters the data into these text boxes and clicks the "Save" button, Pop up (Confirm Dialog) will appear and it gives user a option either "Save" or "Cancel". So Pop up content will be obtained from partial view. So we are creating an action method to load the pop up. 

Below is the code snippet for these functionalities -

First is loading the partial view on click on "Save" button 

 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript">

 var WarningURL = '@Url.Action("WarningPopUp", "Home")';

 $(document).ready(function () { 

  $("#SaveCustomer").click(function () {

   showWarningPopup();

  });


  function showWarningPopup() {

   var $confirm = $("<div id='divWarning'></div>");

   $confirm.empty();

   $confirm.dialog({

    autoOpen: false,

    title: 'Message',

    width: 400,

    draggable: false,

    resizable: false,

    closeOnEscape: false,

    dialogClass: 'no-close',

    modal: true,

    height: 150,

    cache: false,

    open: function (event, ui) {

     $confirm.load(WarningURL);

    }

   });

   $confirm.dialog("open");

   return false;

  }

 });

</script>

As you can see above function - "showWarningPopup" is used to display a pop up (confirm dialog) and "WarningURL" variable is pointing to the action - "WarningPopUp", which is in "Home" controller. 

Action method -

 
public ActionResult WarningPopUp(string name)
{
 return PartialView("_WarningPopup", name);
}

Pop up/ Confirm Dialog code -

<script type="text/javascript">

 function destroyPopup() {

  $('#divWarning').dialog('destroy').remove();

 }

 function postCredentials() {

  $("#frmCustomer").submit();

 }

</script>

<div id="timeOutPopup" class="row_shift20">

 <div style="margin-bottom:50px">Please Confirm Details</div>

 <ul>

  <li class="popUpCancelBtnWidth"><input type="button" value="Cancel" onclick="destroyPopup()" /></li>

  <li class="popUpConfrmBtnWidth"><input type="button" value="Save" onclick="postCredentials();" class="green_input" /></li>

 </ul>
</div>

The above method is quite straight forward. As we discussed on click of "Save" button javascript function - "postCredentials" which submits the parent form (which has user entered values). After putting breakpoint in the post method it looked like this -

Hope you enjoyed this article of ASP.NET MVC Form even though it is long. Please comment your thoughts below.