1 / 92

Web Forms and Server Controls

Web Forms and Server Controls. ASP.NET. Using HTML Server Controls. All HTML tags can be changed into server-side tags using the attribute and value runat="server" Limited functionality compared to Web controls Provide output similar to their HTML counterparts To set the runat attribute:

griffith-fields
Download Presentation

Web Forms and 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. Web Forms and Server Controls ASP.NET

  2. Using HTML Server Controls • All HTML tags can be changed into server-side tags using the attribute and value runat="server" • Limited functionality compared to Web controls • Provide output similar to their HTML counterparts • To set the runat attribute: • Right-click on the HTML control and select the command Run As Server Controlor • Type the attribute and value into the tag in HTML view, i.e. <input type="text" runat="server">

  3. HTML Server Controls • Similar to HTML Controls but run on the server • Divided into separate classes: • HTMLInputControl • HTMLContainerControl

  4. HTML Server Controls

  5. In HTML documents, client-side controls (i.e. scripts or procedures executing in JavaScript or VbScript) have events such as onClick and onChange Associated with HTML client controls When an HTML Server control value has changed, the OnServerChange or OnServerClick event occurs HTML Control Client-Side vs. Server-Side Event Handlers

  6. Line continuation characters The Line Continuation Character • When writing code, never press <Enter> key in the middle of a statement within code behind the page • Underscore (_) key preceded by a blank space allows the statement to be continued on next line • Example: lblMaturity.InnerHtml = sngInvestment _ * (1 + sngRate / 36000) _ ^ (360 * intYears) • (Single-line statement)

  7. Concatenation • Joining of two or more strings into a single string using either of the operators "&" or "+" • Formats: String1 & String2 -or- String3 + String4 • Examples: strString = "Welcome to " & "ASP.NET" • Stores "Welcome to Visual Basic" into strString lblArithmetic.InnerHtml = "11 + 7 = " _ & 11 + 7 • Stores "11 + 7 = 18" into lblArithmetic.InnerHtml

  8. Controls that support the OnServerChange event: HTMLInputCheckBox HTMLInputRadioButton HTMLInputHidden HTMLInputText HTMLTextArea HTMLSelect Controls that support the OnServerClick event: HTMLInputImage HTMLAnchor HTMLButton HTMLForm HTML Server Control Event Handlers

  9. Starting a New Web Form • Select Project from the menu bar • Select Add Web Form… from the Project menu • The "Web Form" icon will already be selected in the Templates: frame of the "New Item" dialog window • Type the Name: for the new file • The extension ".aspx" will be added automatically when the file is created • Click the <Open> button

  10. HTMLButton.aspx

  11. Properties • Properties of the individual controls can be changed through "Properties" window • The Style property (attribute) is modified using Style Builder dialog window (same as for style sheets) • Additionally many properties can be changed by adding statements to the code behind the page • When page loads, or when an event occurs, such as a button click • Properties frequently are not the same for HTML server controls and ASP.NET server controls

  12. "Font" Properties in Style Builder

  13. "Position" Properties in Style Builder

  14. HTMLButton.aspx (Page 1) • Add the image header.jpg • Style property—Position tab • Top=0; Left=0 • Add the image menu.gif • Style property—Position tab • Top = 85; Left = 17 • Add the image waterfordgifts.jpg • Style property—Position tab • Top = 38; Left = 134

  15. The ID and Name Properties • The ID property is used to identify the control to the server for server-side processing • The Name property identifies the control to scripts running on the client side

  16. HTMLButton.aspx (Page 2) • Add a Label from the "HTML" tab in the Toolbox • Set attribute "runat = server" (right-click and select command Run as Server Control) • ID—lblTitle • Name—(we will not be setting this property) • Style • Font (Family=Trebuchet MS; Size=15) • Position (Top=243; Left=139; Height=26; Width=365) • Modify text by typing—"Select the gender of the gift recipient"

  17. HTMLButton.aspx (Page 3) • Add a Button from the "HTML" tab in the Toolbox • Set attribute "runat=server" • ID—btnMale • Style (Top=278; Left=138; Height=27; Width=89) • Value—"Male" • Add a Button from the "HTML" tab in the Toolbox • Set attribute "runat=server" • ID—btnFemale • Style (Top=310; Left=138; Height=27; Width=89) • Value—"Female"

  18. HTMLButton.aspx (Page 4) • Add a Label from the "HTML" tab in the Toolbox • Set attribute "runat = server" • ID—lblGiftIdeasWomen • Style • Font (Family=Trebuchet MS; Size=12) • Position (Top=275; Left=235; Height=210; Width=250)

  19. HTMLButton.aspx (Page 5) • Label—lblGiftIdeasWomen • Create a bulleted list— • Make-Up Brush • Tyrone Bell • Butterfly • Balmoral Vase • Abbey Clock • Heart-Shaped Ring Holder • Wellsley Picture

  20. HTMLButton.aspx (Page 6) • Add a Label from the "HTML" tab in the Toolbox • Set attribute "runat = server" • ID—lblGiftIdeasMen • Style • Font (Family=Trebuchet MS; Size=12) • Position (Top=275; Left=235; Height=210; Width=250) (Wait to set the Left position until all text is entered)

  21. HTMLButton.aspx (Page 6) • Label—lblGiftIdeasMen • Create a bulleted list— • Golf Ball • Golf Club • Male Golfer • Letter Opener • Business Card Holder • Shamrock Paperweight

  22. Procedures • A procedure (Sub or Function)is a named grouping of one or more programming statements • Create an event Sub procedure by double-clicking on the object in Design mode • The Page_Load event occurs when the web page loads into the browser • Example: Private Sub Page_Load( … ) Handles MyBase.Load lblGiftIdeasMen.Visible = False lblGiftIdeasWomen.Visible = False End Sub

  23. The ServerClick Event • Occurs when an HTML Server Button (HTML Button with runat=server attibute set) is clicked • Equivalent of Click event in VB .NET, but for an ASP.NET Web Server control • Example: Private Sub btnMale_ServerClick( … ) Handles btnMale.ServerClick … End Sub

  24. The InnerHtml Property • Modifies the contents of an HTML Label (or other) control • May include HTML tags for formatting of the text • The Label is converted to a <div> tag with inserted text in the rendering of an HTML document • Example: lblTitle.InnerHtml = "<b>We have lots of gift ideas for men.</b>" • The InnerText property (similar to InnerHtml) may only contain text elements, not formatting tags

  25. HTMLButton.aspx—Page_Load Private Sub Page_Load( … ) Handles MyBase.Load lblGiftIdeasMen.Visible = False lblGiftIdeasWomen.Visible = False End Sub

  26. HTMLButton.aspx—btnMale_ServerClick Private Sub btnMale_ServerClick( … ) Handles btnMale.ServerClick lblTitle.InnerHtml = "<b>We have lots of gift ideas for men.</b>" lblGiftIdeasMen.Visible = True lblGiftIdeasWomen.Visible = False End Sub

  27. HTMLButton.aspx—btnFemale_ServerClick Private Sub btnFemale_ServerClick( … ) Handles btnFemale.ServerClick lblTitle.InnerHtml = "<b>We have lots of gift ideas for women.</b>" lblGiftIdeasWomen.Visible = True lblGiftIdeasMen.Visible = False End Sub

  28. HTML Image Button (Page 1) • An image is displayed on the Button instead of text • By default the image docks to the all sides on the button, so it stretches if the button is resized • There actually is no Image Button in the HTML tab of the Toolbox • Drop and drag an HTML Button from the Toolbox • Then key the type attribute in the input tag, i.e. <input type="image">

  29. HTML Image Button (Page 2) • The src attribute names the path and filename of the image file displayed on the Button, i.e. <input type="image" src="male.gif"> • No value attribute is required since image replaces the text on the button • All other functioning is the same as the HTML Button control

  30. HTMLImageButton.aspx

  31. HTMLImageButton.aspx • btnMale <input type="image" src="images/male.gif"> • btnFemale <input type="image" src="images/female.gif">

  32. The Value Property for a Text Field • Retrieves or modifies the values from HTML text field (text box) controls • The value attribute can be used to set the default value for input controls such as a one-line text field or password box • Used for HTML form controls rather than the Text property of ASP.NET server controls • Examples: • txtUserName.Value • txtPassword.Value

  33. HTML Button Controls • Buttons usually call procedures when clicked • Available are Submit, Reset, and the general Button • Member of the HTMLInputControl Class, i.e. • <input type = "Submit"> • <input type = "Reset"> • Resets Form to default so runat="server" not applicable • <input type = "Button"> • Default procedure for HTML Buttons is ServerClick event, i.e Private Sub btnSubmit_ServerClick( … ) Handles btnSubmit.ServerClick

  34. HTMLInputButton.aspx

  35. HTMLInputButton.aspx (Page 1) • Add Text Field from "HTML" tab in Toolbox • Set attribute "runat = server" • ID—txtUsername • Style (Top=280; Left=145) • Add Password Field from "HTML" tab in Toolbox • Set attribute "runat = server" • ID—txtPassword • Style (Top=310; Left=145)

  36. HTMLInputButton.aspx (Page 2) • Add Submit Button from "HTML" tab in Toolbox • Set attribute "runat = server" • ID—btnSubmit • Style (Top=345; Left=150) • Value—"Sign In" • Add Reset Button from "HTML" tab in Toolbox • ID—btnReset • Style (Top=345; Left=230)

  37. HTMLInputButton.aspx (Page 3) • Add a Button from "HTML" tab in Toolbox • Set attribute "runat = server" • ID—btnHelp • Style (Top=345; Left=450) • Value—"Help"

  38. HTMLInputButton.aspx—Page_Load Private Sub Page_Load( … ) Handles MyBase.Load lblTitle.InnerText = "Please log into our Customer Support Area" lblHelp.Visible = False btnHelp.Visible = True End Sub

  39. HTMLInputButton.aspx—Page_Load (Page 1) Private Sub btnSubmit_ServerClick( … ) Handles btnSubmit.ServerClick lblHelp.Visible = False If txtUsername.Text = "Course" And txtPassword.Text = "Technology" Then lblTitle.InnerText = "You are authenticated"

  40. HTMLInputButton.aspx—Page_Load (Page 2) Else lblTitle.InnerText = "Please click on the Help button for help!" txtUsername.Text = "" txtPassword.Text = "" btnHelp.Visible = True End If End Sub

  41. HTMLInputButton.aspx—btnHelp_ServerClick Private Sub btnHelp_Server_Click( … ) Handles btnHelp.ServerClick lblTitle.InnerText = "Please log into our Customer Support Area" lblHelp.Visible = True btnHelp.Visible = False End Sub

  42. HTML Radio Button, Dropdown List, and Hyperlink Server Controls • CheckBoxes, RadioButtons and DropDown lists • Form fields that allow users to select from lists of options • Can retrieve their values using properties of the HTML form control • Hyperlinks • Allow you to create links to other pages or to internal targets within the same page

  43. The Checked Property of RadioButtons • Determines which RadioButton is Checked: If rdBridal.Checked = True Then lblTitle.InnerHtml = "Celebrate your Wedding!" imgTop.Src = "images/28.jpg" End If • Or: If rdBridal.Checked Then lblTitle.InnerHtml = "Celebrate your Wedding!" imgTop.Src = "images/28.jpg" End If

  44. The RadioButton HTML Server Control

  45. Dropdown HTML Server Control • Created with the HTML <select> tag • <option> tags create each individual item • A value attribute can be associated with each item in the list • SelectedIndex property of the drop-down list box • A zero-based index indicating which item is selected • When nothing has been selected the SelectedIndex property returns the value -1 • The Add method add items to the list dynamically in code when the page loads, or when an event occurs

  46. The IsPostback Page Property • Determines if the user has visited page before during the current session • Important to know so that statements that initialize the page do not run again if page is revisited • The _doPostBack function is generated automatically by ASP.NET • Passes to the Web server information concerning the object that called an event and parameters passed to it • The Boolean IsPostBack property recognizes if the page was visited previously from this information

  47. The IsPostback Page Property and the Add Method of the Select Control • Example: If Not Me.IsPostBack Then lblTitle.InnerHtml() = _ "Select gender of gift recipient." imgProduct.Visible = False ProductList.Visible = False CatList.Items.Add("Gifts for Men") CatList.Items.Add("Gifts for Women") End If

  48. Dropdown HTML Server Control

  49. Anchors (Hyperlinks) • Creates a hyperlink to another Web document • Example: <a href="http://www.tarastore.com" id="AMale" name="AMale" runat="server">Men</a> • The HRef property can change the URL for an <a> tag in the code behind the page, i.e. AMale.HRef = "GiftsForMen.aspx" AFemale.HRef = "GiftsForWomen.aspx" AHome.HRef = "http://www.tarastore.com"

  50. The Hyperlink Control

More Related