AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2012-07-22 1152
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文：http://blog.csdn.net/asengine11/article/details/6455267    在ASP.NET项目中经常会用到下拉框控件，但是ASP.NET提供的DropDownList控件不能修改样式，经常会与网站整体风格格格不入。

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

文章标签：
JavaScript
.NET
前端开发
SQL
C#
PHP
数据格式
数据库
XML
开发框架
关键词：
ASP.NET控件
ASP.NET下拉框
冰点沐雪
目录
相关文章
东方睿赢
|
4月前
|
开发框架 JavaScript 前端开发
震撼！破解 ASP.NET 服务器控件 Button 执行顺序之谜，颠覆你的开发认知！
【8月更文挑战第16天】在ASP.NET开发中，通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如，在用户点击按钮前需前端验证或提示，确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证；若验证通过，则继续触发后台事件。此外，结合jQuery也能达到相同效果，利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
东方睿赢
52 8
东方睿赢
|
3月前
|
开发框架 JavaScript 前端开发
震撼！破解 ASP.NET 服务器控件 Button 执行顺序之谜，颠覆你的开发认知！
【9月更文挑战第2天】
东方睿赢
120 5
亚丁号
|
7月前
|
SQL 开发框架 JavaScript
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码，总有一款适合您
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码，总有一款适合您
亚丁号
97 0
红目香薰
|
7月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
红目香薰
88 0
Zh.晨光
|
7月前
|
开发框架 .NET
Asp.Net就业课堂之模板控件
Asp.Net就业课堂之模板控件
Zh.晨光
69 1
Zh.晨光
|
7月前
|
开发框架 .NET 数据安全/隐私保护
Asp.Net第二章服务器端控件
Asp.Net第二章服务器端控件
Zh.晨光
60 0
Zh.晨光
|
7月前
|
开发框架 JavaScript .NET
Asp.Net就业课之三验证控件
Asp.Net就业课之三验证控件
Zh.晨光
78 0
技术小结
|
开发框架 JavaScript .NET
Asp.net 控件用法汇总-RadioButtonList、DropDownList、button、Checkbox...（续）
Asp.net 控件用法汇总-RadioButtonList、DropDownList、button、Checkbox...（续）
技术小结
145 0
技术小结
|
开发框架 JavaScript 前端开发
Asp.net 控件用法汇总-RadioButtonList、DropDownList、button、Checkbox...
Asp.net 控件用法汇总-RadioButtonList、DropDownList、button、Checkbox...
技术小结
94 0
技术小结
|
开发框架 .NET C++
【asp.net】控件
【asp.net】控件
技术小结
101 0