在ASP.NET項目中經常會用到下拉框控件，但是ASP.NET提供的DropDownList控件不能修改樣式，經常會與網站整體風格格格不入。這裡要介紹的dhtmlXCombo控件是一款基于JQuery的下拉框控件，可以自定義樣式。
我在使用這款控件之前在網上搜尋有關該控件在ASP.NET中的使用方法，但是相關的文章幾乎沒有，而該控件也隻提供了php項目中的使用說明，也提供了從.xml檔案中動态讀取資料的例子，但是并沒有從關系資料庫中動态讀取資料的例子。于是我自己研究了一番，果然成功了！為友善起見，下面我将示範該控件從Access資料庫中動态讀取資料的例子。
首先你需要到官網上下載下傳這個控件包，網址：http://www.dhtmlx.com/x/download/regular/110318/dhtmlxSuite.zip
官網： http://www.dhtmlx.com
壓縮包 dhtmlxSuite.zip 中包含了這個控件。
下面我們建立一個網站項目來進行測試，項目的檔案清單如下圖：
你需要将dhtmlXCombo控件包複制到項目中。後面我将一個個介紹每個檔案的作用以及代碼清單。
在開始之前請先檢視“引用”檔案夾中是否包含System.Web.Extensions項，如果沒有就右擊項目根目錄選擇“添加引用”，在.NET頁中可以看到System.Web.Extensions庫。（如果這個庫不可見，但架構已安裝，可以選擇Browse（浏覽）頁手動添加Syystem.Web.Extensions.dll檔案。如果沒有看到這個庫，可以檢查你的安裝，确認确實已經正确安裝了架構。）
在這個對話框中，選擇System.Web.Extensions來增加ASP.NET AJAX庫的一個引用。因為在這個測試中我們要用到ASP.NET AJAX。
一． 配置Web.Config.
這個例子中使用的是Access資料庫，在web.config檔案中把 < connectionStrings / > 替換為
< connectionStrings >
< add name = " testdbConnectionString " connectionString = " Provider=Microsoft.Jet.OLEDB.4.0;Data Source=D:/ 測試 /dhtmlXComboTest/testdb.mdb;Persist Security Info=True;Jet OLEDB:Database Password=admin "
providerName = " System.Data.OleDb " />
</ connectionStrings >
（Data Source中的檔案路徑根據你存放testdb.mdb路徑進行修改）。
這裡的testdb.mdb檔案存放了兩張表，一張T_Province表，一張T_City表，分别用來存放中國省份資訊和城市資訊，為簡單起見這裡隻收錄了三個省的資訊。
二． 使用ASP.NET Web服務。
在項目中建立一個WebServive，命名為TestWebService.asmx。檔案的代碼如下：
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Data.OleDb;
using System.Collections.Generic;
namespace dhtmlXComboTest
{
/// <summary>
/// TestWebService 的摘要說明
/// </summary>
[ WebService (Namespace = "http://tempuri.org/" )]
[ WebServiceBinding (ConformsTo = WsiProfiles .BasicProfile1_1)]
[ ToolboxItem ( false )]
// 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消對下行的注釋。
[System.Web.Script.Services. ScriptService ] // ！！！！！！！！！！！允許使用 ASP.NET AJAX 從腳本調用此 Web 服務。
public class TestWebService : System.Web.Services. WebService
{
private string ConnectionString
{
get
{
return System.Configuration. ConfigurationManager .ConnectionStrings[ "testdbConnectionString"].ToString();
}
}
private OleDbConnection myConnection
return new OleDbConnection ( this .ConnectionString);
[ WebMethod ]
private void OpenDataSource()
if ( this .myConnection != null )
if ( this .myConnection.State == ConnectionState .Closed)
{
try
{
myConnection.Open();
}
catch ( Exception ex)
throw new Exception (ex.ToString(), ex);
}
private void CloseDataSource()
if ( this .myConnection.State == ConnectionState .Open)
myConnection.Close();
private DataSet ExctueForDataSet( string sqlStr)
this .OpenDataSource();
OleDbDataAdapter myDataAdapter = new OleDbDataAdapter (sqlStr, myConnection);
DataSet dataSet = new DataSet ();
myDataAdapter.Fill(dataSet);
this .CloseDataSource();
return dataSet;
/// <summary>
/// 擷取省份資訊
/// </summary>
/// <returns></returns>
public List < ProvinceInfo > GetProvinceList()
// 查詢省份資訊
string sql = "Select ProvinceID,ProvinceName From T_Province Order By ProvinceID asc" ;
// 填充到 DataSet 中
DataSet ds = this .ExctueForDataSet(sql);
// 建立 ProvinceInfo 的範型
List < ProvinceInfo > provinceList = new List < ProvinceInfo >();
for ( int i = 0; i < ds.Tables[0].Rows.Count; i++)
int provinceId = Convert .ToInt32(ds.Tables[0].Rows[i][ "ProvinceID" ].ToString());
string provinceName = ds.Tables[0].Rows[i][ "ProvinceName" ].ToString();
provinceList.Add( new ProvinceInfo (provinceId, provinceName));
// 傳回結果
return provinceList;
/// 擷取指定省份下的城市資訊
/// <param name="nProvinceID"></param>
public List < CityInfo > GetCityList( int nProvinceID)
string sql = "Select CityID,CityName,ProvinceID From T_City Where ProvinceID=" + nProvinceID + " Order By CityID asc" ;
// 建立 CityInfo 的範型
List < CityInfo > cityList = new List < CityInfo >();
if (ds.Tables[0].Rows.Count > 0)
for ( int i = 0; i < ds.Tables[0].Rows.Count; i++)
int cityId = Convert .ToInt32(ds.Tables[0].Rows[i][ "CityID" ].ToString());
string cityName = ds.Tables[0].Rows[i][ "CityName" ].ToString();
int provinceId = Convert .ToInt32(ds.Tables[0].Rows[i][ "ProvinceID" ].ToString());
cityList.Add( new CityInfo (cityId, cityName, provinceId));
return cityList;
}
}
這個服務用來從資料庫中讀取省份資訊，并讀取指定省份下的城市資訊。其中 GetProvinceList() , GetCityList( int nProvinceID) 方法的傳回類型為範型，範型清單中的資料類型分别 為ProvinceInfo和CityInfo， 這是兩個自定義類， 定義在 TestClass.cs 檔案中 。 代碼如下 ：
using System.Configuration;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
public class ProvinceInfo
public ProvinceInfo()
public ProvinceInfo( int nProvinceID, string sProvinceName)
this .m_ProvinceID = nProvinceID;
this .m_ProvinceName = sProvinceName;
private int m_ProvinceID;
public int ProvinceID
return this .m_ProvinceID;
private string m_ProvinceName;
public string ProvinceName
return this .m_ProvinceName;
public class CityInfo
public CityInfo()
public CityInfo( int nCityID, string sCityName, int nProvinceID)
this .m_CityID = nCityID;
this .m_CityName = sCityName;
private int m_CityID;
public int CityID
return this .m_CityID;
private string m_CityName;
public string CityName
return this .m_CityName;
到此為止，背景已準備完畢，下面來看看如何從頁面調用這些代碼來把資料動态的寫到
dhtmlXCombo控件中。
三． 前台調用Web服務。
建立一個dhtmlXComboTest.aspx頁面，頁面代碼如下：
<% @ Page Language ="C#" AutoEventWireup ="true" CodeBehind ="dhtmlXComboTest.aspx.cs"
Inherits ="dhtmlXComboTest.dhtmlXComboTest" %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml">
< head runat ="server">
< title > dhtmlXCombo 測試頁 </ title >
< script type ="text/javascript">
window.dhx_globalImgPath= "../Js/dhtmlxCombo/codebase/imgs/" ;
</ script >
< link rel ="STYLESHEET" type ="text/css" href ="../Js/dhtmlxCombo/codebase/dhtmlxcombo.css" />
< script type ="text/javascript" src ="../Js/dhtmlxCombo/codebase/dhtmlxcommon.js"></ script >
< script type ="text/javascript" src ="../Js/dhtmlxCombo/codebase/dhtmlxcombo.js"></ script >
< script src ="../Js/dhtmlxCombo/codebase/ext/dhtmlxcombo_whp.js" type ="text/javascript"></ script >
</ head >
< body >
< form id ="form1" runat ="server">
< asp : ScriptManager ID ="ScriptManager1" runat ="server">
< Services >
< asp : ServiceReference Path ="~/TestWebService.asmx" />
</ Services >
</ asp : ScriptManager >
< div >
< div id ="combo_province" style =" width : 115px ; height : 30px">
</ div >
< script type ="text/javascript">
var combo1= new dhtmlXCombo( "combo_province" , "combo_province" ,115);
combo1.addOption( "0" , " 選擇省份 " );
combo1.setComboValue( "0" );
</ script >
</ div >
< div id ="combo_city" style =" width : 115px ; height : 30px">
var combo2= new dhtmlXCombo( "combo_city" , "cobo_city" ,115);
combo2.addOption( "0" , " 選擇城市 " );
combo2.setComboValue( "0" );
combo2.attachEvent( "onSelectionChange" ,onCitySelectionChange); // 添加下拉框的 onchange 事件
dhtmlXComboTest.TestWebService.GetProvinceList(onGetProvinceListSuccess,onFailure); // 調用 Web 服務中的GetProvinceList 方法
combo1.attachEvent( "onSelectionChange" ,onProvinceSelectionChange); // 添加下拉框的 onchange 事件
function onGetProvinceListSuccess(result,context,methodName)
for ( var i=0;i<result.length;i++)
combo1.addOption(result[i].ProvinceID.toString(),result[i].ProvinceName);
function onProvinceSelectionChange()
dhtmlXComboTest.TestWebService.GetCityList(combo1.getSelectedValue(),onGetCityListSuccess,onFailure);
return true ;
function onGetCityListSuccess(result,context,methodName)
if (result.length>0)
combo2.clearAll(); // 清空舊的清單
for ( var i=0;i<result.length;i++)
combo2.addOption(result[i].CityID.toString(),result[i].CityName);
combo2.setComboValue(result[0].CityID.toString()); // 設定下拉框的值為資料第一行的值
else
combo2.clearAll();
combo2.addOption( "0" , " 選擇城市 " );
combo2.setComboValue( "0" );
function onCitySelectionChange()
$get( "msg" ).innerHTML= " 您選擇了： " + combo1.getSelectedText()+ "-" +combo2.getSelectedText();
// 錯誤處理
function onFailure(error,context,methodName)
var errorMessage=error.get_message();
alert(errorMessage);
< div id ="msg">
</ form >
</ body >
</ html >
OK，一切就緒，現在你已經可以測試你的成果了！
源碼下載下傳：http://download.csdn.net/source/3326008 ，請用VS2008以上版本打開。