Chapter 6 Slides ASP

Chapter 6
How to work with server controls
Murachs ASP.NET 3.5/C#, C6
2008, Mike Murach & Associates, Inc.
Slide 1
Objectives
Applied Given the specifications for a web form that uses any of the server controls presented in this chapter, design and code the form. Knowledge Describe the normal coding technique for handling control events. Describe the way ASP.NET provides for setting access keys for controls and for setting the default focus and default button for forms. Describe the differences between buttons, link buttons, and image buttons. Describe the use of the e argument when working with an image button control.
Slide 2
Objectives (continued)
Describe the use of the Command event and the CommandName property of a button control for processing a group of button controls. Describe the differences between the way check box controls and radio button controls work, including the difference in when the CheckedChanged event occurs. Explain how the items in any of the list controls are stored and how you refer to these items in code. Explain the purpose of the ListItem Collection Editor and describe when you might use it.
Slide 3
Standard controls
Commonly used user input controls such as labels, text boxes, and drop-down lists Many can be bound to a data source
Data controls
Databound user-interface controls that display data via a data source control Data source controls that access data from a variety of databases, XML data sources, and business objects
Validation controls
Used to validate user input Work by running client-side script Can handle most validation requirements
Slide 4
Navigation controls
Controls that provide menus and path maps for navigating a web site
Login controls
Controls that provide user authentication
WebParts controls
Controls that let you create a page from user-selectable components
Slide 5
AJAX Extensions controls

Controls that provide for updating selected parts of a page during a postback
HTML controls
Standard HTML controls that can be converted to HTML server controls Not commonly used in ASP.NET applications
Slide 6
The web server controls presented in this chapter

Control Name Label TextBox Button LinkButton ImageButton HyperLink DropDownList ListBox Suggested prefix lbl txt btn lbtn ibtn hlnk ddl lst
Slide 7
Web server controls (continued)

Control Name CheckBox CheckBoxList RadioButton RadioButtonList Image ImageMap BulletedList Calendar FileUpload Suggested prefix chk cbl rdo rbl img imap blst cln upl
Slide 8
Handling a Click event using the OnClick attribute

The asp tag for a button control
<asp:Button id="btnCancel" runat="server" Text="Cancel Order" OnClick="btnCancel_Click">
The event handler for the Click event of the control

protected void btnCancel_Click(object sender, EventArgs e) { Session.Remove("Cart"); Response.Redirect("Order.aspx"); }
Slide 9
The asp tags for two button controls that use the same event handler
<asp:Button id="btnPrevious" runat="server" Text="Previous" OnClick="NavigationButtons_Click" /> <asp:Button id="btnNext" runat="server" Text="Next" OnClick="NavigationButtons_Click" />
Slide 10
Common control events

Event Click Command TextChanged SelectedIndexChanged CheckedChanged Attribute OnClick OnCommand OnTextChanged OnSelectedIndexChanged OnCheckedChanged
Slide 11
A form that uses access keys and default focus and button attributes
Slide 12
The aspx code for the form

<form id="form1" runat="server" defaultfocus="txtName" defaultbutton="btnNext"> <div> Please enter your contact information:<br /><br /> <table> <tr> <td style="width: 75px"> <span style="text-decoration: underline">N</span>ame:</td> <td style="width: 100px"> <asp:TextBox ID="txtName" runat="server" AccessKey="N"></asp:TextBox></td></tr> <tr> <td style="width: 75px"> <span style="text-decoration: underline">E</span>mail:</td> <td style="width: 100px"> <asp:TextBox ID="txtEmail" runat="server" AccessKey="E"> </asp:TextBox></td></tr></table><br />
Slide 13
The aspx code for the form (continued)

<asp:Button ID="btnPrevious" runat="server" AccessKey="P" Text="Previous" OnClick="btnPrevious_Click" /> <asp:Button ID="btnNext" runat="server" AccessKey="N" Text="Next" OnClick="btnNext_Click" /><br /> </div> </form>
A statement that moves the focus to a control

txtEmail.Focus
Slide 14
A button, a link button, and an image button in a browser
The asp tags for the three buttons

<asp:Button ID="btnAdd" runat="server" Text="Add to Cart" OnClick="btnAdd_Click" /> <asp:LinkButton ID="lbtnCheckOut" runat="server" PostBackUrl="~/CheckOut1.aspx">Check Out </asp:LinkButton> <asp:ImageButton ID="ibtnCart" runat="server" AlternateText="Cart" ImageUrl="~/Images/cart.gif" Height="60px" Width="68px" PostBackUrl="~/Cart.aspx" />
Slide 15
Common button attributes

Text ImageUrl AlternateText CausesValidation CommandName CommandArgument PostBackUrl
Slide 16
An event handler for the Click event of a button control

protected void btnAccept_Click(object sender, EventArgs e) { this.AddInvoice(); Response.Redirect("Confirmation.aspx"); }
Slide 17
An image used for an image button control The asp tag for the control
<asp:ImageButton ID="ibtnNavigate" runat="server" ImageUrl="~/Images/navbuttons.gif" Height="24px" Width="96px" OnClick="ibtnNavigate_Click" />
Slide 18
An event handler for the Click event of the control

protected void ibtnNavigate_Click(object sender, ImageClickEventArgs e) { if (e.X >= 0 & e.X <= 23) this.GoToFirstRow(); else if (e.X >= 24 & e.X <= 47) this.GoToPreviousRow(); else if (e.X >= 48 & e.X <= 71) this.GoToNextRow(); else if (e.X >= 72 & e.X <= 95) this.GoToLastRow(); }
Slide 19
Properties of the ImageClickEventArgs class

Property
X Y
Description An integer that represents the x or y coordinate where the user clicked the image button.
Slide 20
Four button controls that use the CommandName attribute

<asp:Button ID="btnFirst" runat="server" Text="<<" Width="25px" CommandName="First" OnCommand="NavigationButtons_Command" /> <asp:Button ID="btnPrevious" runat="server" Text="<" Width="25px" CommandName="Previous" OnCommand="NavigationButtons_Command" /> <asp:Button ID="btnNext" runat="server" Text=">" Width="25px" CommandName="Next" OnCommand="NavigationButtons_Command" /> <asp:Button ID="btnLast" runat="server" Text=">>" Width="25px" CommandName="Last" OnCommand="NavigationButtons_Command" />
Slide 21
An event handler for the Command events of the buttons

protected void NavigationButtons_Command(object sender, CommandEventArgs e) { switch (e.CommandName) { case "First": this.GoToFirstRow(); break; case "Previous": this.GoToPreviousRow(); break; case "Next": this.GoToNextRow(); break; case "Last": this.GoToLastRow(); break; } }
Slide 22
Properties of the CommandEventArgs class

Property
CommandName
CommandArgument
Description The value specified in the CommandName property for the control that generated the Command event. The value specified in the CommandArgument property for the control that generated the Command event.
Slide 23
A text box and a label displayed in a browser
The asp tag for the text box

<asp:TextBox ID="txtQuestion" runat="server" Rows="5" TextMode="MultiLine" Width="296px"></asp:TextBox>
Slide 24
Common text box attributes

TextMode Text MaxLength Wrap ReadOnly Columns Rows
Slide 25
The asp tag for the label

<asp:Label ID="lblConfirm" runat="server"></asp:Label>
Common label attribute

Attribute Text Description The text displayed by the label.
Slide 26
Four check boxes and two radio buttons displayed in a browser
Slide 27
The aspx code for the check boxes and radio buttons
<asp:CheckBox ID="chkMail" runat="server" Checked="True" Text="Add me to your mailing list" /><br /><br /> Contact me about:<br /> <asp:CheckBox ID="chkSpecial" runat="server" Text="Special offers" /><br /> <asp:CheckBox ID="chkNew" runat="server" Text="New products" /><br /> <asp:CheckBox ID="chkRelated" runat="server" Text="Related products" /><br /><br /> Contact me by:<br /> <asp:RadioButton ID="rdoEmail" runat="server" Checked="True" GroupName="Contact" Text="Email" /> <asp:RadioButton ID="rdoPostal" runat="server" GroupName="Contact" Text="Postal mail" />
Slide 28
Common check box and radio button attributes

Attribute Text Checked GroupName Description The text thats displayed next to the check box or radio button. Indicates whether the check box or radio button is selected. The default is False. The name of the group that the control belongs to (radio buttons only).
Slide 29
Code that retrieves text entered by a user

string question = txtQuestion.Text;
Code that changes the Text property of a label

lblConfirm.Text = "Thank you for your question.<br />" + "We will respond within 2 business days.";
Slide 30
Code that processes a check box and radio button

protected void btnContinue_Click(object sender, EventArgs e) { if (chkMail.Checked) customer.Mail = true; else customer.Mail = false; if (rdoEmail.Checked) customer.MailType = "Email"; else customer.MailType = "Postal"; }
Slide 31
Another way to process the check box and radio buttons

protected void chkMail_CheckedChanged(object sender, EventArgs e) { if (chkMail.Checked) customer.Mail = true; else customer.Mail = false; } protected void rdoEmail_CheckedChanged(object sender, EventArgs e) { customer.MailType = "Email"; } protected void rdoPostal_CheckedChanged(object sender, EventArgs e) { customer.MailType = "Postal"; }
Slide 32
A list box displayed in a browser
The asp tag for the list box

<asp:ListBox ID="lstColor" runat="server"> <asp:ListItem Value="Black" Selected="True">Black</asp:ListItem> <asp:ListItem Value="Red">Red</asp:ListItem> <asp:ListItem Value="Blue">Blue</asp:ListItem> <asp:ListItem Value="Green">Green</asp:ListItem> </asp:ListBox>
Slide 33
A drop-down list displayed in a browser
The asp tag for the drop-down list

<asp:DropDownList id="ddlDay" runat="server"> <asp:ListItem Value="1">Sunday</asp:ListItem> <asp:ListItem Value="2">Monday</asp:ListItem> <asp:ListItem Value="3">Tuesday</asp:ListItem> <asp:ListItem Value="4">Wednesday</asp:ListItem> <asp:ListItem Value="5">Thursday</asp:ListItem> <asp:ListItem Value="6">Friday</asp:ListItem> <asp:ListItem Value="7">Saturday</asp:ListItem> </asp:DropDownList>
Slide 34
Common properties of list box and drop-down list controls

Items Rows SelectedItem SelectedIndex SelectedValue SelectionMode
Slide 35
Common properties of list item objects

Property
Text Value Selected
Description The text thats displayed for the list item. A string value associated with the list item. Indicates whether the item is selected.
Slide 36
Retrieving the value of an item in a drop-down list

int dayNumber = Convert.ToInt32(ddlDay.SelectedValue);
Retrieving the text for an item in a drop-down list

string dayName = ddlDay.SelectedItem.Text;
Using the SelectedIndexChanged event of a dropdown list

protected void ddlDay_SelectedIndexChanged(object sender, EventArgs e) { int dayNumber = Convert.ToInt32(ddlDay.SelectedValue); }
Slide 37
Common property of list item collection objects

Count
Common indexer of list item collection objects

[index]
Common methods of list item collection objects

Add (string) Add (ListItem) Insert (index, string) Insert (index, ListItem) Remove (string) Remove (ListItem) RemoveAt (index) Clear() FindByValue (string) FindByText (string)
Slide 38
Code that loads items into a list box using strings

lstColor.Items.Add("Black") lstColor.Items.Add("Red") lstColor.Items.Add("Blue") lstColor.Items.Add("Green")
Code that loads items into a drop-down list using ListItem objects
ddlDay.Items.Add(new ddlDay.Items.Add(new ddlDay.Items.Add(new ddlDay.Items.Add(new ddlDay.Items.Add(new ddlDay.Items.Add(new ddlDay.Items.Add(new ListItem("Sunday", "1")) ListItem("Monday", "2")) ListItem("Tuesday", "3")) ListItem("Wednesday", "4")) ListItem("Thursday", "5")) ListItem("Friday", "6")) ListItem("Saturday", "7"))
Slide 39
The ListItem Collection Editor dialog box
Slide 40
A check box list and a radio button list displayed in a browser
Slide 41
The asp tag for the check box list

<asp:CheckBoxList id="cblContact" runat="server" Width="305px" RepeatColumns="2"> <asp:ListItem Value="Special"> Special offers</asp:ListItem> <asp:ListItem Value="New"> New products</asp:ListItem> <asp:ListItem Value="Related"> Related products</asp:ListItem> <asp:ListItem Value="Events"> Local events</asp:ListItem> </asp:CheckBoxList>
Slide 42
The asp tag for the radio button list

<asp:RadioButtonList id="rblMail" runat="server" Width="346px" RepeatDirection="Horizontal"> <asp:ListItem Value="Email">Email</asp:ListItem> <asp:ListItem Value="Postal"> Postal mail</asp:ListItem> <asp:ListItem Value="Both" Selected="True"> Both</asp:ListItem> </asp:RadioButtonList>
Slide 43
Attributes for formatting radio button and check box lists

Attribute RepeatLayout Description Specifies whether ASP.NET should use table tags (Table) or normal HTML flow (Flow) to format the list when it renders the control. The default is Table. Specifies the direction in which the controls should be repeated. The available values are Horizontal and Vertical. The default is Vertical. Specifies the number of columns to use when repeating the controls. The default is 0.
RepeatDirection
RepeatColumns
Slide 44
A statement that gets the value of the selected item in a radio button list
customer.MailType = rblMail.SelectedValue;
A statement that checks if the first item in a check box list is selected
if (cblContact.Items[0].Selected) ...
Slide 45
A bulleted list and a numbered list displayed in a browser
Slide 46
Common attributes of the bulleted list control

Attribute BulletStyle Description Specifies the bullet style. For a bulleted list, allowable values are Disc, Circle, Square, or CustomImage. For a numbered list, allowable values are Numbered, LowerAlpha, UpperAlpha, LowerRoman, or UpperRoman. BulletImageUrl Specifies the URL of the image used to display the bullets if the BulletStyle attribute is set to CustomImage. FirstBulletNumber Specifies the starting number if numbers are displayed. DisplayMode Specifies how the text for each item should be displayed. Allowable values are Text, HyperLink, or LinkButton. Text is the default.
Slide 47
The aspx code for the bulleted list

<asp:BulletedList ID="BulletedList1" runat="server" BulletStyle="Disc"> <asp:ListItem>Styrofoam panel</asp:ListItem> <asp:ListItem> Gray and black latex paint</asp:ListItem> <asp:ListItem>Stone texture paint</asp:ListItem> <asp:ListItem>Rotary tool</asp:ListItem> </asp:BulletedList>
Slide 48
The aspx code for the numbered list

<asp:BulletedList ID="BulletedList2" runat="server" BulletStyle="Numbered" DisplayMode="HyperLink"> <asp:ListItem Value="Costumes.aspx"> Costumes</asp:ListItem> <asp:ListItem Value="StaticProps.aspx"> Static props</asp:ListItem> <asp:ListItem Value="AnimatedProps.aspx"> Animated props</asp:ListItem> </asp:BulletedList>
A statement that checks if the first link button in a bulleted list was clicked
if (blstCategories.Items[0].Selected) ...
Slide 49
Some of the Help documentation for the calendar control
Slide 50
Image control and a hyperlink control in browser
The asp tag for the image control

<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Murach logo.jpg" AlternateText="Murach Books" />
Code that sets the URL of an image control

imgProduct.ImageUrl = "Images/Products/cat01.jpg";
Slide 51
Common image attributes

Attribute ImageUrl AlternateText ImageAlign Width Height Description The absolute or relative URL of the image. The text thats used in place of the image if the browser cant display the image. The alignment of the image relative to the web page or other elements on the page. The width of the image. The height of the image.
Slide 52
The asp tag for the hyperlink control

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl=http://www.murach.com >Click here to order</ asp:HyperLink>
Common hyperlink attributes

Attribute NavigateUrl Text ImageUrl Description The absolute or relative URL of the page thats displayed when the control is clicked. The text thats displayed for the control. The absolute or relative URL of the image thats displayed for the control.
Slide 53
A file upload control displayed in a browser
The aspx code used to implement the file upload

File upload:<br /><br /> <asp:FileUpload ID="FileUpload1" runat="server" /> <br /><br /> <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" /><br /><br /> <asp:Label ID="lblMessage" runat="server"></asp:Label>
Slide 54
The Click event handler for the Upload button

protected void btnUpload_Click(object sender, EventArgs e) { int sizeLimit = 5242880; // 5,242,880 is 5MB if (FileUpload1.HasFile) { if (FileUpload1.PostedFile.ContentLength <= sizeLimit) { string path = "C:\\uploads\\" + FileUpload1.FileName; FileUpload1.SaveAs(path); lblMessage.Text = "File uploaded to " + path; } else lblMessage.Text = "File exceeds size limit."; } }
Slide 55
Properties and methods of the FileUpload class

Property
HasFile FileName PostedFile
Description If True, the user has selected a file to upload. The name of the file to be uploaded.
The HttpPostedFile object that represents the file that was posted. You can use this objects ContentLength property to determine the size of the posted file. Method Description SaveAs(string) Saves the posted file to the specified path.
Slide 56
The California.gif image
The aspx code for the image map control

<asp:ImageMap ID="imapCA" runat="server" ImageUrl="~/Images/California.GIF" HotSpotMode="PostBack" OnClick="imapCA_Click"> <asp:PolygonHotSpot Coordinates="76, 228, 177, 158, 121, 111, 121, 3, 0, 3, 0, 83, 76, 228" PostBackValue="North" /> <asp:PolygonHotSpot Coordinates="76, 229, 177, 159, 301, 275, 296, 347, 215, 358, 111, 295, 76, 229" PostBackValue="South" /> </asp:ImageMap>
Slide 57
The Click event handler for the image map

protected void imapCA_Click(object sender, ImageMapEventArgs e) { string region; if (e.PostBackValue.Equals("North")) region = "NorthernCalifornia"; else region = "SouthernCalifornia"; }
Slide 58
Common image map attributes

Attribute ImageUrl HotSpotMode Description The URL of the image to be displayed. Sets the behavior for the hot spots. PostBack causes the page to be posted and Navigate links to a different page. This attribute can also be specified for individual hot spot elements.
Slide 59
A web page with an image button that displays a calendar
The web page with the calendar displayed
Slide 60
The asp tag for the calendar control

<asp:Calendar ID="clnArrival" runat="server" Visible="False" OnSelectionChanged="clnArrival_SelectionChanged" BorderColor="Black" BorderStyle="Solid"> <TodayDayStyle BackColor="Blue" Font-Bold="True" ForeColor="White" /> <TitleStyle BackColor="Blue" Font-Bold="True" ForeColor="White" /> <NextPrevStyle ForeColor="White" /> </asp:Calendar>
Slide 61
The SelectionChanged event handler for the calendar control

protected void clnArrival_SelectionChanged(object sender, EventArgs e) { ddlMonth.SelectedValue = clnArrival.SelectedDate.Month.ToString(); ddlDay.SelectedValue = clnArrival.SelectedDate.Day.ToString(); clnArrival.Visible = false; ibtnCalendar.Visible = true; }
Slide 62
Common properties of the Calendar class

Property SelectionMode Description Specifies the type of selection that can be made. Acceptable values are Day, DayWeek, DayWeekMonth, and None. The currently selected date if a single date was selected, or the first selected date if multiple dates were selected. A collection that contains all of the selected dates in sequence. To determine the number of dates that were selected, use the Count property of this collection.
SelectedDate
SelectedDates
Slide 63

Chapter 6 Slides ASP

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 6 Slides ASP

Uploaded by

Copyright:

Available Formats

Chapter 6

How to work with server controls

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

AJAX Extensions controls

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

The web server controls presented in this chapter

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Web server controls (continued)

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Handling a Click event using the OnClick attribute

The event handler for the Click event of the control

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Common control events

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

The aspx code for the form

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

The aspx code for the form (continued)

A statement that moves the focus to a control

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

A button, a link button, and an image button in a browser

The asp tags for the three buttons

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Common button attributes

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

An event handler for the Click event of a button control

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

An event handler for the Click event of the control

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Properties of the ImageClickEventArgs class

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Four button controls that use the CommandName attribute

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

An event handler for the Command events of the buttons

Murachs ASP.NET 3.5/C#, C6

2008, Mike Murach & Associates, Inc.

Properties of the CommandEventArgs class