In this tutorial, we’ll walk through the steps of creating an easy confirmation modal dialog with C# ASP .NET MVC3, jQuery, and jQuery UI. Our confirmation dialog will display all form fields that contain values (leaving any fields without values hidden). It will allow the user to click Edit to close the dialog and make changes, or click Submit to submit the data to our web application for processing. Upon clicking Submit, the modal dialog’s button will automatically disable to prevent duplicate submissions. Our form confirmation dialog will also automatically grab the values from textboxes, dropdown select lists, and checkbox fields to display the confirmation data.
The above simply includes references to the jQuery and jQuery UI libraries, as well as their associated CSS code. This is required for our form validation and modal confirmation dialog.
We’ll use the following simple C# MVC model for our example form:
Our Contact class will let the user enter their Name, Email, and favorite Color. We’ve included some simple data annotations to validate the three fields. Note, Color_ID will actually be a drop-down list, populated from our helper method ColorManager.GetColorList(). This method is defined as follows:
The above is a simple helper method to return a list of drop-down elements to populate our HTML select element. You would most likely load this list from your database in a production C# ASP .NET MVC web application.
With our model defined, we can now begin the HTML form.
Our HTML contact form can be defined in our MVC web application, using Razor code, as follows:
Note, we’ve included validation elements for each model field. The Name and Email fields are required fields, while the Color is an option field. This will allow us to test the jQuery modal confirmation dialog to see the different values populated.
Once we create our MVC controller, we can successfully submit the form data for processing. We’ll then add our confirmation dialog. The code for the controller is shown below:
Our controller has two action methods. The first one is for rendering the initial form with a blank Contact object (upon an HTTP GET request). The second action is for submitting the form. Fairly simple.
For our jQuery form confirmation dialog, we’ll need to add a small block of HTML to our page to draw the dialog.
It’s as simple as that. We create a div for our jQuery UI modal dialog and include a set of child div elements - one for each form field. If a form field has no value, we’ll hide the element div. Otherwise, the user will see the fields and can make changes or submit the form.
The above jQuery code hooks onto the form.submit() event to display the modal confirmation dialog. It goes through each form field and populates the value for the form field element. If the value is empty, we hide the parent container div. This allows our confirmation dialog to only display fields with values entered, offering easy viewing for users confirming their data. Upon clicking the Submit button in the confirmation dialog, we call the underlying form’s submit method, which bypasses the jQuery call, and submits the form data to our C# MVC web application for processing.
You can download the project source code on GitHub by visiting the project home page.
This article was written by Kory Becker, Microsoft certified software developer and architect, providing C# ASP .NET web application development, database design, and mobile software development across a variety of domains for clients in both the business and consumer sectors.