Finishing an ASP.NET AJAX-based Application

---

A downloadable .rar file is available for this article.

---

Using the CascadingDropDown Control to Join Together Multiple DropDownList Controls

CascadingDropDown is one of the exciting server controls through which we can easily join together multiple ASP.NET 2.0 DropDownList controls. Now we will use this control to reconstruct the jobsearch.aspx page, where there are two DropDownList controls to let users select the job-related country and state, as illustrated in the following Figure 4.

Figure 4 The pre-modified snapshot for the jobsearch.aspx page.

Here, the initial state of the first DropDownList is set to "Not Set." When users select a country from this control, a post back will be automatically invoked to obtain the state list of the related country and populate the second DropDownList control with these data for users to select further.

Apparently, the above design will result in low efficiency -- the post back after selecting a country will dramatically diminish the fluency of the application. Furthermore, with quite a few web pages utilizing this whole-page post back action to let users input information about countries and states, this is a pretty unprofessional measure.

With this drawback, we should reconstruct. The simplest method is to enclose the two DropDownList controls with an UpdatePanel control, which is of course simple and effective, but still not highly efficient. For now, clever readers may have remembered the ASP.NET AJAX Control Toolkit control named CascadingDropDown. The CascadingDropDown control is efficient in dealing with this kind of associated dropdown list since it merely gets the necessary data from the server side. For more details about CascadingDropDown, you can refer to the online tutorials.

Authoring the Web Service to Supply with Data

Right click the project and choose "Add new item" to create a new Web Service named LocationService.asmx. Next, we will open the LocationService.cs file and create the required web methods.

First, as required by the framework, we must put the ScriptService attribute before the Web Service so that the MS AJAX JavaScript framework will call it correctly:

 

[System.Web.Script.Services.ScriptService]

 

Now, let's first define a Web Method named GetCountries, through which we can get the list of countries from DropDownList control named ddlCountry:

 

[WebMethod]

public CascadingDropDownNameValue[] GetCountries(string knownCategoryValues, string category)

{

   List<CascadingDropDownNameValue> countryList = new List<CascadingDropDownNameValue>();

 

   DataSet dsCountry = Country.GetCountries();

   foreach (DataRow row in dsCountry.Tables[0].Rows)

   {

     countryList.Add(new CascadingDropDownNameValue(row["CountryName"].ToString(), row["CountryID"].ToString()));

   }

 

   return countryList.ToArray();

}

 

Note that in this method we invoke the Country.GetCountries() method to get all the related countries' information and use it to populate a list named "countryList."

Next, define another Web Method -- GetStatesForCountry -- through which we can get the list of states for the DropDownList named "ddlState" according to the item selected from the first DropDownList control, named ddlCountry:

 

[WebMethod]

public CascadingDropDownNameValue[] GetStatesForCountry(string knownCategoryValues, string category)

{

   StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

   List<CascadingDropDownNameValue> stateList = new List<CascadingDropDownNameValue>();

   DataSet dsState = State.GetStates(int.Parse(kv["Country"]));

   foreach (DataRow row in dsState.Tables[0].Rows)

   {

     stateList.Add(new CascadingDropDownNameValue(row["StateName"].ToString(), row["StateID"].ToString()));

   }

   return stateList.ToArray();

}

 

First, the knownCategoryValues parameter which represents the selected content from the DropDownList ddlCountry is passed into this web method. Second, we resolve this parameter into a StringDictionary object. Third, we get the information about the states associated with the specified country by calling the  State.GetStates() method. Finally, an array of the states list is returned.

Adding the CascadingDropDown Control to the Web Page

First, let's do some cleaning. Remove the two properties named AutoPostBack and OnSelectedIndexChanged from the two corresponding DropDownList controls. The following shows the code after modification:

 

<asp:DropDownList ID="ddlCountry" Runat="server" >

</asp:DropDownList>

//omitted…

<asp:DropDownList ID="ddlState" Runat="server">

</asp:DropDownList>

 

Second, let's add the two CascadingDropDown controls:

 

<ajaxToolkit:CascadingDropDown ID="cddCountry" runat="server"

   TargetControlID="ddlCountry"

   Category="Country"

   PromptText="Please Choose a Country"

   LoadingText="Loading Countries..."

   ServicePath="../LocationService.asmx"

   ServiceMethod="GetCountries" />

<ajaxToolkit:CascadingDropDown ID="cddCity" runat="server"

   TargetControlID="ddlState"

   Category="City"

   PromptText="Please Choose a State"

   LoadingText="Loading States..."

   ServicePath="../LocationService.asmx"

   ServiceMethod="GetStatesForCountry"

   ParentControlID="ddlCountry" />

 

Let's take a close look at the first <ajaxToolkit:CascadingDropDown>. Note that its TargetControlID property is bound to the DropDownList "ddlCountry" and the Category is set to "Country" (please refer to the sentence "…kv["Country"]));" within the Web Method named GetStatesForCountry). And also, the ServicePath property is pointing to the Web Service we've just defined, and ServiceMethod is bound to the corresponding method named GetCountries, which indicates that the data source of this DropDownList comes from it. Similar things happen with the second <ajaxToolkit:CascadingDropDown>. However, the real secret that joins the two CascadingDropDowns together lies in the ParentControlID property of the second CascadingDropDown.

Last but not least, according to the materials provided by MS AJAX framework, we have to disable the validate event of the related web page, or else there will be an "Invalid post back or callback argument" exception thrown during the post back of this page. Please refer to the following code in bold:

 

<%@ Page Language="C#" EnableEventValidation="false" MasterPageFile="~/MasterPage.master" CodeFile="jobsearch.aspx.cs" Inherits="jobsearch_aspx" Title="Untitled Page" %>

 

Modifying the Related Contents in the CodeFile

Now, with the above modification of the two DropDownList controls, we have to rebuild the corresponding parts within the codeFile-jobsearch.aspx.cs. First, open file jobsearch.aspx.cs and comment out (or delete) the two original methods-FillCountries() and FillStates() and all the invocations to them. Second, inside function Page_Load, the initial mode to operate with the two DropDownList controls have to be changed. The final code snippet looks like this:

 

//omitted…

//ddlCountry.SelectedIndex = s.CountryID;

//FillStates();

//ListItem li= ddlState.Items.FindByValue(s.StateID.ToString());

//if (li != null)

//{

//   ddlState.ClearSelection();

//   li.Selected = true;

//}

cddCountry.SelectedValue = s.CountryID.ToString();

cddCity.SelectedValue = s.StateID.ToString();

 

As indicated in the above code, the part commented out is replaced with the two lines below. There are now two functions left to be reformed: the event handler btnMySearches_Click for the "Add to My Searches" button and the helper method named BindGrid used to bind the searching result to control GridView, respectively. However, for brevity, we'll omit them; please refer to the downloadable source code for details.

Conclusion

In this article, we've outlined the three possible patterns to construct a web application and examined the pros and cons of each solution. Subsequently, we focused on rebuilding a legacy ASP.NET 2.0 web application -- the famous Microsoft Job Site Starter Kit and put forward several tips in an attempt to ajaxify it. However, there is still much that can be improved in JSSK using MS AJAX, such as enhancing the MyFavorites.aspx page through client-side WebParts-related controls, and more. Altogether, with the effort being exerted by Microsoft to encourage more and more developer communities and third parties to join in, MS AJAX may become an excellent tool in constructing or reconstructing web 2.0 applications.

blog comments powered by Disqus