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

    在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();

                    }