News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

ASP.NET Tutorial – 07 – Web Controls

The web server controls are similar to the HTML controls in many ways, however they may represent more complex elements, instead of mapping directly to existing HTML tags.

Toolbox

To see a list of the web controls, switch over to design view in Visual Studio (View->Designer) and bring up the Toolbox window (View->Toolbox). The most commonly used web controls and HTML controls are listed in this window under the “Standard” and “HTML” tabs, respectively. In code view (View->Code), all of them can be found under the namespaces System.Web.UI.WebControls and System.Web.UI.HtmlControls.

Although the Toolbox’s list of web controls contains some rich controls, such as the Calendar, many of the simpler web controls overlap with the HTML controls. For example, there’s no functional difference between a web button control and its HTML control counterpart. They are both server side controls for the <button> element.

<asp:Button ID="myButton"  
               runat="server" 
               Text="Web Button" />
 
<button id="myHtmlButton" 
            runat="server">HTML Button</button>

This is really more of a convenience feature. The purpose of the HTML controls is to make it easier to migrate an HTML page to ASP.NET, whereas the web controls have more relation to the .NET Framework, so they offer more control from a programming standpoint.

Properties

The properties of the web controls differ greatly from those of the HTML controls. You can see this for yourself in design view if you bring out the Properties window (View->Properties Window) and add both an HTML button control and a Web button control to the document. To do this from design view, simply drag and drop the controls from the Toolbox to where you want them placed in the document. Double-clicking also works to position a control wherever the caret is located. Then, by selecting either control, you can see all of the properties relating to that control. The HTML control only has properties for setting the attributes of the corresponding HTML element, whereas the Web control has a completely different set of properties.

Design, Markup, and Code view

Exploring the properties in the way mentioned above is a great way to learn about the functionality of the ASP.NET controls. For example, if you add a CheckBox control to the document, you would quickly discover that its state is determined by the “Checked” property. This property can be changed either from design view, markup view, or code view. In design view, if you change the default state of the check box to “true” in the Properties window, the editor will add that property assignment to the control. To check this, switch back to viewing the markup (View->Markup). A Checked=”True” property will now have been added to the CheckBox control. You could just as well have added this property yourself from markup view, but making changes in the Designer is generally faster, easier, and less error prone.

<asp:CheckBox ID="CheckBox1" runat="server" Checked="True" />

The CheckBox’s property can of course be used from the code page as well (View->Code), both to get the property and to set it.

if (CheckBox1.Checked == true) // get property
  CheckBox1.Checked = false;   // set property
Recommended additional reading:
Sams - Teach Yourself ASP.NET 3.5 in 24 Hours