Monday, July 7, 2014

How to create user control in ASP.NET using C#


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>&nbsp;
<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,
·         TagPrefix attribute, which associates a prefix with the user control. This prefix will be included in opening tag of the user control element.
·         TagName attribute, which associates a name with the user control. This name will be included in the opening tag of the user control element.
·         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;
    }  

}