1 / 41

Mastering Web Controls for ASP.NET Applications

Learn about ASP.NET objects, Web Forms, Web Controls, and how to create interactive web pages using Web Controls in ASP.NET. Explore common controls and examples of form design.

shooks
Download Presentation

Mastering Web Controls for ASP.NET Applications

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 Controls Dr. Awad Khalil Computer Science & Engineering Department AUC

  2. Commonly Used ASP.NET Objects • An ASP.NET application when compiled, actually defines a class. • The class inherits from class Page, provided by the .NET Framework. • By inheriting from the Page class, the ASP.NET application gains access to several built-in objects that enable programmers to communicate with a Web browser, gather data sent by an HTTP request and distinguish between users.

  3. Web Forms • ASPX files are usually referred to as Web Forms or Web Form Pages because they normally process form input. • Data entered into a form can be sent to the server, processed, then sent back to the client in different format. • The first time a Web form is requested, the entire page is compiled. Later requests are served from the compiled page and do not have to be recompiled. • Technically, any text file with an .aspx extension is an ASP.NET WebFormpage. • Any pure HTML page can be given an .aspx extension and run as an ASP.NET page. • Programmers customize Web Forms by adding Webcontrols, which include labels, textboxes, images, buttons and other GUI components.

  4. Web Controls • Web controls normally have the attribute runat= “server” and are included within an ASP.NET Web Form designated by the <form> tag. • There are four types of Web controls: • XHTML server controls • Programmable HTML elements run on the server • Web server controls • Form-like controls such as drop-down lists and text boxes • Validation controls (validators) • Required field validator • Range validator • User controls • Created by programmer

  5. Web Controls

  6. Web Controls

  7. Using Web Controls • The following table shows the most commonly used Web controls in the standard section of the Toolbox.

  8. Text and Graphics Controls • The following example shows a simple form for gathering user input. This examples uses all the most commonly used Web controls except Label, which we used in the previous example. • All the code of this example was generated by Web Forms Designer in response to actions performed in Design mode. • This example does not contain any functionality – i.e., no action occurs when the user clicks Register. In successive examples, we demonstrate how to add functionality to many of these Web controls.

  9. WebControls.aspx • <%-- WebControls.aspx --%> • <%-- Registration form that demonstrates Web controls. --%> • <%@ Page Language="C#" AutoEventWireup="true" • CodeFile="WebControls.aspx.cs" Inherits="WebControls" • EnableSessionState="False" %> • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" • "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml" > • <head id="Head1" runat="server"> • <title>Web Controls Demonstration</title> • </head> • <body> • <form id="form1" runat="server"> • <div> • <h3>This is a sample registration form.</h3> • <p><em>Please fill in all fields and click Register.</em></p>

  10. <p> • <asp:Image ID="UserInformationImage" runat="server" • ImageUrl="~/Images/user.png" EnableViewState="False" /> • &nbsp; • <span style="color: teal"> • Please fill out the fields below.</span> • </p> • <table> • <tr> • <td style="width: 230px; height: 21px" valign="top"> • <asp:Image ID="FirstNameImage" runat="server" • ImageUrl="~/Images/fname.png" • EnableViewState="False" /> • <asp:TextBox ID="FirstNameTextBox" runat="server" • EnableViewState="False"></asp:TextBox> • </td> • <td style="width: 231px; height: 21px" valign="top"> • <asp:Image ID="LastNameImage" runat="server" • ImageUrl="~/Images/lname.png"

  11. EnableViewState="False" /> • <asp:TextBox ID="LastNameTextBox" runat="server" • EnableViewState="False"></asp:TextBox> • </td> • </tr> • <tr> • <td style="width: 230px" valign="top"> • <asp:Image ID="EmailImage" runat="server" • ImageUrl="~/Images/email.png" • EnableViewState="False" /> • <asp:TextBox ID="EmailTextBox" runat="server" • EnableViewState="False"></asp:TextBox> • </td> • <td style="width: 231px" valign="top"> • <asp:Image ID="PhoneImage" runat="server" • ImageUrl="~/Images/phone.png" • EnableViewState="False" /> • <asp:TextBox ID="PhoneTextBox" runat="server" • EnableViewState="False"></asp:TextBox> • Must be in the form (555) 555-5555.

  12. </td> • </tr> • </table> • <p> • <asp:Image ID="PublicationsImage" runat="server" • ImageUrl="~/Images/publications.png" • EnableViewState="False" /> • &nbsp; • <span style="color: teal"> • Which book would you like information about?</span> • </p> • <p> • <asp:DropDownList ID="BooksDropDownList" runat="server" • EnableViewState="False"> • <asp:ListItem>Visual Basic 2005 How to Program 3e • </asp:ListItem> • <asp:ListItem>Visual C# 2005 How to Program 2e • </asp:ListItem> • <asp:ListItem>Java How to Program 6e </asp:ListItem> • <asp:ListItem>C++ How to Program 5e</asp:ListItem>

  13. <asp:ListItem>XML How to Program 1e</asp:ListItem> • </asp:DropDownList> • </p> • <p> • <asp:HyperLink ID="BooksHyperLink" runat="server" • NavigateUrl="http://www.deitel.com" Target="_blank" • EnableViewState="False"> • Click here to view more information about our books • </asp:HyperLink> • </p> • <p> • <asp:Image ID="OSImage" runat="server" • ImageUrl="~/Images/os.png“ EnableViewState="False"/> • &nbsp; • <span style="color: teal"> • Which operating system are you using?</span> • </p>

  14. <p> • <asp:RadioButtonList ID="OperatingSystemRadioButtonList" • runat="server" EnableViewState="False"> • <asp:ListItem>Windows XP</asp:ListItem> • <asp:ListItem>Windows 2000</asp:ListItem> • <asp:ListItem>Windows NT</asp:ListItem> • <asp:ListItem>Linux</asp:ListItem> • <asp:ListItem>Other</asp:ListItem> • </asp:RadioButtonList> • </p> • <p> • <asp:Button ID="RegisterButton" runat="server" • Text="Register" EnableViewState="False" /> • </p> • </div> • </form> • </body> • </html>

  15. WebControls.aspx • Before discussing the Web controls used in this ASPX file, we explain the XHTML that creates the layout of the page. • The page contains an h3 heading element (line 17), followed by a series of additional XHTML blocks. We place most of the Web controls inside p elements (i.e., paragraph), but we use an XHTML table element (lines 26-60) to organize the Image and TextBox controls in the user information section of the page. • In the previous example, we described how to add heading elements and paragraphs visually without manipulating any XHTML in the ASPX file directly. Web Forms Designer allows you to add a table in a similar manner.

  16. Adding an XHTML Table to a Web Form • To create a table with two rows and two columns in Design mode, select the InsertTable command from the Layout menu. In the InsertTable dialog that appears, make sure the Custom radio button is selected. • In the Layout group box, change the values of the Rows and Columns combo box to 2. by default, the contents of a table cell are aligned vertically in the middle of the cell. We changed the vertical alignment of all cells in the table by clicking the Cell Properties… button, then selecting top from the Verticalalign combo box in the resulting dialog. This causes the content of each table cell to align with top of the cell. • Click OK to close the Cell Properties dialog, then click OK to close the InsertTable dialog and create the table. Once a table is created, controls and text can be added to particular cells to create a neatly organized layout.

  17. Setting the Color of Text on a Web Form • Notice that some of the instructions to the user on the form appear in a teal color. • To set the color of a specific piece of text, highlight the text and select Format> Foreground color…. In the ColorPicker dialog, click the NamedColors tab and choose a color from the palette shown. • Click OK to apply the color. • Note that the IDE places the colored text in an XHTML span element and applies the color using the span’sstyle attribute.

  18. Examining Web Controls on a Sample Registration Form • Lines 20-21 define an Image control, which inserts an image into a Web page. The ImageUrl property (line 21) specifies the location of the image to display in the Image control. To select an image, click the ellipsis next to the ImageUrl property in the Properties window and use the SelectImage dialog to browse for the desired image in the project’s Images folder. • When the IDE fills in the ImageUrl property based on your selection, it includes a tilde and forward slash (~/) at the beginning of the ImageUrl – this indicates that the Images folder is in the root directory of the project (i.e., http://localhost/WebControls, whose physical path is C:\Inetpub\wwwroot\WebControls).

  19. Examining Web Controls on a Sample Registration Form • Lines 26-60 contain the table element created by the steps discussed previously. • Each td element contains an Image control and a TextBox control, which allows you to obtain text from the user and display text to the user. For example, lines 32-33 define TextBox control used to collect the user’s first name. • Lines 70-79 define a DropDownList. This control is similar to ComboBox Windows control. When a user clicks the drop-down list, it expands and displays a list from which the user can make a selection. • Each item in the drop-down list is defined by a ListItem element (lines 72-78).

  20. Examining Web Controls on a Sample Registration Form • After dragging a DropDownList control onto a Web Form, you can add items to it using ListItemCollectionEditor. This process is similar to customizing a ListBox in a Windows application. • In IDE, you can access the ListItemCollectionEditor by clicking the ellipsis next to the Items property of the DropDownList . It can also be accessed using the DropDownListTasks menu, which is opened by clicking the small arrowhead that appears in the upper-right corner of the control in Design mode. This menu is called a smarttagmenu. Visual Studio displays smart tag menus for many ASP.NET controls to facilitate performing common tasks. • Clicking EditItems… in the DropDownListtasks menu opens the ListItemCollectionEditor, which allows you to add ListItem elements to the DropDownList.

  21. Examining Web Controls on a Sample Registration Form • The HyperLink control (lines 82-86) adds a hyperlink to a Web page. The NavigateUrl property (line 83) of this control specifies the resource (i.e., http://www.deitel.com) that is requested when a user clicks the hyperlink. • Setting the Target property to _blankspecifies that the requested Web page should open in a new browser window. By default, HyperLink controls cause pages to open in the same browser window. • Lines 96-103 define a RadioButtonList control, which provides a series of radio buttons from which the user can select only one. Like options in a DropDownList, individual radio buttons are defined by ListItem elements. Note that, like the DropDownListTasks smart tag menu, the RadioButtonListTasks smart tag menu also provides an EditItems… link to open the ListItemCollectionEditor.

  22. Examining Web Controls on a Sample Registration Form • The final Web control is a Button (lines 106-107). • Like a Button Windows control, a Button Web control represents a button that triggers an action when clicked. • A Button Web control typically maps to an input XHTML element with attribute type set to “button”. • As stated earlier, clicking the Register button in this example does not do anything.

  23. Using AdRotator Control • Web pages often contain product or service advertisement, which usually consist of images. • Although Web site authors want to include as many sponsors as possible, Web pages can display only a limited number of advertisements. • To address this problem, ASP.NET provides the AdRotator Web control for displaying advertisements. • Using advertisement data located in XML file, the AdRotator control randomly selects an image to display and generates a hyperlink to the Web page associated with that image. • Browsers that do not support images display alternate text that is specified in the XML document. • If a user clicks the image or substituted text, the browser loads the Web page associated with that image.

  24. Using AdRotator Control • The following example demonstrates the AdRotator Web control. • In this example, the “advertisements” that we rotate are flags of 10 countries. When a user clicks the displayed flag image, the browser is redirected to a Web page containing information about the country that the flag represents. If a user refreshes the browser or requests the page again, one of the eleven flags is again chosen at random and displayed. • The ASPX file of the example contains XHTML text (i.e., the h3 element in line 17) and AdRotator control named countryRotator (lines 19-21). • This page also contains an XmlDataSource control (lines 22-24), which supplies the data to the AdRotator control. • The background attribute of the page’s body element (line 14) is set to display the image background.png, located in the project’s Images folder. To specify this file, click the ellipsis provided next to the Background property of DOCUMENT in the Properties window and use the resulting dialog to browse for background.png. • You do not need to add any code to the code-behind file, because the AdRotator control does “all the work.”

  25. FlagRotator.aspx • <%-- FlagRotator.aspx --%> • <%-- A Web Form that displays flags using an AdRotator control. --%> • <%@ Page Language="C#" AutoEventWireup="false" • CodeFile="Flagrotator.aspx.cs" Inherits="FlagRotator" • EnableSessionState="False" %> • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" • "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml" > • <head id="Head1" runat="server"> • <title>Flag Rotator</title> • </head> • <body background="Images/background.png">

  26. FlagRotator.aspx • <form id="form1" runat="server"> • <div> • <h3>AdRotator Example</h3> • <p> • <asp:AdRotator ID="countryRotator" runat="server" • DataSourceID="adXmlDataSource" • EnableViewState="False" /> • <asp:XmlDataSource ID="adXmlDataSource" runat="server" • DataFile="~/App_Data/AdRotatorInformation.xml"> • </asp:XmlDataSource> • </p> • </div> • </form> • </body> • </html>

  27. FlagRotator.aspx

  28. FlagRotator.aspx

  29. FlagRotator.aspx

  30. Connecting Data to an AdRotator Control • An AdRotator control accesses an XML file to determine what advertisement (i.e., flag) image, hyperlink URL and alternate text to display and include in the page. • To connect the AdRotator control to the XML file, we create an XmlDataSource control – one of several ASP.NET data controls (found in the Data section of the ToolBox) that encapsulate data sources and make such data available for Web controls. • An XmlDataSource references an XML file containing data that will be used in an ASP.NET application. • To build this example, we first add the XML file AdRotatorInformation.xml to the project. Each project in Visual Studio contains an App_Data folder, which is intended to store all the data used by the project.

  31. FlagRotator.aspx • Right click this folder in the SolutionExplorer and select AddExistingItem…, then browse for AdRotatorInformation.xml to add it. • After adding the XML file to the project, drag an AdRotator control from the ToolBox to the Web Form. The AdRotatorTasks smart tag menu will open automatically. • From this menu, select <NewDataSource…> from the ChooseDataSource drop-down list to start the DataSourceConfigurationWizard. Select XMLFile as the data-source type. This causes the wizard to create an XmlDataSource with the ID specified in the bottom half of the wizard dialog. We set the ID of the control to adXmlDataSource. • Click OK in the DataSourceConfigurationWizard dialog. • The ConfigureDataSource – adXmlDataSource dialog appears next.

  32. FlagRotator.aspx • In this dialog’s DataFile section, click Browse… and, in the SelectXMLFile dialog, locate the XML file you added to the App_data folder. • Click OK to exit this dialog, then click OK to exit the Configure Data Source – adXmlDataSourcedialog. • After completing these steps, the AdRotator is configured to use the XML file to determine which advertisements to display.

  33. AdRotatorInformation.xml • <?xml version="1.0" encoding="utf-8"?> • <!-- Fig. 21.19: AdRotatorInformation.xml --> • <!-- XML file containing advertisement information. --> • <Advertisements> • <Ad> • <ImageUrl>Images/france.png</ImageUrl> • <NavigateUrl> • http://www.odci.gov/cia/publications/factbook/geos/fr.html • </NavigateUrl> • <AlternateText>France Information</AlternateText> • <Impressions>1</Impressions> • </Ad>

  34. <Ad> • <ImageUrl>Images/germany.png</ImageUrl> • <NavigateUrl> • http://www.odci.gov/cia/publications/factbook/geos/gm.html • </NavigateUrl> • <AlternateText>Germany Information</AlternateText> • <Impressions>1</Impressions> • </Ad> • <Ad> • <ImageUrl>Images/italy.png</ImageUrl> • <NavigateUrl> • http://www.odci.gov/cia/publications/factbook/geos/it.html</NavigateUrl> • <AlternateText>Italy Information • </AlternateText> • <Impressions>1</Impressions> • </Ad>

  35. <Ad> • <ImageUrl>Images/spain.png</ImageUrl> • <NavigateUrl> • http://www.odci.gov/cia/publications/factbook/geos/sp.html • </NavigateUrl> • <AlternateText>Spain Information</AlternateText> • <Impressions>1</Impressions> • </Ad> • <Ad> • <ImageUrl>Images/latvia.png</ImageUrl> • <NavigateUrl> • http://www.odci.gov/cia/publications/factbook/geos/lg.html • </NavigateUrl> • <AlternateText>Latvia Information</AlternateText> • <Impressions>1</Impressions> • </Ad>

  36. <Ad> • <ImageUrl>Images/peru.png</ImageUrl> • <NavigateUrl> • http://www.odci.gov/cia/publications/factbook/geos/pe.html • </NavigateUrl> • <AlternateText>Peru Information</AlternateText> • <Impressions>1</Impressions> • </Ad> • <Ad> • <ImageUrl>Images/senegal.png</ImageUrl> • <NavigateUrl> • http://www.odci.gov/cia/publications/factbook/geos/sg.html • </NavigateUrl> • <AlternateText>Senegal Information</AlternateText> • <Impressions>1</Impressions> • </Ad>

  37. <Ad> • <ImageUrl>Images/sweden.png</ImageUrl> • <NavigateUrl> • http://www.odci.gov/cia/publications/factbook/geos/sw.html • </NavigateUrl> • <AlternateText>Sweden Information</AlternateText> • <Impressions>1</Impressions> • </Ad> • <Ad> • <ImageUrl>Images/thailand.png</ImageUrl> • <NavigateUrl> • http://www.odci.gov/cia/publications/factbook/geos/th.html • </NavigateUrl> • <AlternateText>Thailand Information</AlternateText> • <Impressions>1</Impressions> • </Ad>

  38. <Ad> • <ImageUrl>Images/unitedstates.png</ImageUrl> • <NavigateUrl> • http://www.odci.gov/cia/publications/factbook/geos/us.html • </NavigateUrl> • <AlternateText>United States Information</AlternateText> • <Impressions>1</Impressions> • </Ad> • </Advertisements>

  39. Examining AdRotatorInformation.xml • XML document AdRotatorInformation.xml – or any XML document used with an AdRotator control – must contain one Advertisements root element (lines 4-94). • Within that element can be several Ad elements (e.g., lines 5-12), each of which provides information about a different advertisement. • Element ImagrUrl (line 6) specifies the path (location) of the advertisement’s image, and element NavigateUrl (lines 7-9) specifies the URL for the Web page that loads when a user clicks the advertisement. • Note that the XML file cannot contain any whitespace before or after the URL in the NavigateUrl element, or the whitespace will be considered part of the URL, and the page will not load properly.

  40. Examining AdRotatorInformation.xml • The AlternateText element (line 10) nested in each Ad element contains text that displays in place of the image when the browser cannot locate or render the image for some reason (i.e., the file is missing, or the browser is not capable of displaying it). • The AlternateText element’s text is also a tooltip that InternetExplorer displays when a user places the mouse pointer over the image. • The impressions element (line 56) specifies how often a particular image appears, relative to the other images. An advertisement that has a higher Impressions value displays more frequently than an advertisement with a lower value. In our example, the advertisements display with equal probability, because the value of each Impressions element is set to 1.

More Related