ASP.NET Web Controls

Learning Outcomes Designing Web page. Understanding asp.net Web controls. Understanding absolute and relative positioning. Running a Web page and Web site.

Designing the Page To add controls to the page, you can drag and drop them from the Toolbox onto the Web Form in Design mode. Like the Web Form itself, each control is an object that has properties, methods and events. You can type text directly on a Web Form at the cursor location or insert XHTML elements using menu commands.

Toolbox in Visual Web Developer Figure 1 (a) displays the beginning of the Standard list of web controls. Figure 1 (b) displays the remaining web controls, as well as the list of Data controls used in ASP.NET. Fig. 1 | Toolbox in Visual Web Developer.

Web Controls Controls and other elements are placed sequentially on a Web Form. The cursor indicates the point at which text and XHTML elements will be inserted. You can drop the control at a specific position within the existing elements and rearrange existing controls using drag-and-drop actions.

Fig. 2 | Commonly used web controls. Figure 2 summarizes several web controls. Fig. 2 | Commonly used web controls.

Web Controls (Cont.) The positions of controls and other elements are relative to the Web Form’s upper-left corner. This type of layout is known as relative positioning. An alternate type of layout is known as absolute positioning, in which controls are located exactly where they are dropped on the Web Form. You can enable absolute positioning in Design mode in the HTML Designer > CSS Styling node of the Options dialog.

Portability Tip Absolute positioning is discouraged, because pages designed in this manner may not render correctly in different browsers or on computers with different screen resolutions and font sizes. This could cause absolutely positioned elements to overlap each other or display off-screen, requiring the client to scroll to see the full page content.

Creating and Running a Simple Web-Form Example To add the text to the Web Form, click within the gray rectangle at the top of the Web Form in Design mode. Type Current time on the web server:. Visual Web Developer is a WYSIWYG (What You See Is What You Get) editor—the IDE converts changes made in Design mode into markup. Highlight the text you added. From the Block Format drop-down list, choose Heading 2. Finally, click to the right of the text and press the Enter key to move the cursor to a new paragraph. The IDE should now look like Fig. 1.

Fig. 1| WebTime.aspx after inserting text and a new paragraph. Block Format drop-down list Cursor position after inserting a new paragraph by pressing Enter Fig. 1| WebTime.aspx after inserting text and a new paragraph.

Creating and Running a Simple Web-Form Example (Cont.) Place a Label on a Web Form either by dragging and dropping or by double clicking the Toolbox’s Label control. Using the Properties window, set the (ID) property of the Label to timeLabel. Delete timeLabel’s text, because we set it programmatically in the code-behind file. When a Label does not contain text, the name is displayed in square brackets in the Web Forms Designer (Fig. 2).

Creating and Running a Simple Web-Form Example (Cont.) Set timeLabel’s BackColor, ForeColor and Font-Size properties to Black, Yellow and XX-Large, respectively. Set the Label’s EnableViewState property to False. Finally, select DOCUMENT from the drop-down list in the Properties window and set the Web Form’s Enable­SessionState property to False.

Fig. 2| WebTime.aspx after adding a Label and setting its properties.

Adding Page Logic Open WebTime.aspx.cs by double clicking its node in the Solution Explorer. Add a Page_Init event handler to the code-behind file. Page_Init programmatically sets the text of time­Label to the current time on the server.

Running the Program You can view the Web Form several ways. You can select Debug > Start Without Debugging, which runs the application by opening it in a browser window. To debug your application, you can select Debug > Start Debugging. You cannot debug a web application unless debugging is explicitly enabled by the web.config file. To view a specific ASPX file, you can right click either the Web Forms Designer or the ASPX file name and select View In Browser. Finally, you can run your application by opening a browser window and typing the web page’s URL in the Address field.

Running the Program (Cont.) ASP.NET compiles your web page whenever it changes between HTTP requests. You can manually compile a web page or an entire website by selecting Build Page or Build Site, respectively, from the Build menu.

Windows Firewall Settings For security reasons, Windows Firewall does not allow remote access to a web server on your local computer by default. You can change this using the Windows Firewall utility in the Windows Control Panel.