Benefits Of Partial View In MVC 5

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!!