E-commerce Applications Development 0731465 Done by Raneem Qaddoura

Lecture 1 Web controls (1)

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

Web Control Hierarchy

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>

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

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>

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.

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;

Lecture 2 Web controls (2)

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;

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");

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";

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"));

The page Processing Sequence

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

Lecture 3 ExampleS

Example: Greeting Card

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>

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();

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"; }

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;

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

The End