ASP.NET Web Pages - Connecting to the Database

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