Walkthrough: Creating a Simple Web App

In Visual Studio Ultimate, on the FILE menu, choose New and then choose Project.

The New Project dialog box appears.

Under Installed templates, expand the programming language that you prefer and then choose Web.

In the list of Web project types, select ASP.NET Empty Web Application.

Note
You will write minimal code in this walkthrough.

In the Name box, type ColorWebApp.

In the Location box, specify the folder where you want to create your Web app.

Select Create directory for solution.

Choose OK.

In Solution Explorer, verify that the new ColorWebApp project is selected.

On the PROJECT menu, choose Add New Item.

The Add New Item dialog box appears.

In the list of items, choose Web Form.

In the Name text box, type Default.aspx and then choose Add.

In Solution Explorer, right-click Default.aspx and choose View Designer.

A blank page is displayed.

If the toolbox is not visible, from the VIEW menu choose Toolbox.

From the Standard group, drag a RadioButtonList onto the page.

A RadioButtonList control is added to the design surface.

Expand the RadioButtonList Tasks action tag pane, and choose the EditItems link.

A ListItem Collection Editor appears.

Note
You can also display the ListItem Collection Editor by editing the Items collection on the Properties window.

Choose Add to add a new item.

Under ListItem properties:

1. Change the Text property to Red.

2. Set the Selected property to True.

Choose Add to add another item.

Under ListItem properties change the Text property to Blue.

Choose OK to close the ListItem Collection Editor.

Drag a Button onto the page and in the Properties window, change the Text property to Submit.

On the FILE menu, choose Save All.

On the PROJECT menu, choose Add New Item.

In the Add New Item dialog box, select Web Form from the list of templates, and in Name type Red.aspx. Then choose Add.

At the bottom of the document window, choose the Design tab to switch to design view.

Drag a Label onto the page. In the Properties window, set the Text property to Red, and the ForeColor property to Red.

On the PROJECT menu, choose Add New Item.

In the Add New Item dialog box, choose the Web Form template, name it Blue.aspx, and then choose Add.

At the bottom of the document window, choose the Design tab to switch to design view.

Drag a Label onto the page. In the Properties window, set the Text property to Blue, and the ForeColor property to Blue.

On the FILE menu, choose Save All.

In Solution Explorer right-click Default.aspx and choose View Designer.

Double-click the Submit Button. Visual Studio switches to the page code, and creates a skeleton event handler for the Button control's Click event.

Add the following code to the event handler:

if (this.RadioButtonList1.SelectedValue == "Blue")
{
    Response.Redirect("Blue.aspx");
}
else
{
    Response.Redirect("Red.aspx");
}

If RadioButtonList1.SelectedValue = "Blue" Then
    Response.Redirect("Blue.aspx")
Else
    Response.Redirect("Red.aspx")
End If

On the FILE menu, choose Save All.

In Solution Explorer, right-click Default.aspx and then choose Set As Start Page.

Press CTRL+F5 to run the Web app in the browser. You will see the first page.

Choose Red and then choose Submit. If the app is working correctly you will go to the page with the Label that says Red.

Go back to the first page.

Choose Blue and then choose Submit. If the app is working correctly you will go to the page with the Label that says Blue.