下拉框控件dhtmlXCombo在ASP.NET中的使用详解-阿里云开发者社区

原文：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以上版本打开。

下拉框控件dhtmlXCombo在ASP.NET中的使用详解

热门文章

最新文章

相关电子书