In this tutorial we are going to find out how to load a ASP.NET MVC3 Razor view into Jquery modal dialog.

Why use JQuery modal dialog load a ASP.NET MVC3 Razor view?

There are situations where you want to display certain information on the web to the user without disturbing the existing view. Such cases are if the user is not logged in to system with out navigating back to login screen just by clicking a button in a corner of you page load the login details. Or if the user wants to see existing customers or products or order details etc. are good examples of you need of JQuery dialogs to display ASP.NET MVC3 Razor views. Dialogs can be modal or just popups. If you want user to only use the dialog Razor view need to open the dialog in modal status true. When you open dialog in modal status true users can only perform the popup view task.

How to load a ASP.NET MVC3 Razor view into a Jquery Dialog?

Lets make a login dialog box, using Jquery UI and ASP.NET MVC3. First you need to create a model. Model will hold the properties of the view. Once user enter data and submit the view to the controller, it will validate the details and let user login. There are some more features of the model. I will explain them while constructing the model properties. Let’s create a model for login. In ASP.NET MVC3 you can create models by right clicking the Models folder in your solution structure.

ASP.NET MVC3 add model to solutionselect the class and name it LoginMdel.cs

Once you add the login model you will get a empty class model. Now you can start adding properties. In this scenario we need two properties. That is username and password.

Let’s create an action method which will use this model and create the view. You can create a controller for login if you have more features to add such as register, forgot password etc. For this example I will use ths HomeController.cs and place an action method call Login() as follows;

While implementing the login action method, I’ve consider two types of requests. That is asynchronous request or Ajax requests and normal requests. By doing that this action method can cater for both request types. If you look at the Ajax request I’m returning partial view and for the other normal view. Partial view are special type of views that are not inheriting the master page or other layouts  into it. Normal views will inherit master page views etc. Now the most important thing you must do before you do anything will be compiling the application.

Once you compile the application let’s add the view and the partial view by right clicking on the return view(). When you right click on the statement you will get a context menu select Add View then it will take you to the view settings screen as follows;

First setting you need to do is select “Create a strongly-types view” then it will enable the “Model class” dropdown box. From that select the model we created while ago. As you can see there is another dropdown box call Scaffolding template. By selecting the right action you want to perform with the view it will automatically generate the forms and html in the view. Our example you need Edit. Next important setting will be tick “Create as a partial view” once you select that option it will disable the master page layout for the partial view. Click Add you will find inside Home folder login partial view. It will look as follows;

MVC3 scaffolding templates will create required html for the partial view. Now it has included all the required Jquery and Javascript libraries.

Let’s write code to load this partial view in to a Jquery dialog box. For this example I will use the home page to include a link and popup box to show the login screen. With my previous article I’ve explained how to add Jquery UI dialogs in MVC3 Razor templates (you can go through that article for further details). Let’s look at how will the home page code look like;

First you need to place a link. users will click this link to login. Then you need to place a div shown in above image. Inside this div we use the html helper action method to fetch the partial view we create above. We must hide this div unless it will be visible all the time. When the user click the link we are capturing the link click event using Jquery. Inside the click event we use div id select this div to make this div a dialog using Jquery UI. The Output as follows;

Now you can change the look and feel of the login screen. As you can see when you click on the save button there are no validations it just close the dialog box. Let’s add validation to the login form. Now you need to go back to Model code and add validations to the properties. In ASP.NET MVC when you set property lengths, Required settings it will automatically generate the client side validations for the properties. Let’s look at how to add such validation properties;

If you want the model property to be a required field in the client side you need to place the [Required] tag above the property, Once you do that it will under line as an error saying missing reference. Visual Studio has a feature, click on the error it will show what references are missing and by clicking them it automatically adds them in to the model. Let me show you how to add two basic validation settings to login form.

Above image shows how to add required field validator and field length validator. As you can see in some cases you can give you own error message. There are many more validation are defined in Asp.Net MVC frame work. Now lets compile the application and run it and experience the difference.

As you can see now when you click on the save button it will validate the inputs and give the messages defined by you. Likewise you can add many more features into this login form. The best part of this form is that it is not disturbing your index view and it is a model dialog once you finish your task you can continue what you were performing with the index page without reloading it. Likewise you can load any operation of you system into a modal dialog box using the same logic.