ASP.NET Controls

This post will illustrate some of the more common ASP.NET controls you will find in the Visual Studio toolbox. Although you can double click the icon in the toolbox to add the control to your web page, this post focuses on adding the controls through the code editor, or "Source" view.

It is good to remember that you can use any HTML, CSS, or any other web technologies inside your ASP.NET web application (web sites are web applications). This post just highlights how to achieve similar results of traditional HTML technologies using ASP.NET controls and classes.

A lot of the controls have the same, or similar, names to standard HTML controls, but they are prefixed by "asp:" and has a few minor syntax changes. Read below to see some of the differences.

Buttons
This is how we generally make a button in standard HTML:

1.   <button name="button">This is a button</button>

And, like you could guess it will have this output:


Now, in ASP.NET this would look like this:

1. <asp:Button ID="Button1" runat="server" Text="This is a button" />

If you look at the two code examples you will the differences in how to create a button from the syntax editor. The ASP.NET Button class has quite a few properties and events that you can play with. The list is too large to go into much depth in a generalized post, but you can access the MSDN Button Class information here, provided by Microsoft.

Checkboxes
In HTML, we are used to making buttons like this:

1. <input type="checkbox" name="acceptTerms" value="Terms" /> I accept these terms and conditions.<br />

And this would give this output:
I accept these terms and conditions.

ASP.NET Equivalent:

1.  <asp:CheckBox ID="Terms" runat="server" Text="I accept these terms and conditions" />

MSDN Checkbox Class information.

Drop down lists
In HTML, drop down lists, or select boxes as they 'were' called were created like so:

1. <select id="Select1">
2.         <option>One</option>
3.         <option>Two</option>
4.         <option>Three</option>
5. </select>

The above code is pretty simple and straightforward. We created an HTML select control named "Select1" with three items, or options: One, Two and Three. The drop down items of this list are defined between the <option> and </option> tags. If we added this code to a web site, we would end up with this:

One Two Three

Things are a little different when playing with the ASP.NET drop down list. The exact same thing in ASP.NET would look like this:

1. <asp:DropDownList ID="DropDownList1" runat="server">
2.         <asp:ListItem>One</asp:ListItem>
3.         <asp:ListItem>Two</asp:ListItem>
4.         <asp:ListItem>Three</asp:ListItem>
5. </asp:DropDownList>

MSDN DropDownList Class information.

Hyper Links
One of the nice things about HTML is that it is really easy to link to other pages. In HTML you do this using the anchor tag:

1. <a href="http://ibreakcode.blogspot.com/2011/01/aspnet-controls.html">ASP.NET Controls on I Break Code</a>

The above code will create a link to this blog post, like this:

ASP.NET Controls on I Break Code

Now, in ASP.NET:

1. <asp:HyperLink ID="HyperLink1" runat="server"
2.         NavigateUrl="http://ibreakcode.blogspot.com">I Break Code official blog</asp:HyperLink>

MSDN HyperLink Class information.

Images
In HTML, you can put images on your website using the image tag. In our example, we are going to use the URL of this blog's logo:

1.   <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF6eSY_2KPLII4vwWzDtgoThbWxrskjDU8zXjNpxQ2xCXJ3Qcf0hVdSetVQphcUQSWAvu-bH6KrZNo6Jy4XtQ3iElgFFktdlOUlF9kez5rlwZ1Nda8LeAqT4jM47gsGE8I_8QmrVZUPXv4/s1600/ibc2.png" />

This will make a nice image on your page that looks a lot this blog:


In ASP.NET:

1. <asp:Image ID="Image1" runat="server" ImageUrl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF6eSY_2KPLII4vwWzDtgoThbWxrskjDU8zXjNpxQ2xCXJ3Qcf0hVdSetVQphcUQSWAvu-bH6KrZNo6Jy4XtQ3iElgFFktdlOUlF9kez5rlwZ1Nda8LeAqT4jM47gsGE8I_8QmrVZUPXv4/s1600/ibc2.png" />

MSDN Hyperlink Class information.

The HTML Primer

Here is the code for a very basic xHTML compliant web page. There are a few things to note about the basic HTML page. It consists of two basic parts:

• The header
• The body

The header is the space that exists between the <head> and </head> tags. This space is generally used for meta-data information, scripting (such as JavaScript), styling (such as CSS), or linking, or referencing, to external styles or scripts. The header contains no web page content.

The body is the space that exists between the <body> and </body> tags. The body of the web page is used for formatting and displaying the actual web page content. This is where you create your headers, place images, link to other web sites, etc.

Also notice that the header and the body of the web page is nested within the <html> and </html> tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>Untitled Page</title> </head> <body>     <h1>This is the biggest heading.</h1>     <h2>This is also a heading.</h2>     <h3>And this</h3>     <h4>This also</h4>     <h5>Even this</h5>     <h6>And finally, this is the smallest heading.</h6>         This is a line<br />     with a line break.         <p>This is a paragraph nested within paragraph tags.</p>         </body> </html>

Some basic HTML components:

In the above code you will see the <title> tag. This specifies the title that will appear in your browsers title bar or the active tab if your browser is tabbed.

The <h1> tag is nothing more than a formatting tag. Headers are great for displaying a title for a specific block of content. Headers range in size from 1, being the largest, to 6, being the smallest.

The <br /> tag is a line break tag. This forces the browser to render everything after the break tag to render on a new line.

The <p> tag is called a paragraph tag. What this does is takes all the HTML inside the <p> and </p> tags and sets it down one blank line above and below any existing content.

I will not explain everything there is to know about HTML here, as you could devote an entire website to explaining HTML. And thankfully, somebody already did:

http://www.w3schools.com/html/default.asp - HTML Tutorial

http://www.w3schools.com/tags/default.asp - HTML 4.01 / XHTML 1.0 Reference

http://www.webmonkey.com/2010/02/html_cheatsheet/ - HTML Cheatsheet | Webmonkey | Wired.com

Search Google for 'html'