Step 1
To learn more about the basics of ASP.Net web pages, please refer to my previous blog:
http://www.c-sharpcorner.com/UploadFile/muralidharan.d/Asp-Net-web-pages-with-visual-studio-2012/
Step 2
Add a new page in the ASP.Net web pages demo project.
![Image 1.jpg]()
Step 3
Add the "student" connectiion string in the existing web.config file.
![Image 2.jpg]()
<connectionStrings>
<add name="StarterSite" connectionString="Data Source=|DataDirectory|\StarterSite.sdf" providerName="System.Data.SqlServerCe.4.0" />
<add name="student" connectionString ="Server=(local);Database=student;Trusted_Connection=True;"
providerName="System.Data.SqlClient" />
</connectionStrings>
Step 4
Add the following code to get the data from the student database.
@{
var db = Database.Open("student"); //Open the database here
var selectedData = db.Query("SELECT * FROM student"); //get the data from student table
var grid = new WebGrid(source: selectedData); //set the data source to the data grid
}
![Image 3.jpg]()
Step 5
Fill in the datagrid with the data.
@grid.GetHtml(
columns:grid.Columns(
grid.Column("Name"),
grid.Column("Class"))
)
Step 6
Hit F5 to run the application.
![Image 4.jpg]()
Step 7
Applying styles to the WebGrid.
Add the following style information in the head section.
<head>
<title></title>
<style type="text/css">
.grid { margin: 4px; border-collapse: collapse; width: 600px; font-family:Calibri; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.head { background-color:Gray; font-weight: bold; color: black; }
.alt { background-color: #E8E8E8; color: #000; }
</style>
</head>
Step 8
Add the style information to the webgrid.
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns:grid.Columns(
grid.Column("Name"),
grid.Column("Class"))
)
![Image 5.jpg]()
Step 9
Custom paging
var grid = new WebGrid(source: selectedData,rowsPerPage:5);