原文：http://blog.csdn.net/asengine11/article/details/6455267
在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
{
get
{
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);
}
}
}
}
[ WebMethod ]
private void CloseDataSource()
{
if ( this .myConnection != null )
{
if ( this .myConnection.State == ConnectionState .Open)
{
try
{
myConnection.Close();
}
catch ( Exception ex)
{
throw new Exception (ex.ToString(), ex);
}
}
}
}
[ WebMethod ]
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>
[ WebMethod ]
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;
}
/// <summary>
/// 获取指定省份下的城市信息
/// </summary>
/// <param name="nProvinceID"></param>
/// <returns></returns>
[ WebMethod ]
public List < CityInfo > GetCityList( int nProvinceID)
{
// 查询省份信息
string sql = "Select CityID,CityName,ProvinceID From T_City Where ProvinceID=" + nProvinceID + " Order By CityID asc" ;
// 填充到 DataSet 中
DataSet ds = this .ExctueForDataSet(sql);
// 新建 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;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace dhtmlXComboTest
{
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
{
get
{
return this .m_ProvinceID;
}
}
private string m_ProvinceName;
public string ProvinceName
{
get
{
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;
this .m_ProvinceID = nProvinceID;
}
private int m_CityID;
public int CityID
{
get
{
return this .m_CityID;
}
}
private string m_CityName;
public string CityName
{
get
{
return this .m_CityName;
}
}
private int m_ProvinceID;
public int ProvinceID
{
get
{
return this .m_ProvinceID;
}
}
}
}
到此为止，后台已准备完毕，下面来看看如何从页面调用这些代码来把数据动态的写到
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 >
< div id ="combo_city" style =" width : 115px ; height : 30px">
</ div >
< script type ="text/javascript">
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();
return true ;
}
// 错误处理
function onFailure(error,context,methodName)
{
var errorMessage=error.get_message();
alert(errorMessage);
}
</ script >
</ div >
< div id ="msg">
</ div >
</ form >
</ body >
</ html >
OK，一切就绪，现在你已经可以测试你的成果了！
源码下载：http://download.csdn.net/source/3326008 ，请用VS2008以上版本打开。