ASP.NET Web Forms   Web Forms Server Controls   Web Forms User Controls

Just as you can create Web Forms pages using code-behind files — separating the UI syntax ( in the .aspx file ) from the logic that the page performs ( the code-behind file ) — you can do the same to create user controls. The techniques are the same, with some minor differences.

NOTE: If you are using a RAD tool to create your ASP.NET applications, such as Visual Studio.NET, the tool’s default is to use code-behind techniques to build user controls and Web Forms pages.

1. Create a code-behind file that includes the namespaces that your user control will need to access. At a minimum you should include the System and the System.Web.UI namespaces, along with any other namespaces that your user control requires.

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls

2. Declare a class that inherits from the UserControl class and write code to give it the functionality you want. Include any event-handling methods that you write for the user control. Also, declare public instances of the ASP.NET server controls that you plan to use in the user control.

public class myCodeBehind : UserControl

   public TextBox Name;
   public Label Result;

   public void SubmitBtn_Click ( object src, EventArgs e ) {
      Result.Text = "Hi, " + Name.Text + ", welcome to ASP.NET!";
   }
}

Public Class myCodeBehind Inherits UserControl

   Public Name As TextBox
   Public Result As Label

   Public Sub SubmitBtn_Click ( src As Object, e As EventArgs )
      Result.Text = "Hi, " & Name.Text & ", welcome to ASP.NET!"
   End Sub
End Class

3. Name the code-behind file, making sure to include an extension that reflects the language in which you developed the file. If you do not do this, a compiler error will occur. In this example, the user control developed in Visual Basic is named UserControl.vb, and the one developed in C# is named UserControl.cs.
4. Create an .ascx file, using the @ Control directive to indicate the name of the class the user control inherits and the path to the source file you created in Step 1. Include the server controls and any text that you want the user control to display. When you declare the id attribute on each server control, be sure it matches the name of the instance you created in the code-behind file. For example, the ID attribute in the <asp:textbox/> element below is Name, corresponding to the Name TextBox server control from Step 2.

<%@ control inherits = "myCodeBehind" src = "UserControl.cs" %>

<p>Name: <asp:textbox id="Name" runat="server"/> <br>
<asp:button text="Click Me" OnClick="SubmitBtn_Click" runat="server"/><br>
<asp:label id="Result" runat = "server" />

<%@ control inherits = "myCodeBehind" src = "UserControl.vb" %>

<p>Name: <asp:textbox id="Name" runat="server"/> <br>
<asp:button text="Click Me" OnClick="SubmitBtn_Click" runat="server"/><br>
<asp:label id="Result" runat = "server" />

5. Include the user control in the Web Forms pages where you want its functionality to appear. For more information, see Including a User Control in a Web Forms Page.

Introduction to Web Forms User Controls   Web Forms Page Code Model   Including a User Control in a Web Forms Page   @ Control | UserControl