Search, sort, paging, insert, update and delete with ASP.Net MVC and bootstrap modal popup and WebGrid to show records with search, sort and paging feature and in next article we will complete our article by adding insert, update and delete feature with bootstrap modal popup. We are going to use Entity Framework 6 code first model with a very simple table phone. Adding client side sorting and paging feature is tricky for which we don’t need a single line of code but for it we need to set the WebGrid in correct order, which we will do in this article.

Points which we are going to cover in this article:

Entity Framework 6 Code First to a new database

Search and bind record to WebGrid with paginated data

Client side paging and sorting by grid column

Insert, update and delete with bootstrap Modal Popup

Common method to open and save Modal Popup form data

Here is the final output screen which we are going to achieve

Packages we will need for this project, open package manager console and run one by one

Install-Package EntityFramework

Install-Package System.Linq.Dynamic.Library (for dynamic sort order)

Install-Package bootstrap

Install-Package jQuery (to update jQuery to latest version)

I don’t think I need to explain any of the above packages except the second one which I added to use the string in our LINQ queries to sort records, which we will see in more detail latter in this article.

As we know, for code first entity framework model we need to first define the model so let’s create a very simple model say phone with only four properties. Create a class “Phone” in Models folder on the root and here is the complete class with data annotations

How can we create and access the database by just creating the model, so create a new folder on the root, name it DAL. Add a class to this DAL folder and name it to MobileDBContext and another to initialize the database with name MobileDBInitializer, here is the code for these two classes

First class MobileDBContext will be used to access the database which is derived from DbContext and its constructor is derived from base with a string DefaultConnection which is the connection string so we need to define a connection string in our config file, add the following lines in configuration section to create a local database with the name Mobiles, if you want to create the database in your local SQL Server then you can change the Data Source to you database otherwise it will create a database to our application as in our example.

We need more configuration settings to call the database creation on first access of the database and call to our second class to add our dummy records to the table. After running “Install-Package EntityFramework”, it add a new node to the configuration file like … , we need to add following lines to this section

Now we completed our code first entity framework database creation. Before writing the code for our controller, let’s create a new model to pass data from controller to view with table rows as well as paging information. Create new class into Models folder with name “PagedList”, here is the complete class

Time to create our controller, right click on the controllers folder and add a new controller “PhoneController”. I am not going to define the detail that how to create controller and what option you need to check or uncheck, I consider you already know it. Add a new action method “Index” with parameters filert, page, page size, sort column and sortdirection, here is the complete action method

We need to add using System.Linq.Dynamic; for dynamic order, as I mentioned earlier we will use dynamic sort order by using string, note .OrderBy(sort + " " + sortdir) which is two string parameter which possible with normal LINQ query that's why we installed the package System.Linq.Dynamic.Library.

First part of the code gets data from table for the current page only on the basis of page number, page size, sort column and sort direction, I used default sort column to PhoneId.

Now we need to add the HTML code with WebGrid to show the result, so let’s add it, right click on the action method and add a new view and change the html with following html

Notice we added all the buttons for add, detail, edit and delete which we will complete in part 2.
I left all the css, script and bundling code from main article because that was not important for the article, so let’s complete those missing items. Add bootstrap css file to the css bundle in bundleconfig.cs file in App_Start folder

Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.

Other blogs you may like

MVC Searh page with pagination:
It’s very easy to create a search page in asp.net but when I try to create the same in MVC I faced many problems, how to create model, how to keep searched values in search controls, pagination, I found myself nowhere, so start searching for some good examples but...
By Ali Adravi
On 25 Aug 2013
Viewed: 35,052

CRUD (Create, Retrieve, Update and Delete) in MVC. When we start to learn new language, first we try to run an application with “Hello World” and then CRUD functionality. So in this article we will see how to select records from database (with WebGrid, pagination and sort functionality), update a...
By Ali Adravi
On 17 Aug 2013
Viewed: 97,285

Sometimes we need a thanks page say we have user registration, change password, activate account functionality in our application then we need a thanks page after registering with our site, to say thanks for registering with us or showing confirmation that your password is successfully changed or...
By Hamden
On 30 Jun 2013
Viewed: 3,087

In MVC, autocomplete with jquery is the best way to pull data from database and render according to our requirements, so in this article we will use jquery to show the auto complete text box without any ajax controls. We need a method to get the data from database, a controller method to handle the...
By Ali Adravi
On 29 Jun 2013
Viewed: 6,053

Upload multiple files with model data in MVC is really very easy, when I started to test by uploading some files, I though it would be more complicated but it is really not. In my previous post [ASP.Net MVC file upload][1], I promised to post soon about how to upload multiple files. When I was...
By Ali Adravi
On 04 Jun 2013
Viewed: 22,498