当前位置：首页 > 编程日记 > 正文

ATLAS入门篇之CascadingDropDown控件编程

编程日记 2024-11-07 14:50:00

一、引言

本文将通过具体的步骤解释如何借助于数据库（Microsoft SQL Server 2005 Express Edition）数据创建一个ASP.NET AJAX 1.0 CascadingDropDown控件。在本文示例中，我们将使用此层叠下拉列表框控件来选择要显示的汽车模型信息。

【作者注】在此，我们省略了有关ASP.NET AJAX 1.0的具体下载及配置情况。如果你是ASP.NET AJAX 1.0新手，请细致查看其中附带的帮助说明。

二、创建一个支持ASP.NET AJAX的网站

启动Visual Studio 2005，选择“文件→新建网站…”，然后选择“ASP.NET AJAX-Enabled Web Site”模板（如图1所示）。命名该工程为cascadingdropdownTest，并选择C#作为编程语言，最后点击OK。

图1：使用“ASP.NET AJAX-Enabled Web Site”模板快速创建ATLAS程序

【注】在这个示例中，我使用的是ASP.NET AJAX 1.0库。你可以从微软站点[url]http://ajax.asp.net/downloads/Default.aspx?tabid=47[/url]下载最新的支持库。

然后，在你的工程中添加一个对AjaxControlToolkit.dll的引用，右击该工程→“添加引用…>>浏览”。选择你已下载的AjaxControlToolkit.dll相应位置。

你可以在最新下载的AjaxControlToolkit相应的SampleWebSite/bin文件夹下找到这个AjaxControlToolkit.dll。

通过此操作，我们得以把ASP.NET AJAX 1.0 CascadingDropDown控件加入到我们的示例Web页面中。操作结束，VS2005将显示如图2的ASP.NET AJAX Control toolkit工具箱。

图2：ASP.NET AJAX控件工具箱

三、创建数据库

在本文示例中，我们将创建一个名字为SampleData.mdf的新数据库。这个数据库将包含两个表格：Cars（用于存储汽车数据）；CarModels（用于存储相应于Cars表格中的每一辆汽车的模型信息）。

右击工程中的App_Data文件夹并选择“添加新项…”。在随后出现的“添加新项”对话框中，选择“SQL数据库”模板并且确定数据库名为SampleData.mdf。最后，点击“添加”按钮，见图3。

图3：在工程中添加“SQL数据库”模板

现在，已经创建此数据库，并且把它添加到你的工程。你可以通过服务器资源管理器来观察到SampleData.mdf的数据连接。

在服务器资源管理器的SampleData.mdf结点下，右单击子结点“表格”并选择“添加新表”。然后，使用下列结构创建两个表格—Cars和CarModels（如图4所示）。

图4：示例数据库中的两个表格—Cars和CarModels结构定义

【注意】确保字段ModelId（CarModels）和CarId（Cars）作为Identity列（自动增长值为１）。你可以打开本文所附源代码中的数据库SampleData.mdf加以详细分析。

(一)创建访问Cars和CarModels数据的数据集

右击解决方案资源管理器中的该工程并点击“添加新项…”。在“添加新项”对话框中选择DataSet并且命名为dsCars.xsd，然后点击“添加”按钮。默认情况下，你的DataSet将被创建在应用程序根文件夹下的“App_Code”文件夹下。

一旦DataSet创建完毕，随即弹出“TableAdapter配置向导”对话框，以便你使用该向导来配置刚才新建的数据集。

(二)配置数据集

【第一步】从向导的数据库连接DropdownList控件下选择SampleData.mdf文件，并点击“下一步”（见图5）。

图5：使用TableAdapter配置向导配置数据集

【第二步】询问你是否把此数据库连接串SampleDataConnectionString保存在web.config文件中。选择是，并点击“下一步”。

【第三步】在接下来的命令类型选择窗口中，选择“使用SQL语句”，并点击“下一步”。

【第四步】在下一个窗口中，要求你输入一个SQL语句。输入下列查询并点击“下一步”。

Select CarId，CarName from Cars

【第五步】在下一个窗口中，选择要生成的方法类型为“填充DataTable”，并把默认的方法名“GetData”改为“GetAllCars”。

【第六步】向导结果将显示生成的Select语句，表格映射，还有一个Get方法。

【第七步】保存该DataSet，并关闭它。

【第八步】重复前面的创建数据集再添加另一个dataset—dsCarModels.xsd，用于存储选择的汽车相应的CarModels表格中的数据。

【注意】在上面重复步骤中相应于【第四步】输入的SQL语句为：

SELECT ModelId，CarId，ModelName FROM CarModels WHERE (CarId = @carId)

相应于前面的【第五步】选择“返回一个DataTable”，并输入方法名为GetModelsByCarId。

四、创建一个web服务以便从数据库取得数据

现在，我们已经配置完毕数据集。接下来，我们将编写一个web服务以便针对一个给定的CarId得到所有的汽车模型。后面，这个web服务将由我们的cascadingdropdown控件使用。下一节中我们将讨论如何配置CascadingDropDown以便使用这个web服务。

【第一步】右击工程，并点击“添加新项…”。在“添加新项”对话框中，从已安装的模板列表中选择“Web服务”，并且命名为CarsService.asmx（如图6所示）。

图6：在工程中添加“Web服务”模板

【第二步】通过第一步，有两个文件将被创建到你的应用程序中。一个是CarsService.asmx，位于你的应用程序根目录下；另一个是CarsService.cs，位于App_Code文件夹下，相应于该web服务的CodeBehind文件。

【第三步】打开上面的文件CarsService.cs。我们要在这个文件中编写web方法来实现前面的目标。

【第四步】在当前文件中添加下列必要的命名空间（加粗部分）：

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

using System.Collections.Generic;
using AjaxControlToolkit;
using System.Data;
using System.Data.SqlClient;

【第五步】应该使用ScriptService属性来修饰你的web服务。为此，在类定义的上面添加下列一行（加粗部分）。

[WebService(Namespace= "[url]http://tempuri.org/[/url]")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class CarsService : System.Web.Services.WebService {

【第六步】在这个服务类中，我们将编写一个WebMethod—GetModelsByCarId，它将返回一个CascadingDropDownNameValue数组。该方法的具体定义形式如下所示：

[WebMethod]
public CascadingDropDownNameValue[] GetModelsByCarId(string knownCategoryValues，
string category)
{

这里的参数knowCategoryValues将包含在CascadingDropDown控件中的Category定义值（以“;”分隔符隔开）。

//根据“:”字符使用“;”分隔符分离knownCategoryValues
//相应于索引１处的字符串是从dropdownlist中选择的CarId
string[] _categoryValues = knownCategoryValues.Split(':'， ';');

通过分离knowCategoryValues，我们得到位于string[] _categoryValues中索引1处选择的汽车Id。

//转换string[]中索引１对应元素以便得到CarId
int _carID = Convert.ToInt32(_categoryValues[1]);

接下来，我们还要创建一个类型CascadingDropDownNameValue的泛型列表，用于存储由CarsModelTableAdapters返回的值。

//创建CascadingDropDownNameValue的一个列表以存储汽车模型数据
List_carModels=new List();

接下来，循环遍历GetModelsByCarId方法返回的DataTable中所有的DataRow，并且把它们添加到CascadingDropDownNameValue类型List。

//创建一个CarModels TableAdapter的实例
dsCarModelsTableAdapters.CarModelsTableAdapter _carModelAdapter =
new dsCarModelsTableAdapters.CarModelsTableAdapter();
//对于每一个由方法GetModelsByCarId返回的DataTable中的第一个DataRow
//，把modelname和modelid数据添加到List
foreach (DataRow _row in _carModelAdapter.GetModelsByCarId(_carID))
{
_carModels.Add(new CascadingDropDownNameValue(_row["ModelName"].ToString(),
_row["ModelId"].ToString()));
}

注意，该CascadingDropDown需要一个CascadingDropDownNameValue[]，以便显示于目标DropDownList中。
下面展示了本文中所用唯一的Web方法的完整定义。

// Web方法—根据一个给定的carId取得所有汽车模型信息
//输入参数—层叠式下拉列表框提供的knownCategoryValues
//输出参数—CascadingDropDownNameValue数组
[WebMethod]
public CascadingDropDownNameValue[] GetModelsByCarId(string knownCategoryValues,
string category)
{
//根据“:”字符使用“;”分隔符分离knownCategoryValues
//对于第一个dropdownlist来说，该值为“undefined: id of the
// dropdownelement”
//相应于索引１处的字符串是从dropdownlist中选择的CarId
string[] _categoryValues = knownCategoryValues.Split(':', ';');

//转换string[]中索引１对应元素以便得到CarId
int _carID = Convert.ToInt32(_categoryValues[1]);

// 创建一个CascadingDropDownNameValue的List结构以便存储汽车模型数据
List _carModels =

new List();

//创建一个CarModels TableAdapter的实例
dsCarModelsTableAdapters.CarModelsTableAdapter _carModelAdapter =
new dsCarModelsTableAdapters.CarModelsTableAdapter();

//对于每一个由方法GetModelsByCarId返回的DataTable中的第一个datarow
//，把modelname和modelid数据添加到List
foreach (DataRow _row in _carModelAdapter.GetModelsByCarId(_carID))
{
_carModels.Add(new CascadingDropDownNameValue(_row["ModelName"].ToString(),
_row["ModelId"].ToString()));
}
//转换成数组并返回相应的值
return _carModels.ToArray();
}

五、设计aspx页面

现在，我们开始使用前面定义的Web服务和CascadingDropDown控件在一个Web页面中显示汽车和汽车模型信息。

【第一步】把两个DropDownList控件拖动到Default.aspx页面，分别命名它们为ddlCars和ddlCarModels。

< Width="179px" Height="31px" runat="server">

DataTextField="CarName" DataValueField="CarId" DataSourceID="ods_Cars">

Width="181px">

【第二步】创建一个ObjectDataSource，用于显示ddlCars下拉列表框中所有可用的汽车信息。默认情况下，当加载页面时，将显示出在Cars表格内所有可用的汽车。

< runat="server">

OldValuesParameterFormatString="original_{0}" SelectMethod="GetAllCars"

TypeName="dsCarsTableAdapters.CarsTableAdapter">

【第三步】在该页面上再添加一个CascadingDropDown控件，并设置下列属性（见列表）：

属性	内容	含义
Category	Cars	相应于knowCategoryValues的分类
LoadingText	请等待……	当dropdownlist控件正在加载时显示的消息
ParentControlID	ddlCars	从中选择CategoryId的DropDownList
PromptText	请选择一个模型	在没有选择内容时的提示文本
TargetControlID	ddlCarModels	CascadingDropDownNameValue应该加载到的DropDownList控件
ServicePath	CarsService.asmx	指向web服务的路径
ServiceMethod	GetModelsByCarId	被调用以取得相应值的Web方法

【注意】当把CascadingDropDown控件拖动到页面上时，系统将自动在页面“源”视图内容的前面加上下面一句：

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

显然，这里在Default.aspx页面中自动添加一个对AjaxControlToolkit.dll的引用。根据上面属性输入完毕后的代码如下所示：

ID="CascadingDropDown1"

runat="server"

Category="Cars" ParentControlID="ddlCars"

TargetControlID="ddlCarModels"

ServicePath="CarsService.asmx"

ServiceMethod="GetModelsByCarId"

LoadingText="请等待……" PromptText="请选择一个模型">

六、运行结果

最后，按F5运行之。一切顺利的话，你会看到运行中的ASP.NET AJAX CascadingDropDown控件的使用（如图7所示）。值得注意的是，这个Ajax控件的数据来源于后台的SQL Server数据库。

图7：示例网站运行结果

拉框中的数据来源于SQL Server 2005数据库，并且这些数据的提供是在后台基于AJAX技术异步加载的。

七、总结

在本文中，我们仍然学习了一个简单例子，探讨了如何在ASP.NET 2.0 Web页面中构建支持Ajax技术的层叠式下拉列表框控件，并基于SQL Server 2005为此控件提供数据支持。同时，我们也领略到在VS2005中进行Web开发时前后端之间连接的流畅性。

本文转自朱先忠老师51CTO博客，原文链接： http://blog.51cto.com/zhuxianzhong/60136，如需转载请自行联系原作者

https://www.dkcj.cn/info/26474.html

ATLAS入门篇之CascadingDropDown控件编程

相关文章：

ASP.NET2.0 永恒密码之戒【月儿原创】

GitHub 遭抵制！AI 代码生成神器竟成“抄袭工具”？

LAMP的安装及Xcache的配置

Windows Server 2003 AD升级到Windows Server 2008 AD的方法及详细步骤

ASP.NET2.0 ReportingServices使用详解

输出程序运行的时间（精确到微秒）

售前比售后机器人控制逻辑更复杂，仅凭大规模数据后发优势难赶超！

JAVAEclipse:could not find the main class,program will exit!

ASP.NET2.0 文本编辑器FCKeditor的冰冷之心【月儿原创】

转：strcat与strcpy与strcmp与strlen

2021 EdgeX中国挑战赛盛大开幕，英特尔赋能开发者，助力创新方案落地

构建安全的 ASP.NET 应用程序

.NET2.0隐形的翅膀，正则表达式搜魂者【月儿原创】

连华为都在研究的计算机视觉，到底有多牛?

JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片...

Nginx+Tomcat实现反向代理与动静分离

白话经典算法系列之七堆与堆排序

.NET2.0抓取网页全部链接【月儿原创】

腾讯会议又一黑科技，屏蔽超过 200 种会议噪声是如何做到的？

zabbix之日志文件监控

深度学习三巨头共同发文，聊聊深度学习的过去、现在与未来

ASP.NET2.0图片格式转换【月儿原创】

org.apache.hadoop.fs-ChecksumException

Linux下显示硬盘空间的两个命令

C#对Microsoft.VisualBasic My对象兰台妙选【月儿原创】

AIoT的发展路上，英特尔如何通过边缘计算掀起产业变革

Xbox One 游戏欣赏: Xbox Fitness 太极拳游戏

Android美工坊：Selector选择器的使用

C#中判断空字符串的3种方法性能分析【月儿原创】

微软职位内部推荐-SDEII