ASP.NET Issues: Web User Control

April 3, 2011

WebUserControl Example

Below is the example for creating a web user control for selecting date from a calendar and display in the textbox.

1.) Add .ascx file by choosing WebUserControl template

DateSelectControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DateSelectControl.ascx.cs" Inherits="DateSelectControl" %>

<asp:TextBox ID="txtDate" runat="server"
   style="margin-top:0px; z-index: 1; left: 45px; top: 40px; position: absolute;"></asp:TextBox>
<asp:ImageButton ID="ImageButton1" runat="server"
   ImageUrl="~/Images/Calendar Icon.jpg"
   style="margin-left: 10px;margin-top:50px; z-index: 1; left: 201px; top: -30px; position: absolute; height: 50px; width: 50px;"
   onclick="ImageButton1_Click" /><br />
<asp:Calendar ID="Calendar1" runat="server"
   onselectionchanged="Calendar1_SelectionChanged"

   style="z-index: 1; left: 185px; top: 87px; position: absolute; height: 188px; width: 259px"
   onvisiblemonthchanged="Calendar1_VisibleMonthChanged"></asp:Calendar>

DateSelectControl.ascx.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class DateSelectControl : System.Web.UI.UserControl
{
   protected void Page_Load(object sender, EventArgs e)
   {
   Calendar1.Visible = false;
   }
   protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
   {
   Calendar1.Visible = true;
   }
   protected void Calendar1_SelectionChanged(object sender, EventArgs e)
   {

   txtDate.Text = Calendar1.SelectedDate.ToString("dd MMM yyyy");

   }
   protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
   {
   Calendar1.Visible = true;
   }

   //Create value Property

   public String Value
   {
   get
   {
   return Calendar1.SelectedDate.ToString();

   }

   }
}

2.) Built it

3.) Add .aspx page to use the above control

UseDateselectcontrol.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UseDateselectcontrol.aspx.cs" Inherits="UseDateselectcontrol" %>

<%@ Register src="DateSelectControl.ascx" tagname="DateSelectControl" tagprefix="uc1" %>

<!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>
   <asp:Label ID="lbl1" runat ="server" Text ="Date Of Birth :" ></asp:Label>

   <asp:Label ID="lbl2" runat ="server" Text ="" ></asp:Label>

   </div>
   <uc1:DateSelectControl ID="DateSelectControl1" runat="server" style="margin-left: 250px" />

   </form>
</body>
</html>

UseDateselectcontrol.aspx.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class UseDateselectcontrol : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {



   }
}

4.) Run UseDateselectcontrol.aspx you should see below interface