Close the Default.aspx page. To do this, right-click the tab containing the file name and select Close.

In Solution Explorer, right-click the Web site (for example, C:\BasicWebSite), and then click Add New Item.

Under Visual Studio installed templates, click Web Form.

In the Name box, type FirstWebPage.

In the Language list, choose the programming language you prefer to use (Visual Basic, C#, or J#).

When you created the Web site, you specified a default language. However, each time you create a new page or component for your Web site, you can change the language from the default. You can use different programming languages in the same Web site.

Clear the Place code in separate file check box. The following screen shot shows the Add New Item dialog box.

In this walkthrough, you are creating a single-file page with the code and HTML in the same page. The code for ASP.NET pages can be located either in the page or in a separate class file. To learn more about keeping the code in a separate file, see Walkthrough: Creating a Basic Web Page with Code Separation in Visual Web Developer.

Click Add.

Visual Web Developer creates the new page and opens it in Source view.

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

Design view displays the page that you are working on in a WYSIWYG-like way. At this point, you do not have any text or controls on the page, so the page is blank.

On the page, type Welcome to Visual Web Developer.

The following screen shot shows the text you typed in Design view.

Switch to Source view.

You can see the HTML that you created by typing in Design view, as shown in the following screen shot.

Press CTRL+F5 to run the page.

Visual Web Developer starts the ASP.NET Development Server. An icon appears on the toolbar to indicate that the Visual Web Developer Web server is running, as shown in the following screen shot.

The page is displayed in the browser. Although the page you created has an extension of .aspx, it currently runs like any HTML page.

Note
If the browser displays a 502 error or an error indicating that the page cannot be displayed, you might need to configure your browser to bypass proxy servers for local requests. For details, see How to: Bypass a Proxy Server for Local Web Requests.

Close the browser.

Select the Button control, and then in the Properties window, set Text to Display Name, as shown in the following screen shot.

Switch to Source view.

Source view displays the HTML for the page, including the elements that Visual Web Developer has created for the server controls. Controls are declared using HTML-like syntax, except that the tags use the prefix asp: and include the attribute runat="server".

Control properties are declared as attributes. For example, when you set the Text property for the Button control, in step 1, you were actually setting the Text attribute in the control's markup.

Note that all the controls are inside a <form> element, which also has the attribute runat="server". The runat="server" attribute and the asp: prefix for control tags mark the controls so that they are processed by ASP.NET on the server side when the page runs. Code outside of <form runat="server"> and <script runat="server"> elements is interpreted by the browser as client-side code, which is why the ASP.NET code must be inside.

Put the insertion point in a space within the <asp:label> tag, and then press SPACEBAR.

A drop-down list appears that displays the list of properties you can set for a Label control. This feature, referred to as IntelliSense, helps you in Source view with the syntax of server controls, HTML elements, and other items on the page. The following screen shot shows the IntelliSense drop-down list for the Label control.

Select ForeColor and then type an equal sign (=). IntelliSense displays a list of colors.

Note
You can display an IntelliSense drop-down list at any time by pressing CTRL+J.

Select a color for the Label control's text.

The ForeColor attribute is completed with the color that you have selected.

Switch to Design view.

Double-click the Button control.

Visual Web Developer switches to Source view and creates a skeleton event handler for the Button control's default event, the Click event.

Note
Double-clicking a control in Design view is just one of several ways you can create event handlers.

Inside the handler, type the following:

Label1.

Visual Web Developer displays a list of available members for the Label control, as shown in the following screen shot.

Finish the Click event handler for the button so that it reads as shown in the following code example.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

Scroll down to the <asp:Button> element. Note that the <asp:Button> element now has the attribute OnClick="Button1_Click". This attribute binds the button's Click event to the handler method you coded in step 4.

Event handler methods can have any name; the name you see is the default name created by Visual Web Developer. The important point is that the name used for the OnClick attribute must match the name of a method in the page.

Note
If you are using Visual Basic with code separation, Visual Web Developer does not add an explicit OnClick attribute. Instead, the event is bound to the handler method using a Handles keyword on the handler declaration itself.

Press CTRL+F5 to run the page in the browser.

The page again runs using the ASP.NET Development Server.

Enter a name into the text box and click the button.

The name you entered is displayed in the Label control. Note that when you click the button, the page is posted to the Web server. ASP.NET then recreates the page, runs your code (in this case, the Button control's Click event handler runs), and then sends the new page to the browser. If you watch the status bar in the browser, you can see that the page is making a round trip to the Web server each time you click the button.

In the browser, view the source of the page you are running.

In the page source code, you see only ordinary HTML; you do not see the <asp:> elements that you were working with in Source view. When the page runs, ASP.NET processes the server controls and renders HTML elements to the page that perform the functions that represent the control. For example, the <asp:Button> control is rendered as the HTML element <input type="submit">.

Close the browser.

From the left-hand drop-down list at the top of Source view, select Calendar1.

The drop-down list displays a list of all the objects you can write code for.

From the right-hand drop-down list, select SelectionChanged.

Visual Web Developer creates a skeleton event handler for the Calendar control's SelectionChanged event.

You have now seen two ways to create an event handler for a control. The first was to double-click the control in Design view. The second is to use the drop-down lists in Source view to select an object and the event to write code for.

Finish the SelectionChanged event handler with the following highlighted code.

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
<b>    Label1.Text = Calendar1.SelectedDate.ToString()</b>
End Sub

protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{    
    <b>Label1.Text = Calendar1.SelectedDate.ToString();</b>
}

Press CTRL+F5 to run the page in the browser.

Click a date in the calendar.

The date you clicked is displayed in the Label control.

In the browser, view the source code for the page.

Note that the Calendar control has been rendered to the page as a table, with each day as a <td> element containing an <a> element.

Close the browser.