1 / 52

Using Server Controls

Using Server Controls. Introduction to ASP.NET By Kathleen Kalata. Objectives. In this chapter, you will: Create Web pages using HTML server controls and ASP.NET controls Examine the difference between HTML server controls and ASP.NET controls

dooley
Download Presentation

Using Server Controls

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Using Server Controls Introduction to ASP.NET By Kathleen Kalata Chapter 3

  2. Objectives • In this chapter, you will: • Create Web pages using HTML server controls and ASP.NET controls • Examine the difference between HTML server controls and ASP.NET controls • Create and process a form using HTML server controls and ASP.NET server controls • Populate controls dynamically using ArrayLists and HashTables • Validate a form using validation controls Chapter 3

  3. Using HTML Server Controls • Object-oriented programming allows you to use objects, which can be accessed by other programs • An object is a set of related methods and properties that are compartmentalized • Properties are used to set the value of a variable defined within an object • All of the HTML tags can be immediately changed into server-side tags using runat=”server” • Attributes also are called properties • Visible property is a Boolean value that indicates whether a Server control is rendered as an HTML control on the page Chapter 3

  4. HTML Control Server Event Handlers • Client-side controls have events such as onClick and onChange are associated with HTML client controls • To be able to detect these events on the server, Visual Studio .NET will create a generic JavaScript event handler called _doPostBack • The event sends the name of the control (eventTarget) and any arguments (eventArgument) back to the server when the event is intercepted • This handler only is required once per page, and is written by the server, not the programmer • OnServerChange event occurs when an HTML server control value has changed Chapter 3

  5. OnServerChange Event • The HTML controls that support the OnServerChange event: • HTMLInputCheckBox • HTMLInputRadio • HTMLInputHidden • HTMLInputText • HTMLTextArea • HTMLSelect • The HTML controls that support the OnServerClick event: • HTMLInputImage • HTMLAnchor • HTMLButton • HTMLForm Chapter 3

  6. Sample Web Form <input name="WebAddress" type="text" id="WebAddress" onchange="__doPostBack('WebAddress','')" language="javascript" /> <input type="submit" name="GoBtn" value="Go" id="GoBtn" /> <input type="hidden" name="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" value="" /> Chapter 3

  7. Sample _doPostback Event Handler <script language="javascript"> <!-- function __doPostBack(eventTarget, eventArgument) { var theform = document.ctrl0; theform.__EVENTTARGET.value = eventTarget; theform.__EVENTARGUMENT.value = eventArgument; theform.submit(); } // --> </script> Chapter 3

  8. Using HTML Server Controls • A function is a named grouping of one or more programming statements • This exercise demonstrates how to use HTML server controls to dynamically change the contents of the page • Create a new project named Chapter3, create an images folder, import the images • Create a WebForm from scratch named HTMLButton.aspx Chapter 3

  9. Using HTML Server Controls • This code changes the visible property for the two label controls to false lblGiftIdeasMen.Visible = False lblGiftIdeasWomen.Visible = False The code f or the male button: lblTitle.InnerHtml = "<b>We have lots of gift ideas for men.</b>" lblGiftIdeasWomen.Visible = False lblGiftIdeasMen.Visible = True The code for the female button: lblTitle.InnerHtml = "<b>We have lots of gift ideas for women.</b>" lblGiftIdeasWomen.Visible = True lblGiftIdeasMen.Visible = False Chapter 3

  10. HTMLButton.aspx Chapter 3

  11. HTML Server Button Controls • The properties of individual controls can be changed through the Properties window • You can also change the properties of individual controls by adding your code to the code behind the page • You can change the property when the page loads, or when an event occurs, such as a button click • The properties are not always the same for HTML server controls and ASP.NET server controls Chapter 3

  12. Using HTMLImageButton Server Controls • In the exercise, you import the HTML template named HTMLImageButton.aspx • The btnMale_ServerClick event handler Private Sub (ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnMale.ServerClick lblTitle.InnerHtml = "<b>We have lots of gift ideas for men.</b>“ lblGiftIdeasWomen.Visible = False lblGiftIdeasMen.Visible = True End Sub Chapter 3

  13. Using HTMLImageButton Server Controls • The btnFemale_ServerClick event handler Private Sub btnFemale_ServerClick(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnFemale.ServerClick lblTitle.InnerHtml = "<b>We have lots of gift ideas for women.</b>" lblGiftIdeasWomen.Visible = True lblGiftIdeasMen.Visible = False End Sub Chapter 3

  14. Using HTMLInputButton Server Controls • In the exercise, you import the HTML template named HTMLInputButton.aspx • Retrieve the value property of the control • Note: • You can use concatenation character (&) to append strings • You can use the line termination character (_) to continue the code across multiple lines • The ¬ character is used in the book to provide you with emphasis that the line of code is split in the book, but you should not split the line of code in your application Chapter 3

  15. HTMLInputButton.aspx Chapter 3

  16. Hyperlinks and Form Fields • Hyperlinks allow you to create links to other pages or to internal targets within the same page • Check boxes, radio buttons, and drop-down lists are form fields that allow you to select from lists of options • In the following exercises you will add hyperlinks, radio buttons, and drop-down list boxes to the Web form named HTMLRadioButton.aspx Chapter 3

  17. HTMLRadioButton.aspx • The code that determines which radio button is checked If (rdBridal.Checked = True) Then lblTitle.InnerHtml = "Celebrate your Wedding!" imgTop.Src = "images/28.jpg" ElseIf (rdBooks.Checked = True) Then lblTitle.InnerHtml = "Your Favorite Irish Book Selections!" imgTop.Src = "images/27.jpg" …. End If Chapter 3

  18. HTMLRadioButton.aspx Chapter 3

  19. Creating a Page with a Drop Down List Control • HTML drop down list controls are created with the HTML Select tag • Option tags are used to create each individual item in the list • A value can be associated with each item in the list • You can obtain information about the option selected by using the SelectedIndex property of the drop-down list box • When nothing has been selected the SelectedIndex property returns the value -1 • The Add method allows you to add items to the list dynamically when the page loads, or when an event occurs Chapter 3

  20. HTMLSelect.aspx Chapter 3

  21. Creating a Page with a Hyperlink Control • The hyperlink control is used to create an anchor tag • You can use the property window to assign the URL or do it in the code behind the page • Link to another page or a target using the ImageURL property • The displayed text is configured using the Text property • The text property also becomes the tooltip by default AHome.Href = "http://www.tarastore.com" Chapter 3

  22. HTMLAnchor.aspx Chapter 3

  23. Using ASP.NET WebForm Controls • The ASP.NET controls are located on the WebForms tab in the toolbox • The ASP.NET Webforms inherit from the Web Control class which is found in the System.Web.UI.WebControls namespace • ASP.NET controls can be grouped into: • WebForm controls • Rich controls • Data controls • Validation Controls • Mobile Controls Chapter 3

  24. Target Property • The target is the window or frame to load the Web page linked to when the HyperLink control is clicked • The default value for the target is String.Empty • The reserved windows are: _New - renders the content in a new window _blank - renders the content in a new window without frames _parent - renders the content in the immediate frameset parent _self - renders the content in the frame with focus _top - renders the content in the full window without frames Chapter 3

  25. Syntax Issues • The color properties must be assigned using a different syntax • Color is an object that inherits its properties from the System.Drawing,Color namespace • You can assign the value by the known color name, a 32-bit value, a hexadecimal value, or property of an object • Known colors that you can refer to by name MyControl.BorderColor = System.Drawing.Color.Green • Assign the color value from the text box or form MyControl.BackColor = Color.FromName(txtBackColor.Value) Chapter 3

  26. Image Control • The WebForm image control class produces an <img> tag • If you need to capture mouse clicks on the image, you use the ImageButton control • The ImageURL property provides the path to the image by creating the SRC property for the IMG tag • The AlternateText property provides the text that is displayed when the image is not available • The AlternateText property generates the ALT property in the HTML tag • The ImageAlign property provides the image alignment property Chapter 3

  27. ASPSelect.aspx • Add a drop-down list to a Web page, and dynamically add the options to the list when the page first loads If (Not IsPostBack) Then dlCategory.Items.Add("Gifts") dlCategory.Items.Add("Jewelry") dlCategory.Items.Add("China and Crystal") dlCategory.Items.Add("Pottery") dlCategory.Items.Add("Clothing") dlCategory.Items.Add("Food") dlCategory.Items.Add("Books, Music, and Video") dlCategory.Items.Add("Bridal") End If Chapter 3

  28. Submit Button Click Event Handler • Get value and change the ImageURL property Select Case dlCategory.SelectedIndex Case 0 lblTitle.Text = "Let us help you find the best gift!" imgTop.ImageUrl = "images/21.jpg" Case 1 lblTitle.Text = "Quality Jewelry at Affordable Prices!" imgTop.ImageUrl = "images/22.jpg" … Case Else lblTitle.Text = "Select a Product Category" imgTop.ImageUrl = "images/WaterfordGifts.jpg" End Select Chapter 3

  29. ASPSelect.aspx Chapter 3

  30. Panel, Placeholder, and Literal Controls • The panel control can contain other controls and creates a DIV tag to enclose the contents • You can set properties such as wrapping, absolute positioning, font type, and scrollbars • The label control creates contents within a Panel control using the SPAN tag • You can also use a literal control to write content directly to the page • The placeholder control is used as a container to store dynamically added server controls • The placeholder control does not produce any visible output without the use of other controls Chapter 3

  31. ASPPlaceholder.aspx • Use Add methods to dynamically create a hyperlink and literal control using the placeholder control • In the Page_Load procedure dynamically create a label and place the label within the placeholder ' Create a label to contain text Dim MyLabel As New Label() placeholder.Controls.Add(MyLabel) MyLabel.Text = "Please select one or more topics" MyLabel.ForeColor = System.Drawing.Color.FromName("#004040") MyLabel.Font.Name = "Trebuchet MS" MyLabel.Font.Size = MyLabel.Font.Size.Smaller MyLabel.ID = "lblMessage" Chapter 3

  32. ASPPanel.aspx Chapter 3

  33. Working with Checkboxes • Format the checkboxes and retrieve the values • Checkboxes can have more than one value checked, so you have to look at each checkbox to see if it’s been checked • Write the results to the string Chapter 3

  34. ASPCheckbox.aspx Dim MyMessage As String MyMessage = "<b>You selected:</b><br /><br />" If CB1.Checked Then MyMessage += CB1.Text & "<br />" End If If CB2.Checked Then MyMessage += CB2.Text & "<br />" End If ... MyMessage += "<br /><b>Thank you.</b>" lblTopics.Text = MyMessage.ToString() Chapter 3

  35. Using Validation Controls • The ForeColor property sets the color of the error message • The five validation controls are: • RequiredFieldValidator – Makes sure a form field is not left blank • RangeValidator – Makes sure a field’s value falls between a given range • CompareValidator – Compares a field’s value with other values or other fields’ values • RegularExpressionValidator – Evaluates data against a regular expression • CustomValidator – Evaluates data against custom criteria Chapter 3

  36. Using Validation Controls • The validation controls inherit from the BaseValidator class which inherits from the label class • Therefore, validation controls can display custom error messages using labels • Validation controls that perform comparisons also inherit from the BaseCompareValidator base class, and therefore inherit additional properties Chapter 3

  37. Using Validation Controls • They all support common properties and methods • ForeColor property sets the color of the error message • The default ForeColor property is red • Display property is used to show the message • Dynamic - space for the validation message is dynamically added to the page if validation fails • Static - space for the validation message is allocated in the page layout • None - the validation message is never displayed in the browser Chapter 3

  38. IsValid Property • Each of the controls inherits the validate method which performs validation on the associated input control and updates the IsValid property • The IsValid property indicates whether the control that is being validated is valid • Check if the entire page is valid at the same time by calling the Page.Validate method and then using the Page.IsValid property Page.Validate() If Page.IsValid Then Message.Text = "Result: Valid!" Else Message.Text = "Result: Not valid!" End If End Sub Chapter 3

  39. Individual Validation Controls • The RequiredFieldValidator control is used to determine if any value is entered or selected • ControlToValidate property specifies the input control to validate • ValidationExpression property compares the input control to the regular expression. Some common regular expressions: Internet E-Mail Address \w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* Internet URL http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)? US Zip Code \d{5}(-\d{4})? Chapter 3

  40. ValidationSummary Control • To summarize the error messages from all validators on a Web page, in one location • DisplayMode – displays as a list (List), a bulleted list (BulletList), or a single paragraph (SingleParagraph) • ShowSummary - shows the entire list of error messages from invalid controls • ShowMessageBox - displays an additional message in an alert box by setting • HeaderText - allows you to display a heading message Chapter 3

  41. ASPValidateForm.aspx Chapter 3

  42. ASPValidationSummary.aspx Chapter 3

  43. Binding to Simple Data • You can bind data to controls using the DataBind method • By grouping them together in a single control, you can set the properties for the entire group • RadioButtonList controls allow you to group a series of one or more radio buttons • CheckboxList controls allow you to group a series of one or more Checkbox controls • RepeatDirection property so that the group is displayed horizontally or vertically • RepeatLayout property which will group the list using a table or using paragraph tags Chapter 3

  44. ArrayList • The ArrayList is a type of array whose size dynamically increases as required • The ArrayList is declared using the keyword Dim, the name of the array, and the keyword New • Properties and Methods • Capacity - the number of items the list can hold • The ArrayList is zero-based, which means that the counting of items in the ArrayList starts at 0 and not 1. Default capacity of 16 • Count - determines the number of items in the list • Add method - used to add items to the list Chapter 3

  45. ASPDBRadioButtonList.aspx • Create a simple ArrayList that will populate a RadioButtonList control If Not Page.IsPostBack Then RBL.RepeatLayout = RepeatLayout.Table RBL.RepeatDirection = RepeatDirection.Vertical Dim AR1 As New ArrayList(9) AR1.Add("Current Events in Ireland") AR1.Add("Fishing in Ireland") … RBL.DataSource = AR1 RBL.DataBind() End If Chapter 3

  46. ASPDBRadioButtonList.aspx • The Submit button click procedure determines which element is selected with the SelectedItem object, and assigns the text property to a variable, which is used to change the text property of the label control Dim strResult As String strResult = "<b>You selected: </b><br/><br/>" If RBL.SelectedIndex > -1 Then strResult += RBL.SelectedItem.Text End If lblTopics.Text = strResult Chapter 3

  47. ASPDBRadioButtonList.aspx Chapter 3

  48. Binding CheckBoxLists to HashTables • The items are added using a key and value pair • Declare using the keyword Dim, the name of the HashTable, and the keyword New • Add method adds items to the HashTable. You can use the key in your programming to retrieve the value for a particular item • Because you have a key and value pair, you must specify the key and value: • DataValueField is used to create the value for the control • DataTextField is used to create the text displayed for the control Chapter 3

  49. ASPDBCheckboxList.aspx • Create a HashTable and populate the CheckBoxList • CheckBoxList controls allow you to group a series of one or more CheckBox controls • Add each pair of key and values and specify the DataTextField and DataValueField properties If Not Page.IsPostBack Then Dim HS1 As New HashTable(9) HS1.Add("Current Events in Ireland", "Current Events in Ireland") … CBL.DataSource = HS1 CBL.DataTextField = "Value" CBL.DataValueField = "Key" CBL.DataBind() End If Chapter 3

  50. ASPDBCheckboxList.aspx • Loop through each control in the list and read the Selected property for each control • Then you can assign the text property of that control to a variable which will be used to change the text property of the label control 'This determines if any item was selected CBL.SelectedIndex > -1 'This will get the number of items in the list CBL.Items.Count Dim strResult As String Chapter 3

More Related