Thursday, April 3, 2008

A good example of a particular repeatable scenario within a website would be
a DropDownList of States (for those living in the United States, of course).
There's no need to create the code for this scenario multiple times within a web
site. The best choice is to create a User Control for this, if you have multiple
places where it can be used.


Let's start off by creating the DropDownList on the page:


 


<asp:DropDownList id="ddlStates" runat="server"/>


 

Now, let's populate the DropDownList with the states (some of you will
recognize this from a previous Code Sample).


 


Sub Page_Load(Source as Object, E as EventArgs)
if not Page.IsPostBack then
Dim sStates() as string={"","AK", "AL", "AR", "AS", "AZ", "CA", "CO", "CT", _
"DC", "DE", "FL", "GA", "GU", "HI", "IA", "ID", "IL", "IN", "KS", "KY", "LA", _
"MA", "ME", "MD", "MI", "MN", "MO", "MP", "MS", "MT", "NC", "ND", "NE", _
"NH", "NJ", "NM", "NV", "NY", "OH", "OK", "OR", "PA", "PR", "RI", "SC", "SD", _
"TN", "TX", "UT", "VA", "VI", "VT", "WA", "WI", "WV", "WY"}
ddlStates.datasource=sStates
ddlStates.databind()
end if
End Sub


 

So far, that's pretty straightforward, but since we won't be accessing the
DropDownList directly, inside the User Control, we must create properties which
can be used to do what we need, for any properties which aren't intrinsically
inherited. For this example, we'll create a SelState Property and a TabIndex
Property. You'll most likely recognize the TabIndex property from other
controls. Here, since you're creating your own properties, you can call it
anything you'd like. For the sake of simplicity, we're calling it 'TabIndex' so
that it's function will be automatically recognized. To do this, here's the
code:


 


Public Property selState  As String
Get
Return ddlStates.SelectedItem.Text
End Get
Set
ddlStates.Items.FindByText(value).Selected = true
End Set
End Property

Public Property TabIndex As Integer
Get
Return ddlStates.TabIndex
End Get
Set
ddlStates.TabIndex=value
End Set
End Property


 

Now - to use the User Control in your pages, there are only two things you
need to do. First register the User Control at the top of the page:


 


<%@ Register TagPrefix="YourPrefix" tagname="states" src="../states.ascx" %>


 

Notice two things here - 'YourPrefix' - you can change this to anything you'd
like. My suggestion here, would be to give all your user controls the same
prefix, again, for the sake of simplicity. Also - the tagname can be anything
you want. Here's how to use it within your page:


 


<YourPrefix:states Visible="True" id="sl1" TabIndex="5" runat="server"/>


 

One more note here, is that you can use User Controls multiple times within a
single page. The only difference you'd need to make would be the id.
Naturally, in order to interface with each instantiation, individually, you'd
need to create a different id for each one.


OK - we're almost home, here. Let's say, we query a database for a record,
which has a state. With this data (in this example, we'll assign the data to a
global variable - 'strState'), we want to select the same state, in the
User Control we've just created. This is fairly simple, since we've already
created a property for this:


 


sl1.SelState=strState


 

(If you get an error doing this, try adding the above line in the Page
PreRender Event)


Any time we're using the selected State for other purposes, we can access it
directly, much in the same way:


 


myVar=sl1.SelState


 

One last thing - remember how we added a TabIndex property? Just use it the
same way you'd use it in any other control - within the tag itself:


 


<asp:DropDownList id="ddlStates" TabIndex="5" runat="server"/>


 

Here's the full code for the User Control:


 


<script language="VB" runat="server">
Public Property selState As String
Get
Return ddlStates.SelectedItem.Text
End Get
Set
ddlStates.Items.FindByText(value).Selected = true
End Set
End Property

Public Property TabIndex As Integer
Get
Return ddlStates.TabIndex
End Get
Set
ddlStates.TabIndex=value
End Set
End Property

Sub Page_Load(Source as Object, E as EventArgs)
if not Page.IsPostBack then
Dim sStates() as string={"","AK", "AL", "AR", "AS", "AZ", "CA", _
"CO", "CT", "DC", "DE", "FL", "GA", "GU", "HI", "IA", "ID", "IL", _
"IN", "KS", "KY", "LA", "MA", "ME", "MD", "MI", "MN", "MO", "MP", _
"MS", "MT", "NC", "ND", "NE", "NH", "NJ", "NM", "NV", "NY", _
"OH", "OK", "OR", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", _
"VA", "VI", "VT", "WA", "WI", "WV", "WY"}
ddlStates.datasource=sStates
ddlStates.databind()
end if
End Sub
</script>
<asp:DropDownList id="ddlStates" runat="server"/>


 

What we've shown here is a simple way to create a User Control, with
Properties, populated by the United States, so that it can be re-used multiple
times within any web site. Hopefully this wasn't too painful for you :) -- Happy
programming!

No comments: