In this post, I will explain Asp.Net UserControl with example. An ASP.NET Web user control (.ascx page) is similar to an ASP.NET Web page (.aspx page), with both a user interface page and code.
In an example project, we have UserControl and web form. UserControl contains a GridView displaying data of students with the selected subject. Webform contains a dropdown list and user control. When the user selects subject in dropdown list user control populates a list of all students with the selected subject.
1. FormWithUserControl.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FormWithUserControl.aspx.cs" Inherits="TestApplication.UserControl.FormWithUserControl" %>
<%-- Registering user control using register directive --%>
<%@ Register Src="~/UserControl/UserControl.ascx" TagPrefix="uc1" TagName="UserControl" %>
<!DOCTYPE html>
<html lang="">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<center>
<span> Select Subject :</span>
<asp:DropDownList id="ddlSubject" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlSubject_SelectedIndexChanged" >
<asp:ListItem>Subject 1</asp:ListItem>
<asp:ListItem>Subject 2</asp:ListItem>
<asp:ListItem>Subject 3</asp:ListItem>
<asp:ListItem>Subject 4</asp:ListItem>
</asp:DropDownList>
</center>
<br />
<br />
<div>
<%-- Adding user control in web page --%>
<uc1:UserControl runat="server" ID="UserControl1" />
</div>
</form>
</body>
</html>
<%-- Registering user control using register directive --%>
<%@ Register Src="~/UserControl/UserControl.ascx" TagPrefix="uc1" TagName="UserControl" %>
<!DOCTYPE html>
<html lang="">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<center>
<span> Select Subject :</span>
<asp:DropDownList id="ddlSubject" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlSubject_SelectedIndexChanged" >
<asp:ListItem>Subject 1</asp:ListItem>
<asp:ListItem>Subject 2</asp:ListItem>
<asp:ListItem>Subject 3</asp:ListItem>
<asp:ListItem>Subject 4</asp:ListItem>
</asp:DropDownList>
</center>
<br />
<br />
<div>
<%-- Adding user control in web page --%>
<uc1:UserControl runat="server" ID="UserControl1" />
</div>
</form>
</body>
</html>
2. UserControl.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl.ascx.cs" Inherits="TestApplication.UserControl.UserControl" %>
<span>Student With Subject :</span>
<asp:Label ID="lblSubject" Text="" runat="server" Font-Bold="true"></asp:Label>
<br />
<br />
<asp:DataGrid ID="dgView" runat="server"
Width="100%" HorizontalAlign="Center" CellPadding="4" ForeColor="#333333" GridLines="Both">
<AlternatingItemStyle BackColor="White" />
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#FFFBD6" ForeColor="#333333" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
</asp:DataGrid>
C# Code
1. FormWithUserControl.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestApplication.UserControl
{
public partial class FormWithUserControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void ddlSubject_SelectedIndexChanged(object sender, EventArgs e)
{
Label lbl = (Label)UserControl1.FindControl("lblSubject");
lbl.Text = ddlSubject.SelectedValue;
UserControl1.BindGrid();
}
}
}
2. UserControl.ascx.cs
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestApplication.UserControl
{
public partial class UserControl : System.Web.UI.UserControl
{
DataTable tbl;
protected void Page_Load(object sender, EventArgs e)
{
}
private void CreateDataTable()
{
tbl = new DataTable();
tbl.Columns.Add("StudentName", typeof(string));
tbl.Columns.Add("Class", typeof(string));
tbl.Columns.Add("Subject", typeof(string));
tbl.Rows.Add("Student 1", "Class 1", "Subject 1");
tbl.Rows.Add("Student 2", "Class 2", "Subject 1");
tbl.Rows.Add("Student 3", "Class 2", "Subject 2");
tbl.Rows.Add("Student 4", "Class 3", "Subject 1");
tbl.Rows.Add("Student 5", "Class 4", "Subject 2");
tbl.Rows.Add("Student 6", "Class 3", "Subject 3");
tbl.Rows.Add("Student 7", "Class 3", "Subject 4");
}
public void BindGrid()
{
CreateDataTable();
dgView.DataSource = tbl.Select("Subject = " + "'" + lblSubject.Text.Trim() + "'").CopyToDataTable();
dgView.DataBind();
}
}
}
