In Depth ASP.NET using ADO.NET: Part IV

John Godel
Oct 13, 2012

18.1k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Exploring with Web Based Address Database

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="Form2" 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: bsolute; 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>
<%# 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.

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"));v
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 ID="Form2">
<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.

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 ID="Form2">
<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>

continue article

Recommended Free Ebook

ASP.NET GridView Control Pocket Guide

Download Now!