1. Create a Sample Web Site

Launch Visual Studio 2005 and create an ASP.NET website named JavaScriptWay (select Visual C# as the built-in language).

Open the web page "Default.aspx" and make some modification with it. The following Figure gives the final design-time snapshot.

Figure 3: The design-time snapshot for Sample 2

Note that here the DropDownList control is directly embedded inside the page, in contrast to that in Sample 1.

Now, let us start to research into the most interesting part - injecting JavaScript into the client side.

2. Inject the client-side JavaScript

Press F7 and switch to the CodeFile "Default.aspx.cs."  With the foregoing analysis, we would better achieve the goal of injecting all the required JavaScript functions into the client side at the very time the page just start being loaded. OK, the best site should be function Page_Load. Listing 6 shows the interesting inner workings.

Listing 6

protected void Page_Load(object sender, EventArgs e)
{
  StringBuilder myscript = new StringBuilder();
  myscript.Append("function Search()    {\n");
  myscript.Append("var city=document.getElementById('txtCity').value; \n");
  myscript.Append("switch(city)       {\n");
  myscript.Append("case 'BeiJing': \n");
  myscript.Append("FillData('" + GetAreaStr("BeiJing") + "'); \n");
  myscript.Append("break; \n");
  myscript.Append("case 'ShangHai': \n");
  myscript.Append("FillData('" + GetAreaStr("ShangHai") + "'); \n");
  myscript.Append("break; \n");
  myscript.Append("case 'WeiFang': \n");
  myscript.Append("FillData('" + GetAreaStr("WeiFang") + "'); \n");
  myscript.Append("break; }\n");
  myscript.Append(" }\n");
  if (!Page.ClientScript.IsClientScriptBlockRegistered("Search"))
  {
    Page.ClientScript.RegisterClientScriptBlock(typeof(string), "Search",
      myscript.ToString(), true);
  }
}
 
private string GetAreaStr(string city)
{
  string area = "";
  switch (city)
  {
    case "BeiJing":
      area = "Chao Yang,Hai Dian,East City,West City";
      break;
    case "ShangHai":
      area = "Pu Dong,Jing An,Hong Kou,Xu Hui";
      break;
    case "WeiFang":
      area = "Fang Zi,Wei Cheng,Kui Wen,Kai Fa";
      break;
  }
  return area;
}

Here, we have created and embedded a JavaScript function "Search" into a StringBuilder object; finally, we call Page.ClientScript.RegisterClientScriptBlock to inject the code of JavaScript function "Search" into the client side. In building up the string we have mentioned a client-side helper function "FillData" which must be created on the client side.  Also, for simplicity, we have hard coded the helper function GetAreaStr.

For now, cute readers may have noticed something. Undoubtedly, we have hard coded the JavaScript code to be injected into the client side, which obviously results in poor flexibility.

3. The client-side Coding

Now, let us take a quick look at the client-side function FillData. The following lists the complete source code of this function.

Listing 7

function FillData(strArea)
{
  document.getElementById("DropDownList1").options.length = 0;
  var indexofcity;
  var city;
  while (strArea.length > 0)
  {
    indexofcity = strArea.indexOf(",");
    if (indexofcity > 0)
    {
      city = strArea.substring(0, indexofcity);
      strArea = strArea.substring(indexofcity + 1);
      document.getElementById("DropDownList1").add(new Option(city, city));
    }
    else
    {
      document.getElementById("DropDownList1").add(new Option(strArea, strArea))
        ;
      break;
    }
  };
}

Simply put, this function uses a while loop to cut the passed string (which holds area names related to the city specified by the user) into pieces and populate the control "DropDownList1" with them.

That is all!  Now it is time to appreciate the final result. Just press F5 and, without anything wrong, you will see the run-time snapshot as displayed in Figure 4.

Figure 4: The run-time snapshot for Sample 2

Next, let us continue to dig into another way to achieve the partially updating effects.