MVC 5 - Partial View With Pagination In jQuery Dialog

Hello folks,

• Visual Studio 2012 or later
• MVC 4 or later

So, let’s start with the following procedure,

• Creating solution
• Perform database operation
• Working with Microsoft Enterprise Library
• Creating User Interface
• Binding partial view with jQuery dialog

Creating Solution

In this section, we’ll create the project infrastructure. Thus, follow the steps given below to start.

Step 1

In Visual Studio 2013 Start screen, just click New Project.


Figure 1: Visual Studio Start Page

Step 2

In the next wizard, select the “Web” from the left pane and select ASP.NET Web Application”. Enter the relative name of the project.


Figure 2: Create New Project

Step 3

In the next wizard, select MVC Project Template to create MVC project.


Figure 3: One ASP.Net Wizard

Now, your Web Application has created successfully.

Perform Database Operation

In this section, we’ll deal with our database. We will create the database according to the situation or you can use your database for the further operation. Follow the steps given below to perform the database operation.

Step 1

Create the database first from the following query.

Step 2

Now, let’s execute the query given below to proceed ahead.
Working with Microsoft Enterprise Library

In this section, we will categorize our Application into two parts or three parts. We can create the separate project for the models, but here I am adding the models in the same project. Therefore, let’s make it simpler by the procedure.

Step 1

At first, right click on the solution and go to Add-> New Folder and named Infrastructure.


Figure 4: Adding New folder in the solution

Step 2

Add a “New Class Library Project” in the newly added folder as “BestPlayers.Core”.


Figure 5: Adding Class Library Project

Step 3

Now, add the three folders in the project as “BL”, “DAL”, “Models”.

Step 4

Add a class and name it as “Team” in the Models folder and replace the code with the code.
Step 4

After building the project, just right click on the project and click Manage NuGet Packages.


Figure 6: Manage NuGet Package

Step 5

Now, add the reference of “Microsoft Enterprise Library” in Core project.


Figure 7: Adding Enterprise Library

Step 6

Now, add a class and name it as PlayersDAL in the DAL folder.


Figure 8: Adding Class

Step 7

Replace the code with the code given below.
Step 8


Creating User Interface

In this section, we’ll get the data from “BestPlayers.Core” project with the help of the controllers and then we will pass binded view with the controller by the help of models. We will add the controllers, views and partial views to create the user interface. Thus, let’s begin with the steps given below.

Step 1

Just right click on the project and click Add Reference to add the reference of Core project. Just perform, as shown below.


Figure 9: Adding Core Project Reference

Step 2

Now, right click on the Controllers folder and go to Add-> Controller.


Figure 10: Adding Controller

Step 3

Select MVC Empty Controller from the next Add Scaffold wizard.


Figure 11: Add Scaffold Wizard

Step 4

Specify the controllers name as “PlayersController”.


Figure 12: Add Controller

Step 5

Update the Model with the help of following code.
Step 6

Now, replace the code with the code given below.
Step 7

Now, right click on the Players folder in the Views folder and go to Add-> View.


Figure 13: Adding View

Step 8

Specify the name for view as “Teams”, as shown below.


Figure 14: View in MVC

Step 9

Now, replace the code with the code given below.
Step 10

Add the connection string given below in the Web.Config file of MVC project.
Step 11

Modify the code in the “Views/Shared/_Layout.cshtml” with the highlighted code given below.
Step 12

Run the Application with Ctrl + F5. Click the Cricketer link.


Figure 15: Dashborad in MVC

Now, you can see that all the teams are listed below.


Figure 16: Team View in MVC

Binding Partial View with jQuery Dialog

In this section, we’ll add one partial view and render the partial view in a div element with the help of jQuery Dialog. We’ll set the datatype as HTML in jQuery function to render the partial view. Let’s begin with the steps given below.

Step 1

Right click on the Views-> Player folder and go to Add -> View.


Figure 17: Adding Partial View

Step 2

Check the option of creating Partial View in the wizard, as shown below.


Figure 18: Partial View in MVC

Step 3

At first, we’ll add the PagedList reference in our Application. In the Solution Explorer, right click on the BestPlayers and go to Manage NuGet Packages and search for the PagedList. Subsequently, install it as shown below.


Figure 19: Adding PagedList Reference

Step 4

Now, add an action method in the PlayersController with the help of the code given below.

At first, add the reference given below.
Now, add the code in the PlayersController, as defined below.
Step 5

Add jQuery & jQueryUI reference and unobtrusive reference from the NuGet Packages.


Figure 20: Adding jQuery Reference

Step 6

Add the highlighted code given below in Team.cshtml page.
Step 7

Replace the code of _PlayerPartial.cshtml page with the code given below.
Step 8

Build the Application and run the Application. Open the Cricketer page and click India.


Figure 21: Cricketer View in App

Step 9

When you click on India, you will get the details of the players listed in Indian team.


Figure 22: Partial View with jQuery Dialog

You can also perform paging in this dialog box.


Figure 23: Paging in Partial View with jQuery Dialog

Note - The records are available only for India. One can easily insert the data into the table to get more records.

Summary

This article described how we can integrate the partial view with div element, with the help of jQuery & jQuery UI. This is one of the benefits of using partial view in any ASP.NET MVC application. We also saw the easy paging functionality and no postback while paging in this application. Thanks for reading this article. Happy coding.