下拉框控件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在ASP.NET中的使用详解

 

 

    你需要将dhtmlXCombo控件包复制到项目中。后面我将一个个介绍每个文件的作用以及代码清单。

 

  

    在开始之前请先查看“引用”文件夹中是否包含System.Web.Extensions项,如果没有就右击项目根目录选择“添加引用”,在.NET页中可以看到System.Web.Extensions库。(如果这个库不可见,但框架已安装,可以选择Browse(浏览)页手动添加Syystem.Web.Extensions.dll文件。如果没有看到这个库,可以检查你的安装,确认确实已经正确安装了框架。)

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

 

 

   在这个对话框中,选择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表,分别用来存放中国省份信息和城市信息,为简单起见这里只收录了三个省的信息。

 

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

 

 

二.  使用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以上版本打开。

上一篇:Linux中的location和LNMP架构


下一篇:云效持续集成持续交付专场直播回顾,4场视频免费看