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'

Hello World (Somewhat)

Lets start by opening Visual Studio. Please note that during this I am using Visual Studio 2010 Professional. You should be able to follow these posts using Visual Studio 2010 Web Express or Visual Studio 2008 Professional, but some of the code might be different.

After Visual Studio is open, go to the "File" menu and select "New Web Site..."

New Web Site under the File Menu

After you click "New Web Site..." the "New Web Site" dialog will appear:

The New Website dialog.

Visual Studio provides a few options when creating a new web site. You can choose the location where you want your web site saved, the language you want to use, such as C# or VB.NET and the project template you want to use. I just saved this website in a new folder called "HelloWord". Name yours whatever you want. Select the language you are most comfortable with and choose "ASP.NET Web Site" from the templates list and then "OK".

After a few moments Visual Studio will have created a new ASP.NET website for you in the location you decided. If look in your Solution Explorer you will find that Visual Studio has created a lot of web site files for you already. Just take a few moments to look through them and then go click the "Debug" menu then "Start Debugging" or press F5 on your keyboard. If you get a message asking to enable debugging, just click "OK". Your website should load in your default internet browser.

Congratulations! You just made your first ASP.NET web site (kind of). Later, we will work with some actual ASP.NET coding and start our own website from scratch, not using any pre-built web sites.

What is ASP.NET?

If research the definition of ASP.NET, you will most likely get the "ASP.NET is a web application framework..." on a lot of web pages. What that basically means is that somebody out there wrote a bunch of code and software that you don't have to write to make programs that run in your browser over the Internet. Pretty cool, I know.

There are other similar things to ASP.NET, most notably Adobe's ColdFusion product. The difference is ASP.NET is based off of Microsoft's Common Language Runtime (CLR), meaning that you can build an ASP.NET website using any .NET Framework supported language, like VB.NET and C# and other products generally only allow one programming language for the web application's functionality.

The structure of an ASP.NET web application is pretty straightforward. Each web form, or piece of your web application, contains two parts: the interface, or the website the user interacts with and a 'code-behind' page, which contains the source code that offers the website's functionality. The interface file is usually just controls and HTML to design the layout and structure of your web application, almost exactly like making websites with HTML and CSS. These files are saved with the ".aspx" extension. The code-behind page is a code module that sits 'behind' the .aspx file (interface) and provides the code functionality for the .aspx page, usually with the extention ".aspx.cs" for C# or ".aspx.vb" for VB.NET.

This is all fine and good, but doesn't mean much if you really have no idea of what is going on behind the scenes. If you are reading this blog, I'm sure you know about web servers, or maybe you don't, so I'll explain it (or try to). ASP.NET web applications exist on a web server that is running software that makes your ASP.NET web application available to users on the Internet, or on your local area network (LAN). The web server contains all the files necessary for your web application: all of the interface files (.aspx) and all of the code behind files that make your application work. When someone goes to your website from their browser, a request is sent to the web server. The web server processes the request and sends the results back to your browser. The request could have been to sign in, sign out, submit a comment or anything else that your web application can handle. A good example of a request is when you want to view information from a database. The web server handles the connections to the database and returns the result as HTML to your web browser. With this model, HTML files are generally the only thing sent back to your web browser. This means the code for your website is never sent to the user's web browser and is kept safely on the web server, provided your web server has security systems in place.

For more technical information on web servers and ASP.NET, please visit the following websites:
http://www.asp.net/ - The Official Microsoft ASP.NET Site
http://en.wikipedia.org/wiki/Web_server - Web server - Wikipedia, the free encyclopedia