In this tutorial, I will walk you step by step towards creating your first Web Application. In .NET runtime, web applications are hosted in an ASP.NET page. ASP.NET provides a great working environment with other .NET languages including C#, VB.NET, and JScript. In this tutorial, I have used C# as programming language.
The goal of this tutorial is to show you how to start your first Web Application without knowing much of ASP programming. This tutorial is divided in to three parts -
1. Introduction of DataGrid Web Control.
2. Web Forms Life Cycle
3. Developing Web Forms Applications using VS.NET
ASP.NET Platform Requirements
To run an ASP.NET application, you must have to have Web Server (IIS) installed on Windows 2000 and Windows NT 4, Service Pack 6a operating systems. You can use any .NET language to write code including VB.NET and C#. To develop this project, I have used Windows 2000, Visual Studio .NET Beta 1, Personal Web Server and C#.
Part 1. Introduction of DataGrid Control
This tutorial uses DataGrid Web Control to display data from a database table. Before we start our application, I would like to discuss DataGrid Web Control.
DataGrid Web Control
A DataGrid Web control displays tabular data from a database. You can connect a database table or partial table data to the grid with the help of ADO.NET DataSet object. First you create a ADODataSetCommand object and select data from a database table. In this sample example, I have used an access database called myDB.mdb, which has a table myTable.
// Create an object of ADODataSetCommand
ADODataSetCommand myCmd = new ADODataSetCommand( "Select * from myTable", "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=myDB.mdb");
Create and Fill the DataSet object.
// Create a DataSet Object
DataSet ds = new DataSet();
// Fill DataSet with the data
myCmd.FillDataSet(ds, "Student");
Now, you use DataSource property of DataGrid to populate the grid with the DataSet's data followed by DataBind() method.
// View Data from DataSet to DataGrid
DataGrid1.DataSource = ds.Tables["Student].DefaultView;
DataGrid1.DataBind();
DataGrid Web Control Properties
A DataGrid Web control contains a rich set of properties, which let you customize the grid the way you want. You can set these properties by right clicking on the DataGrid and click Property Page button.
Clicking Property Page button brings you DataGrid control properties. From here, you can customize your DataGrid control the way you want.
General Properties
This page let you set DataSource. You can allow headers and footers to be displayed. Allow Sorting check box allows sorting in the grid.
Columns Properties
By using this page, you can add columns at design time and their properties.
Paging Properties
Paging is one of the great feature of the grid control. This page allows you to set number of lines per page, format of grid lines and enables custom page.
Format Properties
This page allows you to set color and font of the grid, header, footer and the pages.
Borders Properties
This page allows you to set border color and font, cell padding and spacing, and type of lines in the grid.
Part 2: Web Forms Life Cycle
If you have ever developed Distributed application in previous versions of Visual Studio for Windows, you will see enough similarities between Web Forms applications and distributed applications. In this tutorial, I will discuss only few things about Web Forms life cycle to give you an idea how the processing works in Web Forms. I will be coming with a detailed article about Web Forms Life Cycle in near future.
There are four basic stages in a Web Forms life cycle. These stages are Intialization, Loading page, event handling, and Cleaning up resources.
Page Initialization
First event occurs when a page is being initialized. The event occurred is called Page_Init. Controls should perform all initialization steps required to create and set up an instantiation.
Page Load
Page load stage is after initialization. The event occured is Page_Load. You use this event for following
- Check whether this is the first time the page is being processed.
- Perform data binding the first time the page is processed, or reevaluate data binding expressions on subsequent round trips.
- Read and update control properties.
- Restore state saved from a previous client request during the Save stage.
Event Handling
Every action on a Web Form fires an event which goes to the server. There are two views of a Web Form. A Client view and a server view. All the processing of data is being done on the server. When you raise an event from the browser by mouse click or other medium, the event goes to the server and returns the corresponding data.
Clean Up
This is the last stage when a form has performed it task and ready to discard. Page fires Page_Unload event and perform final cleanup work, such as:
- Closing files.
- Closing database connections.
- Discarding objects.
Part 3: Developing Web Application
Ok, Now let's proceed to developing our Web Forms Application.
Creating Project Skeleton
Creating a Web Application using Visual Studio .NET is not a big deal. You just follow few simple steps and Wizard creates an nice skeleton for you. After that you use Web Controls ToolBox to drop Web Controls to your ASP page and set these control properties as you do in any form based GUI application. Ok, follow these simple steps:
Step 1: Select a Project
From Visual Studio .NET main menu, select File->New->Project. Now you pick Visual C# Projects->Web Application. Type name of your project in the Name text box, and Location text box is your web server's rood directory. You can pick the right path by using Browse button. After selecting these options, hit OK.
Step 2: Setting Properties
The next screen looks like this. WebForm1.aspx is default ASP.NET page, which hosts the ASP.NET code and controls. You can treat this page as a WebForm. Use Toolbox on the left side bar to drag and drop controls on the page.
Right click on the page to set page properties. There are three tabs. The General tab let you pick the scripting language and page layout. Other two tabs are for Color and Fonts for page text, hyperlinks, and visited hyperlinks and keywords.
Step 3: Adding Controls to the WebForm
Now use ToolBox to add Web Controls to the page. I add two controls, a button and a DataGrid control to the page. You can set properties of these controls by right cli
Step 4: Adding Event Handler
I have shown you in the previous discussion of this tutorial about DataGrid and ADO.NET. I will use same technique to fill the DataGrid control to populate data from a database. I will populate the grid on button click.
To write an event handler corresponding the button, double click on the button. This action throws you in a cs file called WebForm1.cs. The event handler for button click code looks like this:
Button1.Click +=
new System.EventHandler (this.Button1_Click);
public void Button1_Click (object sender, System.EventArgs e)
{
}
Here is the code of the cs file -
namespace
CSCornerWebAppSample
{
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
/// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid DataGrid1;
protected System.Web.UI.WebControls.Button Button1;
public WebForm1()
{
Page.Init += new System.EventHandler(Page_Init);
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//
// Evals true first time browser hits the page
//
}
}
protected void Page_Init(object sender, EventArgs e)
{
//
// CODEGEN: This call is required by the ASP+ Windows Form Designer.
//
InitializeComponent();
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
Button1.Click += new System.EventHandler (this.Button1_Click);
this.Load += new System.EventHandler (this.Page_Load);
}
public void Button1_Click (object sender, System.EventArgs e)
{
}
}
}
Step 4: Populating the DataGrid on OnClick of Button
Now write the code on button's click event to populate the grid control. You need to add reference to System.Data.ADO namespace before using ADO objects in the project.
using
System.Data.ADO;
Now write code on Button1_Click method:
public
void Button1_Click (object sender, System.EventArgs e)
{
ADODataSetCommand CmdSet =
new ADODataSetCommand( "Select * from myTable", "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\\myDB.mdb");
DataSet ds = new DataSet();
CmdSet.FillDataSet(ds, "myTable");
DataGrid1.DataSource = ds.Tables["myTable"].DefaultView;
DataGrid1.DataBind();
}
Step 5: Compile and Run the Project
Now use CTRL+F5 or menu item to compile and run your project. The project opens a new instance of your browser and it looks like this:
Now click the button and see the results. It looks like this. The DataGrid is populated with the data from myTable of the database.
This was very basic Web Application. Now you can customize the Grid Control accordingly by setting its properties and develop more useful applications such as reading, deleting, inserting, and updating records in a database.
You can even use other databases such as SQL Server. See ADO.NET section for how to connect to a SQL Server database.
It would be great if you modify this application and provide more help to developers. Your help would be appreciated.