This tutorial was created with Microsoft's Visual Studio.NET 2008, but can be recreated in 2005 with the AJAX Extensions, which can be downloaded at this link.
In this tutorial, you will learn how to use AJAX to create a seamless integration between two dependant DropDownList boxes. We will have one displaying a number of US States, and the second will be dependant upon the selection of the first, displaying some Cities of the chosen State.
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
First, we need to create our database. We will add two tables - one for States and one for Cities. The States table will just need an id column and a state column; the City table will need an id column, city column and a state column which refers to the state table.
Once we have our tables set up, we can add the DropDownLists to our ASPX page:
<form id="form1" runat="server">
State: <asp:DropDownList ID="ddlState" runat="server" AutoPostBack="true" />
<br />
City: <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="true" /> |
If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
For each of these DropDowns, we will need a Data Source. So we'll add two SqlDataSources like so:
<form id="form1" runat="server">
State: <asp:DropDownList ID="ddlState" runat="server" DataSourceID="SqlDataSource1"
DataTextField="state" DataValueField="state" AutoPostBack="true" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT state FROM tblStates ORDER BY state"></asp:SqlDataSource>
<br />
City: <asp:DropDownList ID="ddlCity" runat="server" DataSourceID="SqlDataSource2"
DataTextField="city" DataValueField="city" AutoPostBack="true" />
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT city FROM tblCities WHERE state=@state ORDER BY city">
<SelectParameters>
<asp:ControlParameter Name="state" ControlID="ddlState" />
</SelectParameters>
</asp:SqlDataSource> |
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
Note that the DataSources are selecting the data from the database to display in the DropDowns. We also have a where clause in our second SqlDataSource, which refers @state, which is defined in our ControlParameter - referring to the selected item of our first DropDown.
Using the code above, we will have a working web application, but the page will do a full PostBack when we select a State. To change this, we add a ScriptManager and an UpdatePanel:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
State: <asp:DropDownList ID="ddlState" runat="server" DataSourceID="SqlDataSource1"
DataTextField="state" DataValueField="state" AutoPostBack="true" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT state FROM tblStates ORDER BY state"></asp:SqlDataSource>
<br />
City: <asp:DropDownList ID="ddlCity" runat="server" DataSourceID="SqlDataSource2"
DataTextField="city" DataValueField="city" AutoPostBack="true" />
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT city FROM tblCities WHERE state=@state ORDER BY city">
<SelectParameters>
<asp:ControlParameter Name="state" ControlID="ddlState" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<br />
</form> |
The ScriptManager tag handles all our Requests and JavaScript - it does all the work for us. The UpdatePanel merely sets a region for the page to reload. Using AJAX in Visual Studio.NET 2008 couldn't be easier.
