Suggested Videos
Part 101 - Implementing SSL in asp.net web application
Part 102 - Redirect http to https in IIS
Part 103 - Redirect http to https in iis using custom errors
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. A web form to capture date of birth is shown below in the image.
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 web forms, rather than repeating the same HTML mark up and code, on each and every web form, 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 re-usability 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"
Notice that, CalendarUserControl.ascx page is created. Copy and paste the following HTML.
<asp:TextBox ID="txtDate" runat="server" Width="115px"></asp:TextBox>
<asp:ImageButton ID="ImgBtn" runat="server"
ImageUrl="~/Images/Calendar.png" onclick="ImgBtn_Click" />
<asp:Calendar ID="Calendar1" runat="server" onselectionchanged="Calendar1_SelectionChanged">
</asp:Calendar>
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.
Part 101 - Implementing SSL in asp.net web application
Part 102 - Redirect http to https in IIS
Part 103 - Redirect http to https in iis using custom errors
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. A web form to capture date of birth is shown below in the image.
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 web forms, rather than repeating the same HTML mark up and code, on each and every web form, 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 re-usability 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"
Notice that, CalendarUserControl.ascx page is created. Copy and paste the following HTML.
<asp:TextBox ID="txtDate" runat="server" Width="115px"></asp:TextBox>
<asp:ImageButton ID="ImgBtn" runat="server"
ImageUrl="~/Images/Calendar.png" onclick="ImgBtn_Click" />
<asp:Calendar ID="Calendar1" runat="server" onselectionchanged="Calendar1_SelectionChanged">
</asp:Calendar>
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.
No comments:
Post a Comment
It would be great if you can help share these free resources