Walkthrough: Creating a Local IIS Web Site in Visual Web Developer

  • Article

In Visual Web Developer, you can create and edit Web sites that keep the Web pages and other files in different locations. Your choices for locating Web pages and other files include the following:

  • In a folder on the local hard disk, which is referred to as a file system Web site.

  • As a Web application under a local copy of Microsoft Internet Information Services (IIS), which is referred as a local IIS Web site.

You can also work with Web sites on a remote server. For more information, see Types of Web Sites in Visual Web Developer.

In this walkthrough, you will work with two Web sites that run under a locally installed copy of IIS. One of the Web sites is physically located under the root folder of IIS (typically C:\Inetpub\wwwroot). A second Web site is located in a convenient folder on the hard disk but the second Web site is available to IIS by using a virtual directory.

You can use IIS to test the Web site. If the computer is configured to permit other users to connect to it, the Web site is available to those users.

Note

If you cannot run IIS on the computer, you can still create and test ASP.NET Web sites by running Visual Web Developer. For more information, see Walkthrough: Creating a Basic Web Page in Visual Web Developer.

Tasks illustrated in this walkthrough include the following:

  • Creating an application and page under the IIS root.

  • Creating an application that uses an IIS virtual root.

  • Using IIS to run the page.

  • Working with IIS in the Solution Explorer.

Prerequisites

To complete this walkthrough, you must have IIS installed locally on the computer, and you must be logged in as a user with administrative privileges. This is required because working with the IIS metabase (where information about IIS applications is stored) requires administrative privileges.

Creating a Web Site under the IIS Root

In the first part of the walkthrough, you will create a Web site that resides under the IIS default folder (typically \Inetpub\wwwroot).

To create a new local IIS Web site under the IIS root

  1. Open Visual Web Developer.

  2. On the File menu, click New Web Site.

    The New Web Site dialog box appears.

  3. Under Visual Studio installed templates, click ASP.NET Web Site.

  4. Click Browse.

    The Choose Location dialog box appears.

  5. Click Local IIS.

  6. Click Default Web Site.

  7. Click the Create new Web program icon, which is located in the upper-right corner.

    This icon is not labeled, but when you hold he mouse pointer over it, the Create New Web Application ToolTip text appears.

    A new application named WebSite is added under Default Web Site.

  8. In the box for the new Web site, type LocalIISWebSite, and then click Open.

    The New Web Site dialog box appears with the right-most Location box filled in with https://localhost/LocalIISWebSite.

  9. In the Language list, click the programming language that you prefer to work in.

    The programming language that you choose will be the default for the Web site. However, you can use multiple languages in the same Web application by creating pages and components in different programming languages.

  10. Click OK.

    Visual Web Developer creates the new Web site and opens a new page named Default.aspx. Keep this page open. This initial Default.aspx page uses the Web page code-behind model. For more information, see ASP.NET Web Page Code Model.

Visual Web Developer not only creates the folders and files for the Web site but it also interacts with IIS to create an IIS Web application for your site. Essentially, Visual Web Developer calls IIS to create the metadata that IIS requires in order to be able to recognize your folder and pages as a Web site.

You can examine what Visual Web Developer has performed by looking at the files and folders that have been created.

To examine the structure of the local IIS Web site

  1. In Microsoft Windows, click Start, and then click Run.

    In the Run dialog box, in the Open box, enter C:\Inetpub\wwwroot, and then click OK.

    Note

    If IIS is installed on a different drive or folder, change the path as appropriate.

    Under \wwwroot, you now see a new folder named LocalIISWebSite.

  2. In the Path dialog box, double-click LocalIISWebSite.

    You see the contents of the Web site, which include the following:

    • An App_Data folder, which is created automatically by Visual Web Developer.

    • A Default.aspx page.

    • The code-behind file, which is Default.aspx.cs or Default.aspx.vb, depending on the default language for the Web application.

You can add pages to the Web site as you would ordinarily. However, you can also add pages to the Web site externally and Visual Web Developer will recognize them as part of the application, although you might have to update the Solution Explorer in order to see them.

Adding and Programming Controls

In this part of the walkthrough, you will add a Button, TextBox, and Label control to the page and write code to handle the Click event for the Button control.

To add controls to the page

  1. In Visual Web Developer, open or switch to the Default.aspx page, and then switch to Design view.

  2. Press ENTER several times to make some room.

  3. From the Standard tab in the Toolbox, drag three controls onto the page: a TextBox, Button, and Label control, and place the controls inside the div element on the page.

    Note

    If you cannot see the Toolbox, on the View menu, click Toolbox.

  4. Position the insertion pointer in front of the text box, and then type Enter your name:.

  5. Click the Button control, and then in the Properties window, set Text to Display Name.

  6. Click the Label control, and then in the Properties window, clear Text.

  7. Double-click the Button control, which is now labeled Display Name.

    Visual Web Developer opens the code file for the page in a separate window in the editor.

    The file contains a skeleton Click handler for the Button control.

  8. Complete the Click handler by adding the following highlighted code that will display the text string after the Button control is clicked.

    Security noteSecurity Note:

    User input in an ASP.NET Web page can include potentially malicious client script. By default, ASP.NET pages check pages on postback to guarantee that user input does not include script or HTML elements. For more information, see Script Exploits Overview.

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

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

  9. Save the files.

    You will test this Web page in "Testing the IIS Web Application," later in this walkthrough.

Updating the Web Site Outside Visual Web Developer

You can see that Visual Web Developer is reading the IIS path by adding a new file to the application from outside Visual Web Developer.

To update the Web outside Visual Web Developer

  1. Using Notepad or another text editor, create a new file that contains the following text, depending on whether you are using Visual Basic or C#.

    <%@Page language="VB"%>
<script runat="server">
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
   Button1.Text = "I was clicked!"
End Sub
</script>
<html>
<body>
<form runat="server" id="form1">
<asp:button runat="server" text="Button1" Id="Button1"
    OnClick="Button1_Click"></asp:button>
</form>
</BODY>
</HTML>

    <%@Page language="C#"%>
<script runat="server">
protected void Button1_Click(object sender, System.EventArgs e)
{
   Button1.Text = "I was clicked!";
}
</script>
<html>
<body>
<form runat="server" id="form1">
<asp:button runat="server" text="Button1" Id="Button1"
    OnClick="Button1_Click"></asp:button>
</form>
</BODY>
</HTML>

  2. Save the file in the path C:\inetpub\wwwroot\LocalIISWebSite under the name TestPage.aspx.

    Note

    If IIS is installed on a different drive or folder, change the path as appropriate.

  3. In Visual Web Developer, in the Solution Explorer, click the Web site name (https://localhost/LocalIISWebSite/), and then on the View menu, click Refresh.

    The list of files that are in the Web site is updated to include the file that you added. Next, you will test the Web pages.

Testing the IIS Web Application

You can now test the Web site.

To test the local IIS Web site

  1. In Visual Web Developer, open the Default.aspx page.

  2. Press CTRL+F5 to run the page.

    The page opens in the browser. Notice that the URL in the browser is https://localhost/LocalIISWebSite/default.aspx. The request for the page is being made to localhost (without a port number), which is handled by IIS.

  3. When the page appears in the browser, in the text box, enter your name, and then click Display Name to make sure it is working.

  4. In Visual Web Developer, open the TestPage.aspx page.

  5. Press CTRL+F5 to run the page.

    The page opens in the same instance of the browser.

  6. When the page appears in the browser, click Button1 to make sure it is working.

  7. Close the browser.

If you can connect to the computer from another computer, you can try accessing your site as if it were a public site. If you cannot connect to the computer from another computer, you can skip this procedure.

To test your site as a public site

  • From a different computer, type the URL that includes the Web server computer name, Web site name, and default.aspx as the page:

    • If the computer can be accessed over a local area network, use the computer name for the server that has a URL such as the following:

      http://server1/LocalIISWebSite/default.aspx

    • If you host a domain on the computer, you can access the page using a URL such as the following:

      https://www.contoso.com/LocalIISWebSite/default.aspx

    • If the computer is either on a network or directly connected to the Internet, you can use the IP address for the computer as the server name. For example:

      http://172.19.195.700/LocalIISWebSite/default.aspx

      Note

      If you are not able to view your application from a different computer because of the Windows Firewall settings, you might have to enable the Web server on port 80. You can do this on the Advanced tab of Windows firewall by clicking Settings. For more information, go to Security Developer Center -- .NET Framework Security and search for information about Windows firewall settings.

Creating a Web Site as an IIS Virtual Root

As you have seen up to this point, IIS lets you create Web applications that are physically located under the default Web server root folder (wwwroot). However, you can also create IIS virtual directories, which are IIS Web applications that point to files and folders that can be located anywhere on the hard disk.

Note

For security reasons, IIS does not let you create virtual directories that point to folders on other computers. Virtual directories must always point to the local computer.

In this part of the walkthrough, you will use Visual Web Developer to create a virtual directory that points to a Web site that is stored in a local folder on the computer.

The first step is to create the virtual directory. If you have already created a file system Web site in Visual Web Developer (for example, by completing Walkthrough: Creating a Basic Web Page in Visual Web Developer), you can use that Web site.

To create a local IIS Web site using a virtual folder

  1. In Visual Web Developer, on the File menu, click New Web site.

  2. Under Visual Studio Installed Templates, click ASP.NET Web Site.

  3. Click Browse.

    The Choose Location dialog box appears.

  4. Click Local IIS.

  5. Under Select the Web site you want to open, in the tree view, click Default Web Site, and then click the Create new virtual directory icon, which is located in the corner.

    This icon is not labeled, but when you hold the mouse pointer over it, the Create New Virtual Directory ToolTip text appears.

    The New Virtual Directory dialog box appears.

  6. In the Alias Name box, type WebSite_vdir.

    Note

    You can name your virtual directory anything that you like, as long as you use a name that is valid in IIS.

  7. In the Folder box, type one of the following:

    • The path of an existing file system Web site, if you have one. You can click Browse, and then locate the root folder of that site, if you do not remember the exact path.

    • The path where you want to create a new folder to store the folders and files for the Web site.

  8. Click OK.

    If you specified a folder that does not exist, Visual Web Developer prompts you to create it.

    Visual Web Developer then returns to the Choose Location dialog box and updates the list of IIS Web applications that have the virtual directory that you created.

  9. Select the virtual directory that you just created, click Open, and then click OK to create the Web site.

    If you pointed the virtual directory to a new folder or an existing folder that does not contain a Web site, Visual Web Developer creates the App_Data folder, a default page, and opens the page in the designer.

    If your virtual folder points to an existing file system Web site, Visual Web Developer opens a Web Site Already Exists dialog box and gives you the option to select a new folder, open the existing site, or create a new Web site in the existing location. After you select your option and click OK, Visual Web Developer displays the contents of the folder in the Solution Explorer and opens the Default.aspx page, if it exists.

Adding Controls to the Web Page

As you did earlier in this walkthrough, you will use a simple ASP.NET Web page to test the IIS Web site that you are creating. If you are working with an existing file system Web site, you do not have to create a new page. If your virtual directory points to a new folder, you can use that page.

If this is a new Web site, you will add some controls to the default page so that you can test that the page is working correctly.

To add controls to the page

  1. In Visual Web Developer, open the Default.aspx page and switch to Design view.

  2. From the Standard tab in the Toolbox, drag a TextBox, Button, and Label control onto the page and place then inside the div element.

  3. Double-click the Button control, and then add the following highlighted code:

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Label1.Text = "Welcome to Visual Web Developer!"
End Sub

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

  4. Save the files.

Testing the Virtual Directory

You can now test the Web site.

To test the local IIS Web site using the virtual directory

  1. In Visual Web Developer, open a page in the Web site, which can be the Default.aspx page or another page.

  2. Press CTRL+F5 to run the page.

    The page opens in the browser. Notice that the URL in the browser is https://localhost/Website_vdir/default.aspx. When IIS resolves the URL, it looks up the physical path that is associated with the virtual directory named Website_vdir and looks for the page there.

  3. When the page appears in the browser, click the Button control to make sure it is working.

  4. Close the browser.

If you can connect to the computer from another computer, you can try the same tests that you used in the preceding section to try accessing the page.

Deleting a Local IIS Web Site

You can manage local IIS Web sites in Visual Web Developer by deleting ones that you no longer need. There is an important difference in how deletion works, depending on which type of local IIS Web site that you are working with, as follows:

  • When you delete a Web site under the IIS root, the Web application is deleted from IIS and the files and folders for the Web site are deleted also.

  • When you delete a virtual directory, the IIS information about that Web site is deleted but the files and folders in the local file system folder are left intact.

To delete the local IIS Web site

  1. On the File menu, click Close Solution or Close Project.

  2. On the File menu, click Open Web site.

  3. In the Open Web Site dialog box, click Local IIS.

  4. Click the name of the virtual directory (Website_vdir) that you created earlier in the walkthrough.

    Warning

    If you select a different Web site, the files and folders for that Web site might be deleted.

  5. Click the delete icon in the upper corner.

    This icon is not labeled, but when you hold the mouse pointer over it, the Delete ToolTip text appears.

  6. When you are prompted for confirmation to delete the Web site, click Yes.

  7. Click Cancel to close the Open Web Site dialog box.

  8. Open the browser, and then type the URL for the virtual directory:

    https://localhost/Website_vdir/default.aspx

    This time, the browser reports that the page cannot be found, because IIS no longer recognizes Website_vdir as a Web site on the local computer.

    Note

    It is possible that the page was cached by the local browser. In that case, the page might still display until you flush the browser cache, and then try to view the page again.

Next Steps

In this walkthrough, you have learned how to create a Web site using the local copy of IIS. You might also want to learn about other types of Web sites that you can create in Visual Web Developer. For example, you might want to do the following:

See Also

Concepts

Types of Web Sites in Visual Web Developer

Using Visual Web Developer as a Non-Administrative User