Text version of the video
Slides
All ASP .NET Text Articles
All ASP .NET Slides
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
Web user controls combine one or more server or HTML controls on a Web user control page, which can, in turn, be used on a Web form as a single control. For example, to capture dates from the end user on a webform, we need a TextBox, ImageButton and, a Calendar control.
To select the date
1. User clicks on the calendar image.
2. The Calendar control becomes visible.
3. User selects a date from the calendar.
4. Textbox control is automatically populated with the selected date and the calendar becomes invisible.
To achieve this functionality, considerable amount of code needs to be written in the webform. We discussed about this in Part 32 of the asp.net video series.
If, I am capturing dates, on multiple webforms, rather than repeating the same HTML markup and code, on each and every webform, we can encapsulate everything into a single web user control, which in turn, can be used on multiple web forms. This way we are reusing the same code, which saves a lot of time in terms of development and testing. So in short, user controls, increase reusability of code, implement encapsulation and reduce development and maintenance time.
Designing and implementing web user controls is very similar to web forms.Web forms, have the extension of .aspx, where as web user controls have the extension of .ascx. Webforms begin with @Page directive and can have html, head, and body elements, where as a web user controls begin with @ Control directive and cannot have html, head, and body elements. Just, like webforms, user controls also have code behind files.
In this demo, we will create a custom calendar user control, that can be reused on multiple webforms. To create a user control
1. Right click on the web application project in solution explorer
2. Select Add – New Item
3. From the “Add New Item” dialog box, select “Web User Control”
4. Set Name = CalendarUserControl
5. Click on “Add”
For the HTML of the ascx page, including code samples used in the demo please visit my blog at the following link
CalendarUserControl.ascx.cs code
public partial class CalendarUserControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Calendar1.Visible = false;
}
}
protected void ImgBtn_Click(object sender, ImageClickEventArgs e)
{
if (Calendar1.Visible)
{
Calendar1.Visible = false;
}
else
{
Calendar1.Visible = true;
}
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
txtDate.Text = Calendar1.SelectedDate.ToShortDateString();
Calendar1.Visible = false;
}
}
We are done creating the calendar user control. In the next video, we will discuss about using this calendar control on a web form.
