开发者社区> 冰点沐雪> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
电商网站物流快递单号查询api接口申请案例
【场景需求描述】电商平台及ISV商家对物流api接口的需求有很多,今天我们主要分享的就是快递鸟快递单号查询接口的对接指南,快递单号查询接口对接的应用场景有很多,很多场景会遇到,最主要的就是电商网站用户打开“我的订单”时调用此API显示物流信息详情,电商管理后台的物流系统,客服在对账前查询所有运单的签收状态,并追踪问题,电商平台对商家物流管控,要求必须在多久快递必须发出要看到揽件状态,多久必须收到货物看到签收状态,根据这些状态对商家管控从而提升用户的整体满意度。
1296 0
Asp.Net SignalR Hub中的上下文对象
原文:Asp.Net SignalR Hub中的上下文对象 Hub中的 Context 使用了集线器后,会发现对比持久连接类少了OnConnectioned这样的事件,事实上是有的。需要我们去override .
1155 0
Asp.Net Web API(三)
Routing Tables路由表     在Asp.Net Web API中,一个控制器就是一个处理HTTP请求的类,控制器的public方法就被叫做action方法或简单的Action。当Web API接收到一个请求的时候,它将这个请求路由到一个Action。
879 0
用asp.net core 2.0 + EFCore.Sqlite做个小网站
许久没用C#写程序。听说进来发生大事,.NetCore2.0发布了,于是便学习了下,本站也应运而生。 大多数的地方按照官方的文档起步走就可以了,这里谈谈遇到的几个坑。 首先,本站是基于ASP.NetCore2.0和EntityFrameWorkCore.Sqlite的,前端使用了layui,搭建于CentOS7上。
1541 0
Asp.Net Web API 2第一课——入门
详情请查看http://aehyok.com/Blog/Detail/68.html   个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:http://www.cnblogs.com/aehyok/p/3946286.html 感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,那不妨点个推荐吧,谢谢支持:-O。
598 0
一起谈.NET技术,ASP.NET中的认证与授权
  用户认证   .net提供了3种用户认证的方式,分别是Windows,Forms,Passport。这几种形式的定义可以在网站根目录下Web.config中的authentication节点中看见。
1047 0
+关注
冰点沐雪
专业从事软件开发(asp.net)近10年。
434
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载