For this sample application, I have used Visual Studio 2012 RC, ASP.Net Web Page2 Beta and .Net 4.5 framework RC.

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

  1. <connectionStrings>
  2. <add name="StarterSite" connectionString="Data Source=|DataDirectory|\StarterSite.sdf" providerName="System.Data.SqlServerCe.4.0" />
  3. <add name="student" connectionString ="Server=(local);Database=student;Trusted_Connection=True;"
  4. providerName="System.Data.SqlClient" />
  5. </connectionStrings>

Step 4

Add the following code to get the data from the student database.

  1. @{
  2. var db = Database.Open("student"); //Open the database here
  3. var selectedData = db.Query("SELECT * FROM student"); //get the data from student table
  4. var grid = new WebGrid(source: selectedData); //set the data source to the data grid
  5. }

Image 3.jpg

Step 5

Fill in the datagrid with the data.

  1. @grid.GetHtml(
  2. columns:grid.Columns(
  3. grid.Column("Name"),
  4. grid.Column("Class"))
  5. )

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.

  1. <head>
  2. <title></title>
  3. <style type="text/css">
  4. .grid { margin: 4px; border-collapse: collapse; width: 600px; font-family:Calibri; }
  5. .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
  6. .head { background-color:Gray; font-weight: bold; color: black; }
  7. .alt { background-color: #E8E8E8; color: #000; }
  8. </style>
  9. </head>

Step 8

Add the style information to the webgrid.

  1. @grid.GetHtml(
  2. tableStyle: "grid",
  3. headerStyle: "head",
  4. alternatingRowStyle: "alt",
  5. columns:grid.Columns(
  6. grid.Column("Name"),
  7. grid.Column("Class"))
  8. }

Image 5.jpg

Step 9

Custom paging

  1. var grid = new WebGrid(source: selectedData,rowsPerPage:5);

Image 6.jpg

Hit F5 to run the application.
Image 7.jpg