Setting Properties for Controls


Now that you ve had a chance to play around a little with the general editing capabilities of Web Matrix, let s get back to the controls we added to the Web Forms page earlier in the chapter. One of the most common tasks you ll perform with controls on your ASP.NET pages is to set their properties.

Set properties for the Button control

  1. Select the Button control and then in the Properties window at the bottom right, click the Properties tab.

    The Properties window shows a list of all the properties you can set for the button, such as BackColor, Text, and Width. Most of the properties aren t set, which is to say that they show default values.

    Tip 

    You can display properties either alphabetically or categorically. In the Properties window, click the Alphabetic button or the Categorized button to switch between views.

  2. Set the Button control s Text property to Click Me!

    When you finish typing and leave the Text property text box, the button caption changes in the designer.

  3. In the text box for the BackColor property, click the drop-down button to display a color picker that has three tabs for color choices. Pick a color. Do the same for the ForeColor property, and set it to a color that will be visible against the button s background.

Obviously, you re setting specific properties for a button control here, but the procedure is the same for setting properties for other controls as well. Alternatively, you can also set properties in the page itself declaratively by editing the tags in HTML view.

Set properties declaratively

  1. In the designer, click the HTML tab and take a look at the page.

    The HTML element for the button you ve been working with looks like the following:

    <asp:Button  runat="server" Text="Click Me!"         BackColor="#0000C0" ForeColor="Yellow"></ asp:Button> 

    Notice that the button control has the <asp:> prefix. Note also that this control has attributes, such as runat="server", that are definitely not HTML attributes. This control is called a server control. I ll explain server controls in the section Rendering Controls later in the chapter. For now, look at how the property settings actually appear as attributes of the button element. For example, you set the Text property in the Properties window; here this property shows up as Text="Click Me!".

    Note 

    By the way, you can use the Properties window to set properties for the page itself only when you re in HTML view of the designer. To set properties for controls in the Properties window, you have to be working in Design view.

  2. In HTML view, change the button s BackColor property to another color. For example, you can set it to black using the following code:

    BackColor="black"

    (For you HTML gurus, you could also write BackColor="#000000", just as you d expect.)

  3. Switch back to Design view. Is the button s background black? Check. When you select the button in the designer, check to see whether the Properties window shows that the BackColor property is black.

    In short, you can set properties for your controls and for the page in the Properties window when you re in Design view, and in the declarative element for the controls when you re in HTML view. I prefer using the Properties window to set properties because it has a list of the properties, which means you don t have to memorize them. The Properties window also validates your settings. For example, it won t let you set the BackColor value to naranja. And as you ve already seen, it has drop-down lists and other utilities to help you pick appropriate values.

  4. If you want, change the BackColor property back to whatever color you chose to begin with.

    Finally, we ll change the Text property of the Label control. Notice the Label control now says Label. This value isn t particularly useful; in fact, we want the label to say nothing at all for now, so let s clear the value.

Clear the text of the Label control

  1. In Design view, select the Label control.

  2. In the Properties window, backspace over the word Label in the Text property. Alternatively, in HTML view, delete the text between the opening and closing tags for the <asp:Label> element.

    In Design view, the Label control shows up as [Label1], so that you can see where the label is. The square brackets are a visual cue that you re not looking at the actual label text.




Microsoft ASP. NET Web Matrix Starter Kit
Microsoft ASP.NET Web Matrix Starter Kit (Bpg-Other)
ISBN: 0735618569
EAN: 2147483647
Year: 2003
Pages: 169
Authors: Mike Pope

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net