Использование CascadingDropDown с базой данных (C#)

Кристиан Венц

Скачать в формате PDF

Элемент управления CascadingDropDown в AJAX Control Toolkit расширяет элемент управления DropDownList, так что изменения в одном DropDownList загружают соответствующие значения в другом DropDownList. Чтобы это работало, необходимо создать специальную веб-службу.

Обзор

Элемент управления CascadingDropDown в AJAX Control Toolkit расширяет элемент управления DropDownList, так что изменения в одном DropDownList загружают соответствующие значения в другом DropDownList. (Например, один список содержит список штатов США, а следующий список затем заполняется крупными городами в этом штате.) Чтобы это работало, необходимо создать специальную веб-службу.

Шаги

Во-первых, требуется источник данных. В этом примере используется база данных AdventureWorks и Microsoft SQL Server 2005 Express Edition. База данных является необязательной частью установки Visual Studio (включая экспресс-выпуск), а также доступна как отдельная загрузка в разделе https://go.microsoft.com/fwlink/?LinkId=64064. База данных AdventureWorks входит в состав примеров и образцов баз данных SQL Server 2005 (скачать по адресу https://www.microsoft.com/download/details.aspx?id=10679). Самый простой способ настроить базу данных — использовать Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) и подключить AdventureWorks.mdf файл базы данных.

В этом примере предполагается, что экземпляр SQL Server 2005 Express Edition вызывается SQLEXPRESS и находится на том же компьютере, что и веб-сервер. Это также настройка по умолчанию. Если настройка отличается, необходимо адаптировать сведения о подключении для базы данных.

Чтобы активировать функциональные возможности ASP.NET AJAX и набора средств управления, элемент ScriptManager управления должен быть помещен в любое место на странице (но в элементе<form>):

<asp:ScriptManager ID="asm" runat="server" />

На следующем шаге требуются два элемента управления DropDownList. В этом примере мы используем поставщик и контактные данные из AdventureWorks, поэтому мы создадим один список для доступных поставщиков и один для доступных контактов:

<div>
 Vendor: <asp:DropDownList ID="VendorsList" runat="server"/><br />
 Contacts: <asp:DropDownList ID="ContactsList" runat="server"/><br />
</div>

Затем на страницу необходимо добавить два расширителя CascadingDropDown. Один заполняет первый (поставщик) список, а другой заполняет второй (контакты) список. Необходимо задать следующие атрибуты:

  • ServicePath: URL-адрес веб-службы, предоставляющий записи списка
  • ServiceMethod: веб-метод доставки записей списка
  • TargetControlID: идентификатор раскрывающегося списка
  • Category: сведения о категории, отправляемые в веб-метод при вызове
  • PromptText: текст, отображаемый при асинхронной загрузке данных списка с сервера
  • ParentControlID: (необязательно) родительский раскрывающийся список, который активирует загрузку текущего списка

В зависимости от используемого языка программирования имя веб-службы в вопросе изменяется, но все остальные значения атрибутов одинаковы. Ниже приведен элемент CascadingDropDown для первого раскрывающегося списка:

<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
 ServicePath="CascadingDropdown1.cs.asmx" ServiceMethod="GetVendors"
 TargetControlID="VendorsList" Category="Vendor"
 PromptText="Select Vendor" />

Расширяющие элементы управления для второго списка должны задать ParentControlID атрибут, чтобы выбор записи в списке поставщиков активировал загрузку связанных элементов в списке контактов.

<ajaxToolkit:CascadingDropDown ID="ccd2" runat="server"
 ServicePath="CascadingDropdown1.cs.asmx" ServiceMethod="GetContactsForVendor"
 TargetControlID="ContactsList" ParentControlID="VendorsList"
 Category="Contact"
 PromptText="Select Contact" />

Затем фактические действия выполняются в веб-службе, которая настроена следующим образом. Обратите внимание, что [ScriptService] атрибут используется, в противном случае ASP.NET AJAX не может создать прокси-сервер JavaScript для доступа к веб-методам из клиентского кода скрипта.

<%@ WebService Language="C#" Class="CascadingDropdown1" %>
using System.Web.Script.Services;
using AjaxControlToolkit;
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Data.SqlClient;
[ScriptService]
public class CascadingDropdown1 : System.Web.Services.WebService
{
 // ...
}

Подпись веб-методов, вызываемых CascadingDropDown, выглядит следующим образом:

public CascadingDropDownNameValue[] MethodNameHere(string knownCategoryValues, 
    string category)

Поэтому возвращаемое значение должно быть массивом типов CascadingDropDownNameValue , определенных набором средств управления. Этот GetVendors() метод довольно прост в реализации: код подключается к базе данных AdventureWorks и запрашивает первых 25 поставщиков. Первый параметр в конструкторе CascadingDropDownNameValue — заголовок записи списка, второй — значение (атрибут значения в элементе HTML<option>). Ниже приведен код:

[WebMethod]
public CascadingDropDownNameValue[] GetVendors(string knownCategoryValues, string category)
{
    SqlConnection conn = new SqlConnection("server=(local)\\SQLEXPRESS; 
    Integrated Security=true; Initial Catalog=AdventureWorks");
    conn.Open();
    SqlCommand comm = new SqlCommand("SELECT TOP 25 VendorID, Name 
    FROM Purchasing.Vendor",conn);
    SqlDataReader dr = comm.ExecuteReader();
    List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
    while (dr.Read())
    {
        l.Add(new CascadingDropDownNameValue(dr["Name"].ToString(),
        dr["VendorID"].ToString()));
    }
    conn.Close();
    return l.ToArray();
}

Получение связанных контактов для поставщика (имя метода: GetContactsForVendor()) - это немного сложная задача. Во-первых, поставщик, выбранный в первом раскрывающемся списке, должен быть определен. Набор средств управления определяет вспомогательный метод для этой задачи: метод ParseKnownCategoryValuesString() возвращает элемент с данными для раскрывающегося списка StringDictionary.

[WebMethod]
public CascadingDropDownNameValue[] GetContactsForVendor(string knownCategoryValues, 
    string category)
{
    int VendorID;
    CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

По соображениям безопасности эти данные должны быть проверены сначала. Таким образом, если имеется запись Vendor (так как Category свойство первого элемента CascadingDropDown имеет "Vendor"значение ), идентификатор выбранного поставщика может быть получен:

if (!kv.ContainsKey("Vendor") || !Int32.TryParse(kv["Vendor"],out VendorID)) 
{
    throw new ArgumentException("Couldn't find vendor.");
};

Остальная часть метода довольно проста, следовательно. Идентификатор поставщика используется в качестве параметра для SQL-запроса, который получает все связанные контакты для этого поставщика. Еще раз метод возвращает массив типа CascadingDropDownNameValue.

SqlConnection conn = new SqlConnection("server=(local)\\SQLEXPRESS; 
 Integrated Security=true; Initial Catalog=AdventureWorks");
 conn.Open();
 SqlCommand comm = new SqlCommand("SELECT Person.Contact.ContactID, FirstName, LastName 
 FROM Person.Contact,Purchasing.VendorContact 
 WHERE VendorID=@VendorID 
 AND Person.Contact.ContactID=Purchasing.VendorContact.ContactID",conn);
 comm.Parameters.AddWithValue("@VendorID", VendorID);
 SqlDataReader dr = comm.ExecuteReader();
 List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
 while (dr.Read())
 {
 l.Add(new CascadingDropDownNameValue(
 dr["FirstName"].ToString() + " " + dr["LastName"].ToString(),
 dr["ContactID"].ToString()));
 }
 conn.Close();
 return l.ToArray();
}

Загрузите страницу ASP.NET и через некоторое время список поставщиков заполняется 25 записями. Выберите одну запись и обратите внимание на то, как второй раскрывающийся список заполняется данными.

Первый список заполняется автоматически

Первый список заполняется автоматически (щелкните, чтобы просмотреть изображение полного размера)

Второй список заполняется в соответствии с выбранным в первом списке

Второй список заполняется в соответствии с выбранным в первом списке (щелкните, чтобы просмотреть изображение полного размера)

НазадДалее

  • Last updated on