Creating a 'States' User Control in ASP.NET

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!

Related Posts:

• No Related Posts