Adding composite custom controls to visual studio tool box

Suggested Videos
Part 110 - Loading asp.net controls dynamically
Part 111 - Navigating to a specific month and an year in an asp.net calendar control
Part 112 - ASP.NET custom server controls

In this video we will discuss about
1. Adding composite custom controls to visual studio toolbox 
2. Using composite custom controls in an asp.net web application



In Part 112, we discussed about building composite custom controls. Please watch Part 112, before proceeding with this video.

Adding composite custom controls to visual studio toolbox:
1. Build the "CustomControls" project that we have developed in Part 112 of asp.net video series. Building the project should produce "CustomControls.dll" assembly which contains our "CustomCalendar" control. Since, we have created the project in C:\ drive, the assembly should be present at the following path.
C:\CustomControls\CustomControls\bin\Debug
2. Open visual studio. Create a new asp.net web application project.
3. In visual studio toolbox, right click anywhere, and select "Add Tab"
4. Name the tab "Custom Controls".
5. Right click under "Custom Controls" and select "Choose Items"
6. In the "Choose Toolbox Items" dialog box, click "Browse" button.
7. Navigate to "C:\CustomControls\CustomControls\bin\Debug" and select "CustomControls.dll" and click "Open"
8. Now click "OK" on the "Choose Toolbox Items" dialog box.
9. Notice that "CustomCalendar" control is added to the toolbox under "Custom Controls" tab.



Using composite custom controls in an asp.net web application:
Flip "WebForm1.aspx" to "Design" mode. Drag and Drop "CustomCalendar" control onto "WebForm1.aspx". This should automatically add the control to the webform and the control declaration looks as as shown below, in the source mode of webform1.aspx.
<cc1:CustomCalendar ID="CustomCalendar1" runat="server" />

Notice that a "Register" directive is also automatically, added under "Page" directive.
<%@ Register assembly="CustomControls" namespace="CustomControls" tagprefix="cc1" %>

At this point, run the project and notice that the "CustomCalendar" control has several issues. For example
1. There is no image associated with the Image button
2. The calendar is always visible. We want the Calendar to be invisible at first. The calendar should be shown, when the user clicks the image button.
3. Also, when select a date with in calendar, nothing happens. We want the text box, to be populated with the selected date.

We will discuss about fixing these issues in our upcoming videos.

No comments