zoukankan      html  css  js  c++  java
  • ASP.NET中使用DropDownList实现无刷新二级联动详细过程

    Demo.sql

     1 create table Car(
     2     [id] int identity,
     3     [brand] varchar(50) not null,
     4     [type] varchar(50) not null
     5 )
     6 go
     7 
     8 insert into Car ([brand],[type])values('BMW','B'),('BMW','M'),('BMW','W'),
     9     ('BENZ','B'),('BENZ','E'),('BENZ','N'),('BENZ','Z'),
    10     ('HONDA','H'),('HONDA','O'),('HONDA','N'),('HONDA','D'),('HONDA','A'),
    11     ('TOYOTA','T'),('TOYOTA','O'),('TOYOTA','Y'),('TOYOTA','A')

    Demo.aspx

     1         <asp:ScriptManager runat="server">
     2         </asp:ScriptManager>
     3         <asp:UpdatePanel runat="server">
     4             <ContentTemplate>
     5                 <asp:DropDownList ID="dropBrand" runat="server" OnSelectedIndexChanged="dropBrand_SelectedIndexChanged"
     6                     Width="200" AutoPostBack="True">
     7                 </asp:DropDownList>
     8                 <asp:DropDownList ID="dropType" runat="server" Width="200">
     9                 </asp:DropDownList>
    10             </ContentTemplate>
    11         </asp:UpdatePanel>

    Demo.aspx.cs

     1         protected void Page_Load(object sender, EventArgs e)
     2         {
     3             if (!IsPostBack)
     4             {
     5                 BindDrop();
     6             }
     7         }
     8 
     9         private void BindDrop()
    10         {
    11             //将数据捆绑到下拉列表中
    12             string sqlStr = "select distinct [brand] from Car";
    13             DataTable dt = SqlHelper.ExecuteDataTable(sqlStr);
    14             dropBrand.DataTextField = "brand"; //设置列表显示的字
    15             dropBrand.DataValueField = "brand"; //设置列表提交后获得的字段,自己理解为隐藏绑定数据
    16             dropBrand.DataSource = dt;
    17             dropBrand.DataBind();
    18             dropBrand.Items.Insert(0, new ListItem("请选择车子品牌", ""));//第一项中加入内容,重点是绑定后添加
    19             dropType.Items.Insert(0, new ListItem("请选择车子品牌型号", ""));//第一项中加入内容,重点是绑定后添加      
    20         }
    21 
    22         protected void dropBrand_SelectedIndexChanged(object sender, EventArgs e)
    23         {
    24             string sqlStr = "select * from Car where [brand]='" + dropBrand.SelectedValue + "'";//页面加载后dropBrand.DataValueField隐藏绑定的数据,后边根据它查询dropType要显现的数据
    25             DataTable dt = SqlHelper.ExecuteDataTable(sqlStr);
    26             dropType.DataTextField = "type"; //设置dropBrand事件SelectedIndexChanged改变后dropType列表显示的数据
    27             dropType.DataValueField = "id";
    28             dropType.DataSource = dt;
    29             dropType.DataBind();
    30         }

     参考原文:http://www.cnblogs.com/cqchai/archive/2011/05/28/2061378.html

  • 相关阅读:
    记处理PostgreSQL连接太多的问题
    记服务器迁移上云出现故障
    PostgreSQL-迁移同步序列
    为什么你的pgbouncer连接这么慢
    TS基础知识储备
    前端实在好用的工具类库 【后续持续添加若有请留言添加积累供大家使用】
    Vue 3 + Typescript + Vite2.0 搭建移动端 代码规范以及注意的点
    flutter2.0 环境搭建(window环境下Mac自行查看官网即可)
    vite2.0+vue3+ts前端最新热门技术项目搭建
    React官方状态管理库—— Recoil
  • 原文地址:https://www.cnblogs.com/Tench/p/4201621.html
Copyright © 2011-2022 走看看