Adding and using user controls on a webform

Suggested Videos
Part 102 - Redirect http to https in IIS
Part 103 - Redirect http to https in iis using custom errors
Part 104 - Creating user controls

In the previous video, we discussed about creating a calendar user control. Please watch Part 104, before proceeding with this video. In this video we will discuss about 
1. Adding and using user controls on a webform
2. Adding properties to the user control



Adding and using user controls on a webform
Adding user controls to a web page is very straight forward. Simply drag the user control from solution explorer and drop it on the web page. Make sure, the "Design" view of the webform is selected before dragging and dropping the user control on the webform. This will automatically, 
1. Add a "Register" directive for the user control and 
2. The control declaration



"Register" directive for the CalendarUserControl
<%@ Register src="CalendarUserControl.ascx" tagname="CalendarUserControl" tagprefix="uc1" %>

Control declaration for the CalendarUserControl
<uc1:CalendarUserControl ID="CalendarUserControl1" runat="server" />

Notice, the "tagprefix" and "tagname" in the "Register" directive. These are used in the control declaration. For asp.net controls, the "tagprefix" is "asp". Tagprefix, can be changed, if you wish to do so.

If you intend to add the user control on multiple web forms, rather than including the "Register" directive on each and every web form, every time, the control can be registered once in web.config file and can be used on any number of web forms, without the "Register" directive.
<system.web>
  <pages>
    <controls>
      <add src="~/CalendarUserControl.ascx" tagName="CalendarUserControl" tagPrefix="uc1"/>
    </controls>
  </pages>
</system.web>

At this point, you get the following error, if both, the user control and the webform are in the same directory. This limitation is by design due to an internal design consideration for performance.
The page '/WebForm2.aspx' cannot use the user control '/CalendarUserControl.ascx', because it is registered in web.config and lives in the same directory as the page.

To solve this error move the user control to a different folder, and update the "src" attribute of the "Register" directive in web.config file accordingly.

Adding properties to the user control:
A user control can also have it's own properties and methods. At the moment, CalendarUserControl does not expose any property that returns the selected date. 

For example, drag and drop a button control on the same webform. when I click this button, we want to print the selected date. To do this let's add the following SelectedDate property for the CalendarUserControl.
public string SelectedDate
{
    get
    {
        return txtDate.Text;
    }
    set
    {
        txtDate.Text = value;
    }
}

On the webform, in the button click event, I should now be able to retrieve, the selected date using "SelectedDate" property of the "CalendarUserControl" as shown below.
protected void Button1_Click(object sender, EventArgs e)
{
    Response.Write(CalendarUserControl1.SelectedDate);
}

You can also set this property declaratively in the HTML at design time as shown below. When this webform, loads, it shows the date, that we have set.
<uc1:CalendarUserControl SelectedDate="01/01/2013" ID="CalendarUserControl1" runat="server" />

But one limitation, here with the user control, is that the design time value is not shown in the control at design time. This is by design, and there are 2 ways to solve this issue.
1. Create a custom control instead of user control.
2. Compile the user control into a DLL.

We will be discussing about these in later video sessions.

In the next video session we will discuss about adding "events" to our "CalendarUserControl"

No comments