16.2 Displaying Server-Side Controls

You want to place server-side controls on a Web Form for an ASP .NET page .

Technique

The first thing you have to choose before placing Web Form controls is the type of page layout scheme to use by changing the pageLayout property. The two choices include FlowLayout and GridLayout . FlowLayout uses relative positioning for each control, which doesn't use traditional x and y coordinates for each control but instead positions each control relative to the control just placed. This type of layout follows the more traditional layout method used within HTML. GridLayout , on the other hand, uses absolute positioning, which follows the method used in Windows Forms. In this layout scheme, you can position controls anywhere on the Web Form and have an associated coordinate pair denoting the position of the control relative to the top-left coordinate of the form.

To create a server-side control, drag and drop a control from the Web Form Designer toolbox. The designer places the control relative to the last control placed on the page if in FlowLayout mode or places it at its drop location if using GridLayout . Once the control is placed, you can access and change any properties by using the Property Browser window. In most cases, you'll see that working with a Web Form control uses the same methods employed by Windows Forms controls. For instance, if you create a server-side button, change the text on the face of the button by changing the Text property. You can change the text color by specifying a value for the ForeColor property.

Comments

The ultimate goal of an ASP.NET page is to produce an HTML page that can be sent and rendered to the computer connected to the Web application. Each ASP.NET control must eventually produce an HTML representation of itself. The properties of an ASP.NET control translate to attributes on the corresponding HTML control that is produced. For instance, the ASP.NET code for a button containing a tooltip and a specified ForeColor appears as follows:

 <asp:Button id="Button1" runat="server" Text="This is a button" ForeColor="#0000C0" ToolTip="This is the tooltip"></asp:Button> 

When ASP.NET generates the final HTML page, the ForeColor property translates to a value within the style attribute and the Tooltip property is used for the title attribute:

 <input type="submit" name="Button1" value="This is a button" id="Button1" title="This is the tooltip" style="color:#0000C0;" /> 

The generated HTML page contains an HTML form to contain the controls as it's displayed to the user. As a user manipulates the control, certain controls might automatically cause the page to perform a post back. A post back is a round-trip operation in which the properties of each control are placed into a dictionary-based collection known as the ViewState and submitted as form data back to the Web application. Some controls such as buttons automatically generate a post-back event, although others don't because of the frequency with which a post back would occur. However, by changing the AutoPostBack property to true , you can cause a post back to occur. For example, the TextBox control does not generate a post back to occur whenever the text within the control changes. In this next recipe, you'll see how to create event handlers to respond to the events generated as the user interacts with the form.