AspNet Webforms for Beginners

Introduction

Asp.Net is Microsoft's web development framework. It allows developers to build remarkably sophisticated, complex websites and is the technology behind a large number of the web's most prominent websites, including MySpace, EBay (using an older version of Asp), PageFlakes, and the websites of a large number of Fortune 500 companies. (Some of these companies' url's may not appear to be asp.net url's--but they've been remapped.)

Once mainly the choice of large, enterprise scale companies, a free version of the technology suitable for small companies and individuals now affords everybody the opportunity to develop corporate-quality web applications.

This article discusses the basics of Asp.Net Webforms. This is to be distinguished from the Asp.Net MVC framework comparable in many ways to Ruby on Rails (currently in beta).

What you'll need

Go to www.microsoft.com/express/vwd[1] and download "Microsoft Visual Web Developer Express." Beware, this is a hefty download. But once completed, you will have access to the finest free "programming program" (IDE) available. It comes with an excellent WYSIWYG HTML/CSS editor, a free MS SQl Database, and extensive documentation.

To use Visual Web Developer Express to design static web pages, you don't need any coding experience. This tutorial focuses on teaching you to place a control on a website using nothing more than wizards. But to use Asp.Net's power, you should be able to code HTML and CSS, SQL, and hopefully at least one other programming language. This tutorial is mainly intended for those with a basic grasp of web development, and who want to get a quick feel for Asp.Net.

You must use Windows (or bootcamp) to work with Asp.Net.

Steps

Setting up

After starting Visual Web Developer Express (VWD), select "File" on the top left corner, and choose "New Web Site." In the pop-up menu that appears, select "Asp.Net Web Site." Change the name of the website in the long drop-down list (beneath the main window) to "SampleSite." Under the "Language" drop-down list, select "Visual C#."

After a few seconds, VWD will create an empty Asp.Net website. First, click "Split" at the bottom of the screen. This will give you simultaneous access to your code, as well as a "design view" that visually represents the website you're making.

Asp.Net Controls

On the left hand side of the window, you'll see a "Toolbox." If it isn't already showing, click on the "Toolbox" tab. Then click on the pin in the window that appears, to fix this portion in place.

Asp.Net controls appear on a webpage--each web control changes the appearance of the web page, or adds a function to it. Typical controls are DropDownLists, Tables, Calendars, Adrotators, and login boxes. If you've ever logged in at EBay, the little box where you enter your name and password are Asp.Net controls.

To place a control on your new website, click "Split" at the bottom of the screen. You'll soon see that you have two views to work in. One shows code and is called "code view, the other is mostly blank and is "design view."

Some controls are nothing more than a link to a data source, like a sql database or an xml file. These are called "Data Controls," and are used to connect the standard controls to a database. For instance, a SqlDataSource control can be attached to a DropDownList control, so that the items in the database are displayed in the DropDownList.

Now, simply drag and drop a "Calendar" control onto "Design View." Note that it immediately appears on your web page. Beginners are likely to create all controls using this same technique--drag and drop. Drag and drop any controls from the "Toolbox" onto the design view. (Hit "control-z" to undo anything you don't like, or select a control and hit "delete" when you're done looking at it.)

Creating the front-end for a poll question

Now, we'll use a CheckBoxList Control. Drag and drop a CheckBoxList control onto the page. A list of Check boxes that will appear on your web page. You'll see something like this appear in the top half of the main window (Code View).

<asp:CheckBoxList ID="CheckBoxList1" runat="server"> </asp:CheckBoxList>

Asp.Net controls, like html elements, are created within brackets. Modifications to the control are easily made using the properties window on the lower right hand corner of the screen. (If you don't see a property window, go to Window --> Reset Window Layout.)

Now, in design view, click on the checkbox, and then on the small little box that appears on the upper right. A menu appears. Select "Edit Items..." from the menu. A "ListItem Collection Editor" appears. The "Members" section of the wizard contains all of the items that will appear in the checkbox list. Click "Add" at the bottom left of the wizard, and in the "Text" section of the box, type "Asp.Net" Click "Add" again, and type "Php" in the text section of the box. Repeat this several more times, adding "Ruby on Rails" and "Django." Click "Ok" to exit the wizard.

Now, you see list of checkboxes. The name of a popular web development framework appears next to each checkbox.

In code view, you now see that the CheckboxList looks like this:

<asp:CheckBoxList ID="CheckBoxList1" runat="server">

       <asp:ListItem>Asp.net</asp:ListItem>
       <asp:ListItem>php</asp:ListItem>
       <asp:ListItem>Ruby On Rails</asp:ListItem>
       <asp:ListItem>Django</asp:ListItem>

</asp:CheckBoxList>

That's right--the wizard has modified your code. You needn't feel as if you must use the wizard--go ahead and add another line in code view that reads:

<asp:ListItem>Asp Classic</asp:ListItem>

Hit "control-s" to save (design view only displays the most recent saved version of your page) and viola'! Another listbox appears.

Now, let's add a title to our checkboxList, and style the title using VWD's CSS wizard features. Begin by moving the listbox control down the page a few rows. Having trouble? In the design view portion of your screen, click on the listbox control, hit the left arrow button, and hit "Enter" several times.

Select a line above the ListBoxControl (still in Design View) and type "Which web frameworks have you worked with?"

Using the CSS Wizard to Modify the Quiz Title

Now, lets style the text using CSS. Select this text (as if you were going to italicize it). Now, look at the bottom left corner of your screen. You should see the "Manage Styles Tab." Click on the tab, and select "New Style" from the top of the column. This opens the VWD CSS wizard. Go ahead and change the font, color, and background of the "Which web frameworks have you worked with?" text. Don't forget to check the box at the top of the wizard that says "Apply new style to document selection."

When you've finished examining the CSS editor, hit "OK." The changes will then appear in your document. Hit "Control-S" to save.

The 'finished' product

To see what your webpage looks like, go to the Debug menu at the top of the page, and select "Start without Debugging." Your browser will display the page as it would appear to a visitor to your website.

If you would like to see how the page will appear in a different browser, go to the "Solution Explorer" window at the right of your screen. Right click on the root directory, which is the top line appearing in the explorer. Select "Browse with" and follow the instructions.

Suggested readings

This has been a very cursory introduction. For more information, go to www.asp.net/learn [2]. You'll find hundreds of professional-quality videos, written tutorials, and podcasts. Also, the forums are excellent and very beginner friendly.

• This page was last modified 01:52, 20 June 2008.