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.