Walkthrough: Creating a Local IIS Web Site in Visual Studio

  • Article

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

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

Tasks illustrated in this walkthrough include the following:

  • Creating a Web project and page under the IIS root.

  • Creating a Web project that uses an IIS virtual root.

  • Using IIS to run a Web page.

  • Working with IIS in Solution Explorer.

For information about Web site projects that do not use IIS to access the files in the site, see Types of Web Site Projects in Visual Studio.

Prerequisites

To complete this walkthrough, you must have IIS installed locally on the computer, you must be logged in as a user with administrative privileges, and you must have ASP.NET installed in IIS. For information about how to install ASP.NET, see ASP.NET IIS Registration Tool (Aspnet_regiis.exe).

Creating a Web Site Project under the IIS Root

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

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

  1. Open Visual Studio.

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

    The New Web Site dialog box appears.

  3. Under Installed Templates, click the language you want to work with, and then click ASP.NET Web Site.

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

  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. Click OK.

    Visual Studio creates the new Web project with default pages and files. Visual Studio automatically opens the new page that is 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 Forms Page Code Model.

Visual Studio not only creates the folders and files for the Web project but it also interacts with IIS to create an IIS Web application for your site. Essentially, Visual Studio 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 Studio 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 Studio.

    • 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 project as you would ordinarily. However, you can also add pages to the Web project externally and Visual Studio will recognize them as part of the application, although you might have to refresh the contents of the Solution Explorer window 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. 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 Studio 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 Studio!"
End Sub

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

  9. Save the files.

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

Updating the Web Site Project Outside Visual Studio

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

To update the project outside Visual Studio

  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 Solution Explorer, click the Web site name (https://localhost/LocalIISWebSite/), and then in the View menu, click Refresh.

    The list of files that are in the Web project 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 Studio, 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. 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 project 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:

      https://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:

      https://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 Project 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 Studio 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 project in Visual Studio (for example, by completing Walkthrough: Creating a Basic Web Forms Page in Visual Studio), you can use that Web site.

To create a local IIS Web project using a virtual folder

  1. In the File menu, click New Web site.

  2. Under Installed Templates, click the language you want to work with, and then 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 Studio creates default pages and files, and opens the Default.aspx page in the designer.

    If your virtual folder points to an existing file system Web site, Visual Studio 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 project in the existing location. After you select your option and click OK, Visual Studio displays the contents of the folder in 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 project 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. 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 Studio!"
End Sub

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

  4. Save the files.

Testing the Virtual Directory

You can now test the Web site.

To test the local IIS Web site project using the virtual directory

  1. In Visual Studio, 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 Project

You can manage local IIS Web site projects in Visual Studio 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 project that you are working with, as follows:

  • When you delete a Web site project under the IIS root, the Web application is deleted from IIS and the files and folders for the project are deleted also. (In IIS, the project is referred to as an application; an IIS site can include multiple applications.)

  • 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 project

  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.

    Caution

    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 project 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 Site Projects in Visual Studio

Local IIS Web Site Projects

Other Resources

Web Application Projects versus Web Site Projects in Visual Studio