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