Walkthrough: Using Shared Code in Web Sites in Visual Web Developer

Article
11/16/2012

When you are creating Web sites, Visual Web Developer lets you easily create shared code in class files, which can then be used by pages in your application, even without compiling the class files.

Note

If you have existing assemblies (.dll files), you can add them to the Bin directory of the Web site, and then the assemblies are automatically referenced by the Web site.

In this walkthrough, you will create a simple class and then use it in an ASP.NET Web page.

Tasks illustrated in this walkthrough include the following:

Adding a class to a Web site.
Having Visual Web Developer reference the component automatically.

Prerequisites

In order to complete this walkthrough, you will need the following:

Visual Web Developer (Visual Studio).
The .NET Framework.

This walkthrough assumes that you have a general understanding of working in Visual Web Developer. For an introduction, see Walkthrough: Creating a Basic Web Page in Visual Web Developer.

Creating the Web Site and Page

If you have already created a Web site in Visual Web Developer (for example, by completing either Walkthrough: Creating a Basic Web Page in Visual Web Developer or Walkthrough: Creating a Local IIS Web Site in Visual Web Developer), you can use that Web site and go to the next section. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

Open Visual Web Developer.
On the File menu, click New Web Site. (In Visual Web Developer Express Edition, on the File menu, click New, and then click Web Site.)

The New Web Site dialog box appears.
Under Visual Studio installed templates, click ASP.NET Web Site.
In the Location box, enter the name of the folder where you want to keep the pages of the Web site.

For example:
- If you are creating a file system Web site, type C:\SampleSite.
- If you have IIS installed and you are creating an HTTP Web site, type https://localhost/SampleSite.
In the Language list, select the programming language that you prefer to work in.
Click OK.

Visual Web Developer creates the Web site and opens a new page named Default.aspx.

Creating a Shared Class

You can create reusable classes by keeping them in a folder named App_Code. Visual Web Developer monitors the App_Code folder and when new class files are added, makes the components available to the rest of the code in your application. By default, the classes in the App_Code folder are compiled into a single assembly at run time.

Note

You should put only classes (and other supported shared types) into the App_Code folder. Do not put pages, Web user controls, or other files that contain non-code elements into the App_Code folder.

To create an App_Code folder

In Solution Explorer, right-click the name of the Web site, click Add Folder, and then click App_Code Folder.

You can now add the component to your site.

To create a shared class in the App_Code folder

In Solution Explorer, right-click App_Code, and then click Add New Item.

Note

Be sure to create the new item in the App_Code folder, not in the root folder of the Web site.
Under Visual Studio installed templates, click Class.
In the Name box, type SampleClass1.
In the Language list, select the language that is used by the Web page that will use the shared class.
Click Add.

Visual Web Developer opens the new class file in the editor.

Create a class that has a single property named testString by copying the following code into the class file:

Public Class SampleClass1
    private testStringValue As String
    Public Property testString as String
        Get
            return testStringValue
        End Get
        Set (Value as String)
            testStringValue = value
        End Set
    End Property
End Class

using System;
public class SampleClass1
{
    public SampleClass1() 
    {
    }
    private string testStringValue;
    public string testString 
    {
        get
        {
              return testStringValue;
        }
        set
        {
               testStringValue = value;
        }
    }
}

Save the file and then close it.

Note that the file is not stored as a compiled file.

Note

When you work with shared classes in the App_Code folder, you do not have to save the components in order for Visual Web Developer to maintain a reference to the components. If the Web page and component are in the same programming language, Visual Web Developer maintains a reference to the component in memory. In this case, you are closing the file because you are finished with it.

Using the Shared Class

The next step is to use the shared class in an ASP.NET Web page. You can use the Default.aspx page that was created when you created the Web site.

To use the shared class

Open or switch to the Default.aspx page, and then switch to Design view.

Note

If you do not have a Default.aspx page, you can use another page. Alternatively, you can add a new page to the Web site. To do this, in Solution Explorer, right-click the name of the Web site, click Add New Item, and then click Web Form. In the Language list, enter the same programming language that you used for the component, and then click OK.
From the Standard folder in the Toolbox, drag a TextBox control, Label control, and Button control onto the page.

Note

For this walkthrough, the layout of the page is not important.

Double-click the Button control to create a Click handler for it.

The click handler code might look similar to the following:

Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button1.Click

End Sub

protected void Button1_Click(object sender, EventArgs e)
{

}

In the handler, type the following:
```
Dim sc As New
```
```
SampleClass1 sc = new
```
When you press SPACEBAR after typing New or new, Visual Web Developer displays a list of the available classes. The class that you created in the preceding section, SampleClass1, is included in the list.
Finish the statement by typing SampleClass1 or by double-clicking it in the list, so that the statement reads as follows:
```
Dim sc As New SampleClass1
```
```
SampleClass1 sc = new SampleClass1();
```
Press ENTER, and then type the following:
```
sc.
```
As soon as you type the period, Visual Web Developer again displays a list of members to help you select a member from the sample class.

Finish the statement and the handler in the following manner:

sc.testString = TextBox1.Text
Label1.Text = sc.testString

sc.testString = TextBox1.Text;
Label1.Text = sc.testString;

Save your files.

Testing the Page and Class

You can run the Web site to see that the shared class is working.

To test the page and component

Open the Default.aspx page.
Press CTRL+F5 to run the page.
When the page appears in the browser, type something in the text box, and then click the button.

Doing this sets a property in your simple class, which is then displayed in the Label control.

If you use Microsoft Windows Explorer to examine the directory where the Web site is located, you will see your page and the App_Code folder. Note that there is no .dll or other executable code in the App_Code folder or anywhere under the root of the Web site. Instead, Visual Web Developer has compiled the page and the shared class dynamically.

Next Steps

This walkthrough illustrates how to add shared classes to a Web site without compiling the components. You might want to use shared classes in different ways. For example, you might want to:

Work with a compiled component.

If you have an assembly that you can use in the Web site, create a Bin folder, and then copy the .dll to Bin. You can then reference the assembly in your page in the same way that you referenced the component that you created in this walkthrough.
Create a component for data access.

For more information, see Walkthrough: Data Binding to a Custom Business Object.
Create a Web service.

For more information, see Walkthrough: Creating and Using an ASP.NET Web Service in Visual Web Developer.

Share via