Web Grid in MVC 4 Application Using ADO

First we need to understand what a Web Grid in MVC is.

A WebGrid is used to display data on a web page. The main properties of a WebGrid are:

Source: Where your data comes from. Usually the model passed by the controller action.
DefaultSort: Here you can define how the data will be sorted. Just provide the column name here.
RowsPerPage: Number of records that will be shown in the table.
CanPage: Allows paging.
CanSort: Allows sorting by clicking on column title.
SelectedFieldName: Gets the full name of the query-string field that specifies the selected row of the WebGrid instance.

I will create a new application as in the following:

mvc web application
Image 1

internet application
Image 2

Now right-click on Solution Explorer then select Add New Item.

Image 3

ado dot net
Image 4

generate form database
Image 5

select database
Image 6

select table
Image 7

After clicking Finish right-click on the Model folder then select Add New Item.

add new item in model
Image 8

add new class
Image 9

The code inside CRUDOperationsService.cs will look like the following:

cs code
Image 10

Now right-click on the Controller Folder in Solution Explorer then select Add New Controller -> Employee
Add a new Action here like in the following image:

controller code
Image 11

Now right-click on GetAllEmployee then select Add New View.

add view
Image 12

Here we can use a WebGrid as below:

get all employee code
Image 13

Here we can customize our WebGrid by:

Formatting: Column property.
Sorting and Paging: rowsPerPage, canPage.
Styling: alternatingRowStyle,headerStyle or tableStyle attributes
and so on..

Now run your application:

webgrid in mvc
Image 14