In this article I’m going
to explain how to create user control in ASP.NET using C#. ASP.NET provides one
of the functionality that we can create User Control and we can reuse anywhere
in application.
We can create User Control
with the extension of .ascx. We can use any server controls in User Control.
We cannot put user controls in the Web site's App_Code folder. If a
user control is in the App_Code folder, a parse error occurs when the
containing page runs.
Here I’ll show you how to create User Control and how to include
that in our web forms. You could follow the steps given below
First we have to add web user control
to our application.
Here I’ve created User Control for get
date from user. So I have included one TextBox control, Image control and Ajax
CalenderExtender.
User
Control could be like this
Sample code:
DateControl.ascx
<%@ Control Language="C#"
AutoEventWireup="true"
CodeFile="DateControl.ascx.cs"
Inherits="MyControl"
%>
<%@ Register assembly="AjaxControlToolkit"
namespace="AjaxControlToolkit"
tagprefix="asp"
%>
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<asp:TextBox ID="txtDate"
runat="server"></asp:TextBox>
<asp:Image ID="imgCalenderIcon"
runat="server"
ImageUrl="~/Images/calender3.jpg"
/>
<asp:CalendarExtender ID="TextBox1_CalenderExtender"
runat="server"
PopupButtonID="imgCalenderIcon"
TargetControlID="txtDate"
Format="dd/MM/yyyy">
</asp:CalendarExtender>
Include User Control to web form:
After creating User Control we have to
include that to our web form. So here we have to crate @Register directive that
includes following attributes,
·
A TagPrefix attribute, which associates a prefix with the user
control. This prefix will be included in opening tag of the user control
element.
·
A TagName attribute, which associates a name with the user
control. This name will be included in the opening tag of the user control
element.
·
A Src attribute, which defines the virtual path to the user
control file that you are including.
Sample code:
<%@ Register Src="~/DateControl.ascx"
TagName="Date"
TagPrefix="UC"
%>
Here we
have to create a web form which is include User Control we have created,
Designer
source code:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<%@ Register Src="~/DateControl.ascx"
TagName="Date"
TagPrefix="UC"
%>
<%@ Register assembly="AjaxControlToolkit"
namespace="AjaxControlToolkit"
tagprefix="asp"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<UC:Date runat="server" ID="ucDate"/><br
/>
<asp:Button ID="btnSubmit" runat
="server" Text="Submit" OnClick="btnSubmit_Click"/>
<asp:Label ID="lblDate" runat="server" ></asp:Label>
</div>
</form>
</body>
</html>
Code
behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default :
System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
}
protected void btnSubmit_Click(object
sender, EventArgs e)
{
lblDate.Text = ucDate.date;
}
}