如何创建动态级联下拉列表 [英] How to create dynamic cascading dropdown

查看:64
本文介绍了如何创建动态级联下拉列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经生成了两个动态下拉列表...但我想要级联...即依赖于第一个下拉列表的选定值,第二个下拉列表应该绑定...是否可能?....可以任何一个建议任何方法吗?在此先感谢。

I have generated two dynamic dropdowns...but i want then to be cascaded...i.e Dependending upon the Selected value of 1st dropdown the second dropdown should be binded...is it possible?....can any one suggest any method for it? Thanks in advance.

推荐答案

检查此 [ Ajax CascadingDropDown ]


有两种方式。但第一步是为此创建数据库表。我会告诉你一些我的代码。假设我有一些下拉列表:

CodeL()用于填充页面加载时的第一个下拉列表。

There are tow ways. But the first step is to create you DB tables for this. i will show you some of my code. let say that i have some dropdown lists:
the CodeL() is to populate the first dropdownlist on page load.
public void CodeL()
      {
          code.Items.Clear();
          code.AppendDataBoundItems = true;

          code.Items.Add(new ListItem("--Select code--"));

          OrdersDataContext db = new OrdersDataContext();
          var selectCodes = (from t in db.codeTs
                             //orderby t.code
                             select t).OrderBy(t => t.code);
          code.DataSource = selectCodes;
          code.DataTextField = "code";
          code.DataValueField = "id";
          code.DataBind();
      }







protected void code_SelectedIndexChanged(object sender, EventArgs e)
      {
          type.Items.Clear();
          type.Items.Add(new ListItem("--Select type--"));

          dem.Items.Clear();
          dem.Items.Add(new ListItem("--Select dimension--"));

          p.Items.Clear();
          p.Items.Add(new ListItem("--Select p--"));

          type.AppendDataBoundItems = true;
          OrdersDataContext db = new OrdersDataContext();
          var selectType = (from t in db.typeTs
                            where (t.codeId == Convert.ToInt32(code.SelectedItem.Value))
                            select t).OrderBy(t => t.type);
          type.DataSource = selectType;
          type.DataTextField = "type";
          type.DataValueField = "id";
          type.DataBind();

          if (type.Items.Count > 2)
          {
              type.Enabled = true;
          }
          else
          {
              type.Enabled = false;
              dem.Enabled = false;
          }
      }




protected void type_SelectedIndexChanged(object sender, EventArgs e)
       {
           dem.Items.Clear();
           dem.Items.Add(new ListItem("--Select dimension--"));

           p.Items.Clear();
           p.Items.Add(new ListItem("--Select p--"));

           dem.AppendDataBoundItems = true;
           OrdersDataContext db = new OrdersDataContext();
           var selectDimension = (from t in db.dimTs
                                  where (t.typeId == Convert.ToInt32(type.SelectedItem.Value))
                                  orderby t.id
                                  select t);
           dem.DataSource = selectDimension;
           dem.DataTextField = "dimension";
           dem.DataValueField = "id";
           dem.DataBind();

           if (dem.Items.Count > 2)
           {
               dem.Enabled = true;
           }
          else
           {
               dem.Enabled = false;
               p.Enabled = false;
           }
       }



等...



和在aspx文件中


etc...

and in aspx file

<asp:dropdownlist id="code" runat="server" autopostback="true" xmlns:asp="#unknown">
                                   BackColor="White" Height="22px"
                                   OnSelectedIndexChanged="code_SelectedIndexChanged" TabIndex="4"
                                   ViewStateMode="Enabled" Width="139px">
                                   <asp:listitem></asp:listitem>
                               </asp:dropdownlist>
                                 
                               <asp:dropdownlist id="type" runat="server" autopostback="True" xmlns:asp="#unknown">
                                   BackColor="White" Enabled="False" Height="22px"
                                   OnSelectedIndexChanged="type_SelectedIndexChanged" TabIndex="5"
                                   ViewStateMode="Enabled" Width="173px">
                                   <asp:listitem></asp:listitem>
                               </asp:dropdownlist>
                                 
                               <asp:dropdownlist id="dem" runat="server" autopostback="True" backcolor="White" xmlns:asp="#unknown">
                                   Enabled="False" Height="22px" onselectedindexchanged="dem_SelectedIndexChanged"
                                   TabIndex="6" ViewStateMode="Enabled" Width="147px">
                                   <asp:listitem></asp:listitem>
                               </asp:dropdownlist>





网络服务的第二种方式





Second way with webservices

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;
using System.Data;
using System.Data.Linq;
using System.Linq;
using System.Configuration;
using System.Web.Script.Services;

namespace OrderForm2._2
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]

    public class WebService : System.Web.Services.WebService
    {

        public WebService()
        {

            //Uncomment the following line if using designed components
            //InitializeComponent();
        }

        [WebMethod]
        public CascadingDropDownNameValue[] GetCodes(string knownCategoryValues, string category)
        {
            OrdersDataContext db = new OrdersDataContext();
            IEnumerable<cascadingdropdownnamevalue> vals = null;
            //short targetID = 0;
            vals = (from c in db.codeTs
                   select new CascadingDropDownNameValue
                   {
                       name = c.code,
                       value = c.id.ToString(),
                   }).OrderBy(t => t.name);
            return vals.ToArray<cascadingdropdownnamevalue>();
        }

        [WebMethod]
        public CascadingDropDownNameValue[] GetType(string knownCategoryValues, string category)
        {
            OrdersDataContext db = new OrdersDataContext();
            IEnumerable<cascadingdropdownnamevalue> vals = null;
            StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
            short code_Id;
            if (!kv.ContainsKey("code") || !short.TryParse(kv["code"], out code_Id))
            {
                return null;
            }
            vals = (from tp in db.typeTs
                   where tp.codeId == code_Id
                   select new CascadingDropDownNameValue
                   {
                       name = tp.type,
                       value = tp.id.ToString(),
                   }).OrderBy(t => t.name);
           return vals.ToArray<cascadingdropdownnamevalue>();
            
        }

        [WebMethod]
        public CascadingDropDownNameValue[] GetDimension(string knownCategoryValues, string category)
        {
            OrdersDataContext db = new OrdersDataContext();
            IEnumerable<cascadingdropdownnamevalue> vals = null;
            StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
            short type_Id;
            if (!kv.ContainsKey("type") || !short.TryParse(kv["type"], out type_Id))
            {
                return null;
            }
            vals = (from tp in db.dimTs
                   where tp.typeId == type_Id
                   select new CascadingDropDownNameValue
                   {
                       name = tp.dimension,
                       value = tp.id.ToString(),
                   }).OrderBy(t => t.name); 
            return vals.ToArray<cascadingdropdownnamevalue>();
        }

        [WebMethod]
        public CascadingDropDownNameValue[] GetP(string knownCategoryValues, string category)
        {
            OrdersDataContext db = new OrdersDataContext();
            IEnumerable<cascadingdropdownnamevalue> vals = null;
            StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
            short dim_Id;
            if (!kv.ContainsKey("dimension") || !short.TryParse(kv["dimension"], out dim_Id))
            {
                return null;
            }
            vals = from tp in db.pTs
                   where tp.dimId == dim_Id
                   select new CascadingDropDownNameValue
                   {
                       name = tp.p,
                       value = tp.id.ToString(),
                   } ;
            return vals.ToArray<cascadingdropdownnamevalue>();
        }

        [WebMethod]
        public CascadingDropDownNameValue[] GetQuantity(string knownCategoryValues, string category)
        {
            OrdersDataContext db = new OrdersDataContext();
            IEnumerable<cascadingdropdownnamevalue> vals = null;
            StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
            short p_Id;
            if (!kv.ContainsKey("p") || !short.TryParse(kv["p"], out p_Id))
            {
                return null;
            }
            vals = from tp in db.Pr_min_quantities
                   where tp.prod_id == p_Id
                   select new CascadingDropDownNameValue
                   {
                       name = tp.min_quant,
                       value = tp.id.ToString(),
                   };
            return vals.ToArray<cascadingdropdownnamevalue>();
        }
    }
}





in aspx code



in aspx code

<ajaxtoolkit:cascadingdropdown id="code_CascadingDropDown" xmlns:ajaxtoolkit="#unknown">
                                  runat="server" TargetControlID="code" LoadingText="Loding ..."
                                  PromptText="Select Code" ServiceMethod="GetCodes" ServicePath="~/WebService.asmx"
                                  Category="Code" UseContextKey="True" Enabled="true">
                              </ajaxtoolkit:cascadingdropdown>

                                
                              <asp:dropdownlist id="type" runat="server" backcolor="White" height="22px" xmlns:asp="#unknown">
                              TabIndex="5" Width="170px" >
                                  <asp:listitem></asp:listitem>
                              </asp:dropdownlist>
                              <ajaxtoolkit:cascadingdropdown id="type_CascadingDropDown" xmlns:ajaxtoolkit="#unknown">
                                  runat="server" TargetControlID="type" Enabled="True"
                                  ParentControlID="code" LoadingText="Loding ..." PromptText="Select Type"
                                  ServiceMethod="GetType" ServicePath="~/WebService.asmx"
                                  Category="type" UseContextKey="True">
                              </ajaxtoolkit:cascadingdropdown>
                                
                              <asp:dropdownlist id="dem" runat="server" backcolor="White" height="22px" xmlns:asp="#unknown">
                                  TabIndex="6" Width="170px">
                                  <asp:listitem></asp:listitem>
                              </asp:dropdownlist>
                              <ajaxtoolkit:cascadingdropdown id="dem_CascadingDropDown" xmlns:ajaxtoolkit="#unknown">
                                  runat="server" TargetControlID="dem" Enabled="True"
                                  ParentControlID="type" LoadingText="Loding ..." PromptText="Select Dimension"
                                  ServiceMethod="GetDimension" ServicePath="~/WebService.asmx"
                                  Category="dimension" UseContextKey="True">
                              </ajaxtoolkit:cascadingdropdown>
                                
                              <asp:dropdownlist id="p" runat="server" backcolor="White" height="22px" xmlns:asp="#unknown">
                              TabIndex="7" Width="130px" style="margin-top: 0px">
                                  <asp:listitem></asp:listitem>
                              </asp:dropdownlist>
                              <ajaxtoolkit:cascadingdropdown id="p_CascadingDropDown" xmlns:ajaxtoolkit="#unknown">
                                  runat="server" TargetControlID="p" Enabled="True"
                                  ParentControlID="dem" LoadingText="Loding ..." PromptText="Select P"
                                  ServiceMethod="GetP" ServicePath="~/WebService.asmx"
                                  Category="p" UseContextKey="True">
                              </ajaxtoolkit:cascadingdropdown>
                                
                              <asp:dropdownlist id="minquant" runat="server" backcolor="White" height="22px" xmlns:asp="#unknown">
                              TabIndex="7" Width="100px" style="margin-top: 0px"><asp:listitem></asp:listitem>
                              </asp:dropdownlist>







正如我在开始时说的,你也应该修改你的表格。例如:

Code_Table

id

code

Type_table

id

类型

code_id



Dimension_Table

id

dim

type_id

等...




As i said at begin you should modified yours tables too.. For example:
Code_Table
id
code
Type_table
id
type
code_id

Dimension_Table
id
dim
type_id
etc...


这篇关于如何创建动态级联下拉列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆