Benefits Of Partial View In MVC 5

Today, in this article you will learn to use Partial View in a different manner in any MVC application. As you know, Partial View is a view that will be rendered on a parent view. So, I will show you with the help of this article that how we can render partial view in a different way on a parent view.

Partial View can be a parent view and we can use it as a parent view of any partial view. We can simply pass Model to show data in the partial view or we can send the data in the partial view with the help of AJAX call.

We will use Partial View to show the data as in jQuery UI dialogue and we will put Partial View in a div to show the data. In my Previous article on Paging, Searching, Filtering in MVC 5 with Partial View , we saw that how we can use Partial View to show the data in MVC Grid.

So, let’s get started and learn to use Partial View in MVC Application with the help of following structure:

Creating ASP.NET MVC Application

In this section, we will create the MVC application. I am creating MVC 5 application and you can use it on MVC 3 or MVC 4. MVC 5 application can be created through Visual Studio 2013 or Visual Studio 2015. Let’s begin with the following steps:

Step 1: In the Visual Studio 2013, click on “New Project”,

Figure 1: Creating New Project in VS 2013

Step 2: Select the Web from the left pane and click on “ASP.NET Web Application” and enter the app name as “BestMovies”,

Figure 2: Creating Web App in VS 2013

Step 3: Select the MVC Project Template in the next “One ASP.Net” Wizard,

Figure 3: MVC Template in VS 2013

Performing Database Operation

In this section we will create the database and table for performing data operation so that web application can fetch the data from the database. Start with the following steps:

Step 1: Just Create the database from the following code:

Step 2: Now run the following script to perform the database operations:

That’s it for the database section.

Working with Web Application

In this section, we will create the architecture of web application and fetch the data from the database and view the data in Razor View and in the Partial View. We will display the data in the Partial view with the help of jQuery UI dialogue or in any simple div.

So, let’s begin with the following procedure:

Adding Model:

Step 1: In the Solution Explorer, right click on the solution and click on “Add New Project”,

Figure 4: Adding New Project

Step 2: Select the “Class Library” and enter the name as “BestMoviesModel”,

Figure 5: Adding Class Library Project

Step 3: Now add a class in this project as named “Movie”,

Figure 6: Adding Class

Step 4: Update the class code with the help of following code:

Step 5: Just build the solution.

Adding Core

In this section, we will add the project which will handle the database. Follow the steps below:

Step 1: In the Solution Explorer, right click on the solution and click on “Add New Project” and select “Class Library” as named “BestMoviesCore”

Step 2: Now add a reference of “BestMoviesModel” solution in this project,

Figure 7: Adding Reference

Step 3: Now in the “BestMoviesCore” project, right click on the References and click on “Manage NuGet Packages” and search for “Enterprise Library” and install it in the project,

Figure 8: Adding Enterprise Library

Step 4: Now just create two folders as named “BL” and “DAL”.

Step 5: Now add a class in the DAL folder as named “MovieDAL” and replace the code with the following code:

Step 6: Now add a class in the “BL” folder as named “MovieBL” and replace the code with the following code:

Step 7: That’s it with this section. Now build the solution.

Working with Web Application

Now in this section, we will work with the MVC web application and view the data. Start with the following steps:

Step 1: At first, we will add the reference of “BestMoviesModel” and “BestMoviesCore” projects reference in this project.

Figure 9: Adding Reference in Web

Step 2: Right click on the Models folder and add a class as named “MovieDetails”,

Figure 10: Adding Class in Models

Step 3: Replace the code with the following code:

Step 4: Now right click on the Controllers folder and click on Add-> New -> Controller.

Step 5: Now in the wizard select the “MVC 5 Empty Controller”,

Figure 11: Add Scaffold in MVC 5

Step 6: Enter the controller name as “MovieController”,

Figure 12: Add Controller in MVC 5

Step 7: Add the following method in the MovieController,

Step 8: Now goto Views-> Movie, right click on it and add view,

Figure 13: Adding View in MVC 5

Step 9: Enter the view name as “BestMovies”,

Figure 14: Add View Wizard

Step 10: Add the following code in the view,

Note: We are passing data to the Partial view to load the Movie data.

Step 11: Now add a Partial View as named “_BestMoviesPartial” in the View-> Movie folder,

Figure 15: Addding Partial View in MVC 5

Step 12: Now add the following code in this view:

Step 13: Now build the solution and open the Views-> Shared-> _Layout.cshtml and replace the code with the highlighted code below:

Step 14: Now open the “Web.config” file of Web application and add the following two lines in your file:

Adding Key:

Adding ConnectionString:

Step 15: Now run the application and click on the “Movies”,

Figure 16: Main Page View of MVC

In the next page you will see Movies data,

Figure 17: Partial View in MVC 5

Partial View with jQuery UI Dialogue

In this section, we will pass the Partial View in the jQuery UI Dialogue. For this please follow the steps below:

Step 1: Add the following method in the “MovieController”

Step 2: Add another Partial View as named “_MovieDetailsPartial” in the Views->Movie folder and add the following code in it:

Step 3: Add the reference of jQueryUI from the NuGet Package Manager

Figure 18: Adding jQuery UI NuGet Package

Step 4: Now open “BestMovies.cshtml” and add the following code at the end:

Step 5: Now open “_BestMoviesPartial.cshtml” and update the code with the highlighted code below:

Step 6: Now add the following css code in the “Site.css”,

Step 7: Now build the solution and run the application. Open the “Movies” page and just click on any Movie Name as shown below:

Figure 19: View in MVC 5

Step 8: You will show the popup in the main view as shown below:

Figure 20: Partial View in UI dialogue

Now you can see that we have easily implemented and passed the Partial View in the jQuery UI dialogue.

Note: You have to add script tag of jQuery UI in the _Layout page.

Partial View with DIV Element

In this section we will load the Partial View in a div element. Start with the following steps:

Step 1: Add the following method in the “MovieController”,

Step 2: Add another Partial View as named “_ActorDetailsPartial” and add the following code:

Step 3: Now change the “_MovieDetailsPartial.cshtml” page code with the highlighted code below:

Step 4: Now run the application and click on the Movie Name to show the information,

Figure 21: Loading Partial View in Div Element

Step 5: Now click on the info icon and the newly added Partial View will load in the Div element as shown below:

Figure 22: Partial View in Div Element

That’s it.

Summary

So far this article describes how to show the data in the Partial View and how we can load Partial View in different manner as in jQuery UI Dialogue or in Div Element. Thanks for reading the article. Happy Coding!!