Export (0) Print
Expand All

Working with Single-File Web Forms Pages in Visual Studio .NET

Visual Studio .NET 2003
 

Harry Miller
Visual Studio Team
Microsoft Corporation

January 2002

Summary: Developers who use Microsoft Visual Studio .NET might want or need to work with single-file Web Forms pages instead of code-behind Web Forms pages. This article provides an overview of single-file Web Forms pages, how to work with single-file pages in Visual Studio, and how to convert single-file Web Forms pages to code-behind Web Forms pages. (6 printed pages)

Contents

Introduction
Two Models for Web Forms Pages
Issues with Single-File Web Forms Pages in Visual Studio
Working with Single-File Web Forms Pages in Visual Studio
Converting Single-File Web Forms Pages to Code-Behind Pages
Conclusion

Introduction

Although Microsoft Visual Studio® .NET makes it easy to create and work with Web Forms pages using the ASP.NET code-behind model, you might find yourself working with single-file Web Forms pages by circumstance or by preference. This article gives an overview of the differences between the two models, describes how to work with single-file Web Forms pages in Visual Studio, and shows you how to convert single-file .aspx pages to code-behind Web Forms pages.

Two Models for Web Forms Pages

There are two models for Web Forms pages: code-behind and single-file. Code-behind uses a programming model in which the layout HTML is contained in the .aspx file, and the code for the page is contained in a separate class file. In the single-file model, the UI elements and code are in the same file.

Single-file Web Forms pages are functionally very similar to pages that have a separate code file. For example, you use the same controls on both types of pages. Users still request pages using the same .aspx extension for the file name, and the page still is run using server-side code that streams HTML to the client.

There are a few differences in the processing of code-behind and single-file pages:

Code-behind Single-file
The HTML and controls are in the .aspx file, and the code is in a separate .aspx.vb or .aspx.cs file. The code is in <script> blocks in the same .aspx file that contains the HTML and controls.
The code for the page is compiled into a separate class from which the .aspx file derives. The .aspx file derives from the Page class.
All project class files (without the .aspx file itself) are compiled into a .dll file, which is deployed to the server without any source code. When a request for the page is received, then an instance of the project .dll file is created and executed. When the page is deployed, the source code is deployed along with the Web Forms page, because it is physically in the .aspx file. However, you do not see the code, only the results rendered when the page runs.

As a developer who uses Visual Studio, you probably will work primarily with code-behind Web Forms pages to take advantage of Visual Studio features, such as IntelliSense and other Code Editor capabilities, the ability to compile and test at design time, and the security of deploying a .dll file instead of source code. However, at some point you might want to work with existing Web Forms pages that use the single-file model. Such pages might have been developed outside of Visual Studio, or they might have been patterned after single-file example code. You can still use Visual Studio to work with those files.

In addition, you might want to create single-file Web Forms pages yourself for some specific applications. The advantages of single-file pages are that they can be easy to deploy by simply copying them to the server and they make it easier for you or a development partner to work on the page using a non-Visual Studio development environment, such as Microsoft® Notepad.

Issues with Single-File Web Forms Pages in Visual Studio

Visual Studio is oriented toward the two-file, code-behind model. There is limited support for single-file pages, because the HTML editor that is used to create single-file pages has limited coding support compared to the Code Editor. Issues with single-file Web Forms pages in Visual Studio include:

  • You cannot create a single-file Web Forms page directly in Visual Studio. When you create a Web Forms page using the template, by default Visual Studio creates a separate .aspx file and class file. To create a single-file page, you initially must create it as an HTML file but change its extension to .aspx.
  • You cannot add non-visual components (such as data components) to the page by dragging them from the Toolbox, because the Web Forms Designer will not persist them in the page. Instead, you must add such components in code.
  • You write code in HTML view, not in the Code Editor.
  • When you are writing code, IntelliSense is not supported — you do not get syntax checking or statement completion, tabbing, or code formatting.
  • Keyword color-coding is not supported for Microsoft® Visual C#®. If you are writing code in Microsoft® Visual Basic®, you will get keyword color-coding if the language attribute of the @ Page directive or of the <script> block is set to "VB".
  • You must bind events to event handlers manually. For single-file Web Forms pages, Visual Studio does not support double-clicking to create the handler for a control's default event, nor the drop-down lists of classes and events in the Code Editor.
  • Some debugging features, such as the ability to see a variable value by pointing at it, are not supported.
  • Because the code in the page is not compiled into the project assembly, compile-time errors are not caught until the page runs.

Working with Single-File Web Forms Pages in Visual Studio

The basic functions for working with single-file Web Forms pages in Visual Studio are:

  • Creating a new single-file ASPX file
  • Importing a single-file ASPX file
  • Inserting event handlers in the ASPX file

Creating a new single-file ASPX file

  1. Open an existing project, or create a new ASP.NET Web application.
  2. On the Project menu, click Add HTML Page.
  3. Name the new page with the .aspx extension, for example SingleForm1.aspx.
  4. If the design surface is in Design view, switch to HTML view.
  5. Add an @ Page directive at the top of the page. For example:
    ' Visual Basic
    <%@ Page Language="VB" %>
    
    // C#
    <%@ Page Language="C#" %>
    
  6. After the @ Page directive and before the <html> tag, add a <script> block to contain all of your code. In the opening <script> tag, set the runat = "server" attribute. For example:
    ' Visual Basic
    <script runat="server">
       Sub Button1_Click(Sender As Object, E As EventArgs)
         ' Code for button click
       End Sub
    </script>
    
    // C#
    <script runat="server">
       void Button1_Click(Object sender, EventArgs e) {
         // Code for button click;
       }
    </script>
    
  7. Inside the HTML <body> tags, add <form> and </form> tags around your controls. In the opening <form> tag, set the runat = "server" attribute so it looks similar to the following:
    <form id="Form1" method="post" runat="server">
    

Importing a single-file ASPX file

  1. Open an existing project, or create a new ASP.NET Web application.
  2. On the Project menu, click Add Existing Item.
  3. Browse to the single-file Web Forms page you want to add to your project.
  4. Click Open. Visual Studio will display the following message:

    There is no class file in the project associated with the Web Form '<Web Forms page name>'. Create a new class file now?

  5. Click No to prevent Visual Studio from creating a code-behind file for you.

Inserting event handlers in the ASPX file

  1. Open your single-file Web Forms page in HTML view.
  2. Manually type the event handler code inside the <script> block.

    For example, the following code makes a simple message appear in a label when you click a button. The label has the ID attribute lblMessage.

    ' Visual Basic
    <script runat="server">
       Sub btnTest_Click(Sender As Object, E As EventArgs)
         lblMessage.Text = "The OnClick event has fired!"
       End Sub
    </script>
    
    // C#
    <script runat="server">
       void btnTest_Click(Object sender, EventArgs e) {
         lblMessage.Text = "The OnClick event has fired!";
       }
    </script>
    
  3. Manually add the event wireup to the server control tag.

    For example, to call the previous event handler code from a button click:

    <asp:button id="btnTest" text="Test" OnClick="btnTest_Click" _
    runat="server"/>
    

Converting Single-File Web Forms Pages to Code-Behind Pages

It might be that the only thing you want to do with a single-file Web Forms page in Visual Studio is to convert it to a code-behind Web Forms page. Using Visual Studio to convert a single-file page to a code-behind page automatically accomplishes the following:

  • Generates a code-behind class file for the page.
  • Adds the appropriate page directives to the page so it is linked with the code-behind file.

The conversion does not do the following:

  • Convert inline code to code in the class file.

To convert a single-file .aspx page to code-behind

  1. Open an existing project, or create a new ASP.NET Web application.
  2. On the Project menu, click Add Existing Item.
  3. Browse to the .aspx page that you want to convert.
  4. Click Open. Visual Studio will display the following message:

    There is no class file in the project associated with the Web Form '<Web Forms page name>'. Create a new class file now?

  5. Click Yes. Visual Studio will create the code-behind file and link it to the .aspx page.
  6. Click the Show All Files button in Solution Explorer, and expand the tree below your newly converted file to see the code-behind class file.
  7. Open the new .aspx file.
  8. In HTML view, inspect the file to make sure it contains an @ Page directive at the top that contains the CodeBehind attribute.
  9. Inspect the file to make sure it contains an HTML <form> element within the HTML <body> tags. If not, add <form> and </form> tags around your controls, and in the opening <form> tag, set the runat = "server" attribute so it looks similar to the following:
    <form id="Form1" method="post" runat="server">
    
  10. If the file contains calls to COM components — for example, ADO code — add the AspCompat attribute to the Page directive in HTML view:
    <%@ Page [...] AutoEventWireup="false" AspCompat="true" %>
    

    If you do not have any calls to COM components, you do not need to add the AspCompat attribute.

  11. Move your code out of the .aspx file and into the .aspx.vb or .aspx.cs file.

    If you are working with a legacy file that contains ASP code, you must convert it to ASP.NET code before you can move it to the code-behind page. Converting to ASP.NET also will help you to take advantage of dynamic browser customization, state maintenance, and other features the ASP.NET server controls provide. For details, see Converting ASP to ASP.NET.

  12. Save the form, compile the project, and view it in the browser.
  13. Check for issues that appear in the Task List window, and resolve them.

Conclusion

Although the code-behind Web Forms model has advantages over the single-file model, developers probably will work with single-file Web Forms pages for some time to come. This article provided an overview of single-file Web Forms pages and discussed how to work with them in Visual Studio .NET.

Show:
© 2014 Microsoft