Atlas学习手记(12):使用CascadingDropDown控件
CascadingDropDown通常叫作级联下拉菜单,本文将通过读取Northwind数据库中的Emplyee、Order、OrderDatail信息作为示例,来展示一下它的使用。
主要内容
1.CascadingDropDown控件介绍
2.从数据库读取数据并填充CascadingDropDown
一.CascadingDropDown控件介绍
CascadingDropDown通常叫作级联下拉菜单,本文将通过读取Northwind数据库中的Emplyee、Order、OrderDatail信息作为示例,来展示一下它的使用。示例代码如下:
<atlasToolkit:CascadingDropDownProperties
TargetControlID="DropDownList2"
Category="Model"
PromptText="Please select a model"
LoadingText="[Loading models]"
ServicePath="CarsService.asmx"
ServiceMethod="GetDropDownContents"
ParentControlID="DropDownList1"
SelectedValue="SomeValue">
</atlasToolkit:CascadingDropDownProperties>
</atlasToolkit:CascadingDropDown>
对于CascadingDropDown需要为它添加CascadingDropDownProperties,有多少个下拉列表,就添加几个CascadingDropDownProperties,主要属性如下:
属性 |
说明 |
TargetControlID |
指定要扩展的DropDownList的ID |
Category |
DropDownList表示的类别名称,在WebMethod中会用到 |
PromptText |
没有选择时显示的文字 |
LoadingText |
加载数据时显示的文字 |
ServicePath |
获取数据的Web Service,为每个DropDownList都要指定 |
ServiceMethod |
获取数据的Web Method |
ParentControlID |
要扩展的DropDownList的父控件ID |
SelectedValue |
默认的选择项的值 |
二.从数据库读取数据并填充CascadingDropDown
下面用读取Northwind数据库中的Emplyee、Order、OrderDatail信息,看一个完整的示例。在新建一个Web Site后,先在页面的头部加上:
Namespace="AtlasControlToolkit"
TagPrefix="atlasToolkit" %>
加入三个DropDownList,分别用来显示Emplyee,Order,OrderDatail:
<h3>
Employee:
<asp:DropDownList ID="ddlEmployees" runat="server" /><br /><br />
Order:
<asp:DropDownList ID="ddlOrders" runat="server" /><br /><br />
Detail:
<asp:DropDownList ID="ddlOrderDetails" runat="server" />
</h3>
</div>
下面我们添加一个Northwind.asmx的Web Service,编写相关的Web Method:
public CascadingDropDownNameValue[] GetEmployees(
string knownCategoryValues, string category)
{
string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlConnection connection = new
SqlConnection(connectionString);
SqlCommand command = new SqlCommand("SELECT * FROM Employees");
command.Connection = connection;
connection.Open();
SqlDataAdapter adapter = new SqlDataAdapter(command);
DataSet dataSet = new DataSet();
adapter.Fill(dataSet);
command.Connection.Close();
DataTable tbl = dataSet.Tables[0];
List<CascadingDropDownNameValue> values =
new List<CascadingDropDownNameValue>();
foreach (DataRow dr in tbl.Rows)
{
string sEmployee = (string)dr["FirstName"] + " " +
dr["LastName"];
int iEmployee = (int)dr["EmployeeID"];
values.Add(new CascadingDropDownNameValue(
sEmployee, iEmployee.ToString()));
}
return values.ToArray();
}
注意Web Method的参数签名是不可以改变的,并且它最后返回的是名-值对这种形式的数组。
整个完整后的Web Service如下:
在Web.config中设置连接信息:
<add name="ConnectionString" connectionString="Data Source=RJ-097;User ID=sa;Password=sa;Initial Catalog=Northwind" providerName="System.Data.SqlClient"/>
</connectionStrings>
这时我们再添加CascadingDropDown控件,设置它的属性如下:
<atlasToolkit:CascadingDropDownProperties Category="Employee" ParentControlID=""
PromptText="Select Employee" SelectedValue="" ServiceMethod="GetEmployees" ServicePath="Northwind.asmx"
TargetControlID="ddlEmployees" />
<atlasToolkit:CascadingDropDownProperties Category="Order" ParentControlID="ddlEmployees"
PromptText="Select Order" SelectedValue="" ServiceMethod="GetOrdersByEmployee"
ServicePath="Northwind.asmx" TargetControlID="ddlOrders" />
<atlasToolkit:CascadingDropDownProperties Category="OrderDetail" ParentControlID="ddlOrders"
PromptText="Select OrderDetail" SelectedValue="" ServiceMethod="GetDetailsByOrder"
ServicePath="Northwind.asmx" TargetControlID="ddlOrderDetails" />
</atlasToolkit:CascadingDropDown>
至此,大功告成。运行后效果如下:
选择:
完整示例下载:https://files.cnblogs.com/Terrylee/CascadingDropDownDemo.rar
Worktile,新一代简单好用、体验极致的团队协同、项目管理工具,让你和你的团队随时随地一起工作。完全免费,现在就去了解一下吧。
https://worktile.com