The best way to learn a new development language or technology/platform is to build a useful application that covers as much of the language and framework as possible. This would be a considerable task in the case of ADO.NET, ASP.NET, C#, and .NET framework, to say the least. A Web based address database example will go a long way to explore these technologies to demonstrate the ease of development afforded by them. The following example will cover ASP.NET server controls (TextBox
), ADO.NET, and C# knowledge base.
Here is the source code for this data form (WebDataForm1.aspx
and WebDataForm1.aspx.cs
):
<%@ Page language="c#" Codebehind="WebDataForm1.aspx.cs" AutoEventWireup="false" Inherits="WebDataApplication1.WebDataForm1" debug="True"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript (ECMAScript)">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 374px; POSITION: absolute; TOP: 64px" runat="server" Width="267px" Height="40px" Font-Bold="True" Font-Size="Larger">Web based Address Management</asp:Label>
<asp:TextBox id="Phone" style="Z-INDEX: 117; LEFT: 398px; POSITION: absolute; TOP: 330px" runat="server"></asp:TextBox>
<asp:TextBox id="Country" style="Z-INDEX: 116; LEFT: 777px; POSITION: absolute; TOP: 287px" runat="server"></asp:TextBox>
<asp:TextBox id="State" style="Z-INDEX: 115; LEFT: 629px; POSITION: absolute; TOP: 288px" runat="server" Width="55px" Height="24px"></asp:TextBox>
<asp:TextBox id="City" style="Z-INDEX: 114; LEFT: 394px; POSITION: absolute; TOP: 288px" runat="server"></asp:TextBox>
<asp:TextBox id="Address2" style="Z-INDEX: 113; LEFT: 394px; POSITION: absolute; TOP: 249px" runat="server" Width="402px" Height="24px"></asp:TextBox>
<asp:TextBox id="Address1" style="Z-INDEX: 112; LEFT: 394px; POSITION: absolute; TOP: 207px" runat="server" Width="402px" Height="24px"></asp:TextBox>
<asp:TextBox id="LastName" style="Z-INDEX: 111; LEFT: 394px; POSITION: absolute; TOP: 168px" runat="server"></asp:TextBox>
<asp:Label id="PhoneLabel" style="Z-INDEX: 109; LEFT: 321px; POSITION: absolute; TOP: 336px" runat="server">Telephone</asp:Label>
<asp:Label id="CountryLabel" style="Z-INDEX: 108; LEFT: 708px; POSITION: absolute; TOP: 289px" runat="server">Country</asp:Label>
<asp:Label id="StateLabel" style="Z-INDEX: 107; LEFT: 585px; POSITION: absolute; TOP: 290px" runat="server">State</asp:Label>
<asp:Label id="CityLabel" style="Z-INDEX: 106; LEFT: 319px; POSITION: absolute; TOP: 292px" runat="server">City</asp:Label>
<asp:Label id="Address2Label" style="Z-INDEX: 105; LEFT: 319px; POSITION: absolute; TOP: 253px" runat="server">Address2</asp:Label>
<asp:Label id="Address1Label" style="Z-INDEX: 104; LEFT: 319px; POSITION: absolute; TOP: 215px" runat="server">Address1</asp:Label>
<asp:Label id="LastNameLabel" style="Z-INDEX: 103; LEFT: 319px; POSITION: absolute; TOP: 169px" runat="server">Last Name</asp:Label>
<asp:Label id="FirstNameLabel" style="Z-INDEX: 102; LEFT: 319px; POSITION: absolute; TOP: 133px" runat="server">First Name</asp:Label>
<asp:TextBox id="FirstName" style="Z-INDEX: 110; LEFT: 395px; POSITION: absolute; TOP: 132px" runat="server"></asp:TextBox>
<asp:Button id="Button1" style="Z-INDEX: 118; LEFT: 439px; POSITION: absolute; TOP: 397px" runat="server" Width="209px" Height="24px" Text="Add New Record"></asp:Button>
<asp:repeater id="AddressRepeater" runat="Server">
<HeaderTemplate>
<table style="LEFT: 780px; TOP: 126px">
<tr style="FONT-SIZE: large; COLOR: purple; BACKGROUND-COLOR: lightgrey">
<td width="110"> Name </td>
<td width="40"> Address1 </td>
<td width="50"> City </td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table>
<tr>
<td> <%# DataBinder.Eval( Container.DataItem, "LastName" ) %> </td>
<td> </td>
<td> <%# DataBinder.Eval( Container.DataItem, "FirstName" ) %> </td>
<td> </td>
<td> <%# DataBinder.Eval( Container.DataItem, "Address1" ) %> </td>
<td> </td>
<td> <%# DataBinder.Eval( Container.DataItem, "City") %> </td>
</tr>
</table>
</ItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:repeater>
</form>
</body>
</HTML>
The aspx.cs
file will contain the variable declarations along with the declaration of variables within the actual aspx page. This allows access to the controls properties and methods during page loading and other events handled by the WebDataForm1
class. We can explain as fallows how this happens; ASP.NET does code generation at the time the first time the page is accessed During that time the necessary glue code is generated to link the aspx controls to the variables declared within the CodeBehind page. The WebDataForm1
class in this code is used during this process as well and contains the page logic for such actions as databinding, layout, validation (we will have more information in the fallowing articles), and other business logic as required by the application. Although this class does not really accomplish anything valuable, it will serve the purpose if illustrating how to use web forms.
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;
namespace WebDataApplication1
{
/// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebDataForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Repeater AddressRepeater;
protected System.Web.UI.WebControls.Label Label1;
protected System.Web.UI.WebControls.Label FirstNameLabel;
protected System.Web.UI.WebControls.Label LastNameLabel;
protected System.Web.UI.WebControls.Label Address1Label;
protected System.Web.UI.WebControls.Label Address2Label;
protected System.Web.UI.WebControls.Label CityLabel;
protected System.Web.UI.WebControls.Label StateLabel;
protected System.Web.UI.WebControls.Label CountryLabel;
protected System.Web.UI.WebControls.Label PhoneLabel;
protected System.Web.UI.WebControls.TextBox FirstName;
protected System.Web.UI.WebControls.TextBox LastName;
protected System.Web.UI.WebControls.TextBox Address1;
protected System.Web.UI.WebControls.TextBox Address2;
protected System.Web.UI.WebControls.TextBox City;
protected System.Web.UI.WebControls.TextBox State;
protected System.Web.UI.WebControls.TextBox Country;
protected System.Web.UI.WebControls.TextBox Phone;
protected System.Web.UI.WebControls.Button Button1;
public WebDataForm1()
{
Page.Init += new System.EventHandler(Page_Init);
}
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
if (!IsPostBack)
{
//Create an array list to hold the employees
ArrayList Address = new ArrayList( );
this.Session["Address"] = Address;
}
else
{
//Create a new employee and add them to the list
Address addr = new Address( );
addr.FirstName = FirstName.Text;
addr.LastName = LastName.Text;
addr.Address1 = Address1.Text;
addr.Address2 = Address2.Text;
addr.City = City.Text;
addr.State = State.Text;
addr.Country = Country.Text;
addr.Phone = Phone.Text;
((ArrayList)this.Session["Address"]).Add( addr );
AddressRepeater.DataSource =
(ArrayList)this.Session["Address"];
AddressRepeater.DataBind();
}
}
private void Page_Init(object sender, EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form
// Designer.
//
InitializeComponent();
}
#region Web Form Designer generated code
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
namespace WebDataApplication1
{
using System;
/// <summary>
/// Summary description for Employee.
/// NOTE: Since the employee class will be used in conjuction with /// DataBinding, public properties
/// are required. DataBinding makes use of the System.Reflection API /// to access the get/set Properties.
/// </summary>
public class Address
{
private string _FirstName;
private string _LastName;
private string _Address1;
private string _Address2;
private string _City;
private string _State;
private string _Country;
private string _Phone;
public string FirstName
{
get { return _FirstName; }
set { _FirstName = value; }
}
public string LastName
{
get { return _LastName; }
set { _LastName = value; }
}
public string Address1
{
get { return _Address1; }
set { _Address1 = value; }
}
public string Address2
{
get { return _Address2; }
set { _Address2 = value; }
}
public string City
{
get { return _City; }
set{ _City = value; }
}
public string State
{
get { return _State; }
set { _State = value; }
}
public string Country
{
get { return _Country; }
set { _Country = value; }
}
public string Phone
{
get { return _Phone; }
set { _Phone = value; }
}
}
}
Each time a new contact is added a new row will be added to the table, with the addition of the asp: repeater template code in place. C++ developers are already familiar with the idea of templates and their use during development. Templates allow for a generic framework that can be expanded as needed. When we become comfortable with the asp: repeater it will save us countless hours of development time. To understand clearly let's talk about asp: repeater a little more;
A data-bound list control that allows custom layout by repeating a specified template for each item presented in the list.
<asp:Repeater id="Repeater1"
DataSource="<% databindingexpression %>"
runat=server>
<HeaderTemplate>
Header template HTML
</HeaderTemplate>
<ItemTemplate>
Item template HTML
</ItemTemplate>
<AlternatingItemTemplate>
Alternating item template HTML
</AlternatingItemTemplate>
<SeparatorTemplate>
Separator template HTML
</SeparatorTemplate>
<FooterTemplate>
Footer template HTML
</FooterTemplate>
<asp:Repeater>
To create a basic templated data-bound list, use the Repeater
control. The Repeater
control does not have any built-in layout or styles therefore we must explicitly declare all HTML layouts, formatting, and style tags within the control's templates. For instance, you can declare the <table> tag in the HeaderTemplate
, a table row (<tr>
tags, <td>
tags, and data-bound items) in the ItemTemplate, and the </table> tag in the FooterTemplate
, to create a list within an HTML table.
The following table lists the different templates of the Repeater
control.
Template | Description |
---|---|
AlternatingItemTemplate
|
Like the ItemTemplate element, but rendered for every other row in the Repeater control. You can specify a different appearance for the AlternatingItemTemplate element by setting its style properties. |
FooterTemplate
|
Elements to render once (after all data-bound rows have been rendered). A typical use is to close an element opened in the HeaderTemplate item (with a tag such as </table>). Note: TheFooterTemplate cannot be data bound. |
HeaderTemplate
|
Elements to render once (before any data-bound rows have been rendered). A typical use is to begin a container element, such as a table. Note: TheHeaderTemplate item cannot be data bound. |
ItemTemplate
|
Elements that are rendered once for each row in the data source. To display data in the
|
SeparatorTemplate
|
Elements to render between each row, typically line breaks (<br> tags), horizontal lines (<hr> tags), and so on. Note: TheSeparatorTemplate item cannot be data bound. |
The Repeater
control does not have any built-in selection or editing support. A handler can be created for the control's ItemCommand
event to process control events that are sent from the templates to the control. The control binds its Item
and AlternatingItem
templates to a data structure referenced in the control's DataSource
property. (The Header
, Footer
, and Separator
templates cannot be bound to data.) The control renders the Header
and Footer
templates, but no items, if the Repeater control's DataSource
property is set but no data is returned. The Repeater
control is not rendered if the DataSource
property is not set.
Here is a small example:
<html>
<head>
<script language="C#" runat="server">
void Page_Load(Object Sender, EventArgs e)
{
if (!IsPostBack)
{
ArrayList values = new ArrayList();
values.Add(new PositionData("Microsoft", "Msft"));
values.Add(new PositionData("Intel", "Intc"));
values.Add(new PositionData("Dell", "Dell"));
Repeater1.DataSource = values;
Repeater1.DataBind();
Repeater2.DataSource = values;
Repeater2.DataBind();
}
}
public class PositionData
{
private string name;
private string ticker;
public PositionData(string name, string ticker)
{
this.name = name;
this.ticker = ticker;
}
public string Name
{
get
{
return name;
}
}
public string Ticker
{
get
{
return ticker;
}
}
}
</script>
</head>
<body>
<form runat=server>
<h3><font face="Verdana">Repeater Example</font></h3>
<b>Repeater1:</b>
<p>
<asp:Repeater id=Repeater1 runat="server">
<HeaderTemplate>
<table border=1>
<tr>
<td><b>Company</b></td>
<td><b>Symbol</b></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "Name") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "Ticker") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<p>
<b>Repeater2:</b>
<p>
<asp:Repeater id=Repeater2 runat="server">
<HeaderTemplate>
Company data:
</HeaderTemplate>
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "Name") %>
(<%# DataBinder.Eval(Container.DataItem, "Ticker") %>)
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
</form>
</body>
</html>
On the other hand we used Table Web Server control in our last example. Let's have more information about it. With the Table control we can declare a table and manipulate it programmatically. <asp:Table id="Table1"
BackImageUrl="url"
CellSpacing="cellspacing"
CellPadding="cellpadding"
GridLines="None|Horizontal|Vertical|Both"
HorizontalAlign="Center|Justify|Left|NotSet|Right"
runat="server">
<asp:TableRow>
<asp:TableCell>
Cell text
</asp:TableCell>
</asp:TableRow>
</asp:Table>
We can build an HTML table and specify its characteristics with the Table
class. A table can be built at design time with static content, but the Table control is often built programmatically with dynamic contents. Note that the Programmatic additions or modifications to a table row or cell will not persist across posts to the server. Table rows and cells are controls of their own, and they are not properties of the Table control. Changes to table rows or cells must be reconstructed after each post to the server. Use the DataList
or DataGrid
controls instead of the Table control if substantial modifications are expected. <%@ Page Language="C#" %>
<html>
<head>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Generate rows and cells.
int numrows = 3;
int numcells = 2;
for (int j=0; j<numrows; j++)
{
TableRow r = new TableRow();
for (int i=0; i<numcells; i++)
{
TableCell c = new TableCell();
c.Controls.Add(new LiteralControl("row " + j.ToString() +
", cell " + i.ToString()));
r.Cells.Add(c);
}
Table1.Rows.Add(r);
}
}
</script>
</head>
<body>
<form runat=server>
<h3><font face="Verdana">Table Example</font></h3>
<asp:Table id="Table1"
GridLines="Both"
HorizontalAlign="Center"
Font-Name="Verdana"
Font-Size="8pt"
CellPadding="15"
CellSpacing="0"
runat="server"/>
</form>
</body>
</html>
Comments