Home > ASP.NET > How to: Convert Web Forms Pages into ASP.NET User Controls

How to: Convert Web Forms Pages into ASP.NET User Controls


To convert a single-file ASP.NET Web page into a user control

  1. Rename the control so the file name extension is .ascx.
  2. Remove the html, body, and form elements from the page.
  3. Change the @ Page directive to an @ Control directive.
  4. Remove all attributes of the @ Control directive except Language, AutoEventWireup (if present), CodeFile, and Inherits.
  5. Include a className attribute in the @ Control directive. This allows the user control to be strongly typed when it is added to a page.

 

To convert a code-behind ASP.NET Web page into a user control

  1. Rename the .aspx file so the file name extension is .ascx.
  2. Rename the code-behind file to have the file name extension .ascx.vb or .ascx.cs, depending on what programming language the code-behind file is in.
  3. Open the code-behind file and change the class from which it inherits from Page to UserControl.
  4. In the .aspx file, do the following:
    1. Remove the html, body, and form elements from the page.
    2. Change the @ Page directive to an @ Control directive.
    3. Remove all attributes of the @ Control directive except Language, AutoEventWireup (if present), CodeFile, andInherits.
    4. In the @ Control directive, change the CodeFile attribute to point to the renamed code-behind file.
  5. Include a className attribute in the @ Control directive. This allows the user control to be strongly typed when it is added to a page.
    1. Example:

      <%@ Page Language=”C#” %>

      <html>
      <script runat=server>
      void EnterBtn_Click(Object sender, EventArgs e)
      {
          Label1.Text = "Hi " + Name.Text + " welcome to ASP.NET!";
      }
      </script>
      <body>
      <h3> <u>Web Forms Page</u> </h3>
      <form>
      Enter Name: <asp:textbox id="Name" runat=server/>
      <asp:button Text="Enter" OnClick="EnterBtn_Click"
          runat=server/>
      <br>
      <br>
      <asp:label id="Label1" runat=server/>
      </form>
      </body>
      </html>
      
      <%@ Control Language="C#" ClassName="SampleUserControl" %>
      <h3> <u>User Control</u> </h3>
      <script runat=server>
      void EnterBtn_Click(Object Sender, EventArgs e)
      {
          Label1.Text = "Hi " + Name.Text + " welcome to ASP.NET!";
      }
      </script>
      Enter Name: <asp:textbox id="Name" runat=server/>
      <asp:button Text="Enter" OnClick="EnterBtn_Click"
      runat=server/>
      <br>
      <br>
      <asp:label id="Label1" runat=server/>
Advertisements
Categories: ASP.NET
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: