1. E-commerce Applications Development 0731465
Done by Raneem Qaddoura

2. Lecture 1 Web controls (1)

3. reasons for switching to web controls
They provide a rich user interface.
They provide a consistent object model
They tailor their output automatically:
They provide high-level features
ASP.NET exposes a web control as a single object on the server side for convenient programming, thus illustrating one of the primary strengths of web controls.
Web Controls are case insensitive: web page tolerates different capitalization for tag names, property names, and enumeration values

4. Web Control Hierarchy

5. Basic Web Control classes
Underlying HTML Element
Label
<span>
Button
<input type=“submit”> or <input type=“button”>
TextBox
<input type=“text”>, <input type=“password”>, or <textarea>
CheckBox
<input type=“checkbox”>
RadioButton
<input type=“radio”>
Hyperlink
<a>
LinkButton
<a> with a contained <img> tag
ImageButton
<input type=“image”>
Image
<img>
ListBox
<select size=“x”> where X is the number of rows that are visible at once
DropDownList
<select>
CheckBoxList
A list or <table> with multiple <input type=“checkbox”> tags
RadioButtonList
A list or <table> with multiple <input type=“radio”> tags
BulletedList
An <ol> ordered list (numbered) or <ul> unordered list (bullited)
Panel
<div>
Table, TableRow, and TableCell
<table>, <tr>, and <td> or <th>

6. ASP.NET TextBox Web Control: HTML Server control:
<asp:TextBox ID="txt" runat="server" />
<input type="text" ID="txt" name="txt" />

7. A customized text box
<asp:TextBox ID="txt" BackColor="Yellow" Text="Hello World" ReadOnly="true" TextMode="MultiLine" Rows="5" runat="server" />
<textarea ID="txt" name="txt" rows="5" cols="20" readonly="readonly" style="background-color:Yellow;">Hello World</textarea>

8. The Web Control Base Class
Property
Description
AccessKey
Specifies the keyboard shortcut as one letter. For example, if you set this to Y, the Alt+Y keyboard combination will automatically change focus to this web control.
BackColor, ForeColor, and BorderColor
Sets the colors used for the background, foreground, and border of the control. In most controls, the foreground color sets the text color.
BorderWidth
Specifies the size of the control border.
BorderStyle
One of the values from the BorderStyle enumeration, including Dashed, Dotted, Double, Groove, Ridge, Inset, Outset, Solid, and None.
Controls
Provides a collection of all the controls contained inside the current control.
Enabled
When set to false, the control will be visible, but it will not be able to receive user input or focus.
EnableViewState
Set this to false to disable the automatic state management for this control.
Font
Specifies the font used to render any text in the control as a System.Web.UI.WebControls.FontInfo object.
Height and Width
Specifies the width and height of the control.
Page
Provides a reference to the web page that contains this control as a System.Web.UI.Page object.
Parent
Provides a reference to the control that contains this control.
TabIndex
A number that allows you to control the tab order.
ToolTip
Displays a text message when the user hovers the mouse above the control.
Visible
When set to false, the control will be hidden and will not be rendered to the HTML page that is sent to the client.

9. Units
<asp:Panel Height="300px" width="50%" ID="pnl" runat="server" />
// Convert the number 300 to a Unit object
// representing pixels, and assign it.
pnl.Height = Unit.Pixel(300);
// Convert the number 50 to a Unit object
// representing percent, and assign it.
pnl.Width = Unit.Percentage(50);
// Create a Unit object.
Unit myUnit = new Unit(300, UnitType.Pixel);
// Assign the Unit object to several controls or properties.
pnl.Height = myUnit;
pnl.Width = myUnit;

10. Lecture 2 Web controls (2)

11. Enumerations
Such as BorderStyle enumeration, including Dashed, Dotted, Double, Groove, Ridge, Inset, Outset, Solid, and None values.
<asp:Label BorderStyle="Dashed" Text="Border Text" ID="lbl" runat="server" />
lbl.BorderStyle = BorderStyle.Dashed;

12. Colors
<asp:TextBox ForColor="red" Text="Test" ID="txt" runat="server" />
<asp:TextBox ForColor="#ff55ff" Text="Test" ID="txt" runat="server" />
using System.Drawing;
// Create a color from an ARGB value
int alpha = 255, red = 0, green = 255, blue = 0;
txt.ForeColor = Color.FromArgb(alpha, red, green, blue);
// Create a color using a .NET name
txt.ForeColor = Color.Crimson;
// Create a color from an HTML code
txt.ForeColor = ColorTranslator.FromHtml("Blue");

13. Font
<asp:TextBox ForColor="red" Text="Test" ID="txt" runat="server" />
<asp:TextBox ForColor="#ff55ff" Text="Test" ID="txt" runat="server" />
// Change font name
txt.Font.Name = "Georgia";

14. DropDownList, CheckBoxList, and RadioButtonList
<asp:DropDownList ID="list" runat="server" />
<asp:CheckBoxList ID="list" runat="server" />
<asp:RadioButtonList ID="list" runat="server" />
list.Items.Add("C");
list.Items.Add("C++");
list.Items.Add("C#");
list.Items.Add("Java");
list.Items.Add("PHP");
list.Items.Add(new ListItem("Apple", "1"));
list.Items.Add(new ListItem("Orange", "2"));
list.Items.Add(new ListItem("Banana", "3"));
list.Items.Add(new ListItem("Millon", "4"));

15. The page Processing Sequence

16. Web control Events Property Web Control Always Posts Back Click
Button, ImageButton
True
TextChanged
TextBox (fires only after the user changes the focus to another control)
False
CheckedChanged
CheckBox, RadioButton
SelectedIndexChanged
DropDownList, ListBox, CheckBoxList, RadioButtonList

17. Lecture 3 ExampleS

18. Example: Greeting Card

19. Example: Greeting Card
<!-- Here are the controls: -->
Choose a background color:<br>
<asp:DropDownList ID="lstBackColor" runat="server" Width="194px" Height="22px" /><br><br>
Choose a font:<br>
<asp:DropDownList ID="lstFontName" runat="server" Width="194px" Height="22px" /><br><br>
Specify a numeric font size:<br>
<asp:TextBox ID="txtFontSize" runat="server" /><br><br>
Choose a border style:<br>
<asp:RadioButtonList ID="lstBorder" runat="server" Width="177px" Height="59px" /><br><br>
<asp:CheckBox ID="chkPicture" runat="server" Text="Add the Default Picture"></asp:CheckBox>
<br><br>
Enter the greeting text below:<br>
<asp:TextBox ID="txtGreeting" runat="server" Width="240px" Height="85px" TextMode="MultiLine" /><br><br>
<asp:Button ID="cmdUpdate" OnClick="cmdUpdate_Click" runat="server" Width="71px" Height="24px" Text="Update" />
<!-- Here is the card: -->
<asp:Panel ID="pnlCard" runat="server" Width="339px" Height="481px" HorizontalAlign="Center"><br>
<asp:Label ID="lblGreeting" runat="server" Width="256px" Height="150px" /><br><br><br>
<asp:Image ID="imgDefault" runat="server" Width="212px" Height="160px" />
</asp:Panel>

20. Example: Greeting Card
protected void Page_Load(object sender, EventArgs e) {
if (!this.IsPostBack)
// Set color options.
lstBackColor.Items.Add("White");
lstBackColor.Items.Add("Red");
lstBackColor.Items.Add("Green");
lstBackColor.Items.Add("Blue");
lstBackColor.Items.Add("Yellow");
// Set font options.
lstFontName.Items.Add("Times New Roman");
lstFontName.Items.Add("Arial");
lstFontName.Items.Add("Verdana");
lstFontName.Items.Add("Tahoma");
// Set border style options by adding a series of ListItem objects.
ListItem item = new ListItem();
// The item text indicates the name of the option.
item.Text = BorderStyle.None.ToString();

21. Example: Greeting Card
// The item value records the corresponding integer from the enumeration.
// To obtain this value, you must cast the enumeration value to an integer,
// and then convert the number to a string so it can be placed in HTML page.
item.Value = ((int)BorderStyle.None).ToString();
// Add the item.
lstBorder.Items.Add(item);
// Now repeat the process for two other border styles.
item = new ListItem();
item.Text = BorderStyle.Double.ToString();
item.Value = ((int)BorderStyle.Double).ToString();
item.Text = BorderStyle.Solid.ToString();
item.Value = ((int)BorderStyle.Solid).ToString();
// Select the first border option.
lstBorder.SelectedIndex = 0;
// Set the picture.
imgDefault.ImageUrl = "image1.jpg"; }

22. Example: Greeting Card
protected void cmdUpdate_Click(object sender, EventArgs e) {
// Update the color.
pnlCard.BackColor = Color.FromName(lstBackColor.SelectedItem.Text);
// Update the font.
lblGreeting.Font.Name = lstFontName.SelectedItem.Text;
if (Int32.Parse(txtFontSize.Text) > 0) {
lblGreeting.Font.Size = FontUnit.Point(Int32.Parse(txtFontSize.Text)); }
// Update the border style.
int borderValue = Int32.Parse(lstBorder.SelectedItem.Value);
pnlCard.BorderStyle = (BorderStyle)borderValue;
// Update the picture.
if (chkPicture.Checked) {
imgDefault.Visible = true;
}else {
imgDefault.Visible = false;
// Set the text.
lblGreeting.Text = txtGreeting.Text;

23. References
Beginning, A. S. P. (2007). .NET 3.5 in C# 2008: From Novice to Professional , M. MacDonald, Apress.

24. The End