ATLAS入门篇之CascadingDropDown控件编程-阿里云开发者社区

一、引言

本文将通过具体的步骤解释如何借助于数据库（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 ，如需转载请自行联系原作者

ATLAS入门篇之CascadingDropDown控件编程

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件