Page 1 of 1

Custom Controls PT II Composite Control

#1 rgfirefly24  Icon User is offline

  • D.I.C Lover
  • member icon


Reputation: 267
  • View blog
  • Posts: 1,477
  • Joined: 07-April 08

Posted 18 June 2008 - 11:26 AM

Today we will be looking into create Custom server controls that user multiple controls within it. The previos phrase may sound
a little confusing so let me go into it a little bit.

When you want to create a control lets say for entering a birth date, you may not want to have to configure 3 different drop down
lists, so instead you want to create one control to do this for you. Well there is a way to do this, and its called a Composite
control.

Composite controls are made up of 2 or more other controls. they can be controls that come with visual studio or controls that
you have made yourself. In this tutorial we will be creating a composite control for a birth date field.

Needed items for this tutorial:

Visual Studio 2005 preferably with AJAX toolkit extensions.

Assumtions before we begin:
Before beginning this tutorial please read my tutorial on creating custom controls. I will be assuming you have done that
while going through this one.

Lets name this one BirthdateControl

First lets look at the using section of your control

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



ok, next we will need to extend a different class instead of webcontrol
this would be CompositeControl.

 public class Birthdate : CompositeControl 
 


next go ahead and get rid of the Text property and the Render Controls method we wont need those.

ok after you've deleted those we need to create 3 drop down lists. to do this you will just create
new instances of the drop down list.

DropDownList Month = new DropDownList();
DropDownList Day = new DropDownList();
DropDownList Year = new DropDownList();



now that we have our three instances lets go ahead and add some properties to this control

the will be:
 private int _StartYear = 0;
public int StartYear
{
	get
	{
	   return _StartYear;
	}
	set
	{
	   _StartYear = value;
	}
}
private int _EndYear = 0;
public int EndYear
{
	get
	{
		return _EndYear;
	}
	set
	{
		_EndYear = value;
	}
}



these are the same properties we set for the YearControl project.

now after we have finished with the properties its time to start creating Composite Control.

The first piece of a composite control is the CreateChildControls(). This method already exists so we will override it

protected override void CreateChildControls()
		{
			this.Controls.Add(new LiteralControl("<div style=\"text-align: center\">"));
			this.Controls.Add(Month);
			this.Controls.Add(new LiteralControl(""));
			this.Controls.Add(Day);
			this.Controls.Add(new LiteralControl(""));
			this.Controls.Add(Year);
			this.Controls.Add(new LiteralControl("</div>"));
			Year.AutoPostBack = true;
			Month.AutoPostBack = true;
			Month.SelectedIndexChanged += new EventHandler(this.Month_SelectedIndexChanged);
			Year.SelectedIndexChanged += new EventHandler(this.Year_SelectedIndexChanged);
			
			base.CreateChildControls();
		}



notice that we add the HTML in this section also. This is done via new LiteralControl.
The reason for this is because these drop down lists are all inside a composite control they
are uneffected by the html on your aspx page.

this is also where we add the actual controls using this.Controls.Add().

You will also notice a couple extra items in the method:


Year.AutoPostBack = true;
			Month.AutoPostBack = true;
			Month.SelectedIndexChanged += new EventHandler(this.Month_SelectedIndexChanged);
			Year.SelectedIndexChanged += new EventHandler(this.Year_SelectedIndexChanged);




The AutoPostback = true section just tells the aspx page that the control causes postback when the Year or Month drop down
lists are worked with.

Since we want something to happen based upon what year/month is selected we need to add event handlers to those items

Month.SelectedIndexChanged += new EventHandler(this.Month_SelectedIndexChanged);
			Year.SelectedIndexChanged += new EventHandler(this.Year_SelectedIndexChanged);



the section shown above adds new eventhandlers to the selectedindexchanged events of the Month and Year dropdown. Doing this
also creates the methods that will be used to handle such events.

lets go ahead and look at those now:

protected void Year_SelectedIndexChanged(object sender, EventArgs e)
		{
			if (Month.SelectedItem.ToString() == "Febuary")
			{
				LeapYear();
			}
		}

		protected void Month_SelectedIndexChanged(object sender, EventArgs e)
		{
			if (Month.SelectedItem.ToString() == "Febuary")
			{
				LeapYear();
			}
			else
			{
				DayBuilder();
			}

		}



You will see that every time the SelectedIndexChanged events are fired we are going to check the year to make sure
if its a leapyear only if the month selected == febuary. otherwise if the month is changed we will build the day
drop down based upon how many days are actually in that month.

lets take a look at the methods used above.

firt the leapyear method

 void LeapYear()
		{
			Day.Items.Clear();

			int year = Convert.ToInt32(Year.SelectedValue.ToString());
			if ((year % 4) == 0)
			{
				if ((year % 100) == 0)
				{
					if ((year % 400) == 0)
					{
						for (int x = 1; x <= 29; x++)
						{
							Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
						}
					}
					else
					{
						for (int x = 1; x <= 28; x++)
						{
							Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
						}
					}
				}
				else
				{
					for (int x = 1; x <= 29; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
				}
			}
			else
			{
				for (int x = 1; x <= 28; x++)
				{
					Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
				}
			}
		}
 


A leap year is defined as any year in which when divided by 4 or 400 the remainder is 0. However, if the
year is divisable by 100 with a remainder of 0 then it is not a leapyear.

The first piece of the code is Day.Items.Clear() this clears the items out of the day drop down so that we can
put the new items in with out appending them at the end.

the next part converts the String value of SelectedValue to an integer to be used in math functions.

now comes our 3 if statements.

The first checks to see if the year devided by 4 returns a remainder of 0. If it does it goes to the next
if statement, if not then it fills the day drop down with numbers 1-28.

the next if statement is embeded inside the first for the reason that the years divisable by 100 are not leap years
I.E 1900 is divisable by 4(475) with a remainer of 0 but since it is also divisable by 100 it is not a leap year.

so if the date passes the first but fails the second test we know it is a leapyear so we output days 1-29, but if it passes
the first and second if statements we need to make sure that the year is divisable by 400 or not. A year divisable by 400 is
a leap year.

ok, so you get the jist of that section now lets look at the other method DayBuilder() This method builds the days of the month for
all months except febuary.

public void DayBuilder()
		{
			Day.Items.Clear();

			switch (Month.SelectedItem.ToString())
			{
				case "January":
					for (int x = 1; x <= 31; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
					break;
				case "March":
					for (int x = 1; x <= 31; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
					break;
				case "April":
					for (int x = 1; x <= 30; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
					break;
				case "May":
					for (int x = 1; x <= 31; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
					break;
				case "June":
					for (int x = 1; x <= 30; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
					break;
				case "July":
					for (int x = 1; x <= 31; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
					break;
				case "August":
					for (int x = 1; x <= 31; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
					break;
				case "September":
					for (int x = 1; x <= 30; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
					break;
				case "October":
					for (int x = 1; x <= 31; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
					break;
				case "November":
					for (int x = 1; x <= 30; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
					break;
				case "December":
					for (int x = 1; x <= 31; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
					break;
				default:
					for (int x = 1; x <= 31; x++)
					{
						Day.Items.Add(new ListItem(x.ToString(), x.ToString()));
					}
					break;
			}
		}



in this method we again clear the day drop down list of all items, then based of a switch statement that checks
which month is selected we will build the Day drop down with either 30 or 31 days.


our last method we use is BuildMonth(). This method is called in the OnInit(). It will build the month drop down list
with the months of the year

void BuildMonth()
		{
			Month.Items.Add(new ListItem("January", "01"));
			Month.Items.Add(new ListItem("Febuary", "02"));
			Month.Items.Add(new ListItem("March", "03"));
			Month.Items.Add(new ListItem("April", "04"));
			Month.Items.Add(new ListItem("May", "05"));
			Month.Items.Add(new ListItem("June", "06"));
			Month.Items.Add(new ListItem("July", "07"));
			Month.Items.Add(new ListItem("August", "08"));
			Month.Items.Add(new ListItem("September", "09"));
			Month.Items.Add(new ListItem("October", "10"));
			Month.Items.Add(new ListItem("November", "11"));
			Month.Items.Add(new ListItem("December", "12"));
		}



now lets look at the OnInit() method. Now remember that this method already exsists in the Composite control base class, so we will override it.

 protected override void OnInit(EventArgs e)
		{
			EnsureChildControls();
			populatedropdown();
			BuildMonth();
			DayBuilder();
			
			base.OnInit(e);
		}
		



you already have seen populateddropdown() from the yeardropdownlist we did in the first tutorial.

BuildMonth, and Daybuilder are called here to populate those dropdownlists initially.

The one thing we havent seen before is the EnsureChildcontrols();

This method makes sure that our controls are added to the page before anything has happened.

This will also need to be added to the get set of all our properties like so:

 private int _StartYear = 0;
		public int StartYear
		{
			get
			{
				EnsureChildControls();
				return _StartYear;
				
			}
			set
			{
				_StartYear = value;
				EnsureChildControls();
			}
		}
		private int _EndYear = 0;
		public int EndYear
		{
			get
			{
				EnsureChildControls();
				return _EndYear;
				
			}
			set
			{
				_EndYear = value;
				EnsureChildControls();
			}
		}



well this wraps up the building of the actual control. now i'll reiterate how to add the control to your aspx page.

In the Solution explorer click on the solution name of this project then go file, add, new project.
Select Visual C# web, ASP with AJAX extensions(or AJAX toolkit extensions if you have that installed)

Next set your aspx project to your startup project and double click on default. In the source view

add the register tag for your control, and remember to add the refernce to it in your references section.

Now either drag and drop the control to your design view or manually add it to your source view.

And thats how you create a Composite control.

Next tutorial will go into how to add custom controls to a composite control.




Attached File  BirthdateControl.zip (62.02K)
Number of downloads: 425

Is This A Good Question/Topic? 0
  • +

Replies To: Custom Controls PT II

#2 OceateVep  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 23-February 11

Posted 23 February 2011 - 08:08 AM

Thankyou for putting this up
my neighbour has been on the lookout for this sort of thing for months
I have emailed a link over.

Car Leasing - Van Leasing - Car Leases
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1