ASP.NET中使用DropDownList实现无刷新二级联动详细过程
Demo.sql
create table Car(
[id] int identity,
[brand] varchar(50) not null,
[type] varchar(50) not null
)
go insert into Car ([brand],[type])values('BMW','B'),('BMW','M'),('BMW','W'),
('BENZ','B'),('BENZ','E'),('BENZ','N'),('BENZ','Z'),
('HONDA','H'),('HONDA','O'),('HONDA','N'),('HONDA','D'),('HONDA','A'),
('TOYOTA','T'),('TOYOTA','O'),('TOYOTA','Y'),('TOYOTA','A')
Demo.aspx
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:DropDownList ID="dropBrand" runat="server" OnSelectedIndexChanged="dropBrand_SelectedIndexChanged"
Width="" AutoPostBack="True">
</asp:DropDownList>
<asp:DropDownList ID="dropType" runat="server" Width="">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
Demo.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDrop();
}
} private void BindDrop()
{
//将数据捆绑到下拉列表中
string sqlStr = "select distinct [brand] from Car";
DataTable dt = SqlHelper.ExecuteDataTable(sqlStr);
dropBrand.DataTextField = "brand"; //设置列表显示的字
dropBrand.DataValueField = "brand"; //设置列表提交后获得的字段,自己理解为隐藏绑定数据
dropBrand.DataSource = dt;
dropBrand.DataBind();
dropBrand.Items.Insert(, new ListItem("请选择车子品牌", ""));//第一项中加入内容,重点是绑定后添加
dropType.Items.Insert(, new ListItem("请选择车子品牌型号", ""));//第一项中加入内容,重点是绑定后添加
} protected void dropBrand_SelectedIndexChanged(object sender, EventArgs e)
{
string sqlStr = "select * from Car where [brand]='" + dropBrand.SelectedValue + "'";//页面加载后dropBrand.DataValueField隐藏绑定的数据,后边根据它查询dropType要显现的数据
DataTable dt = SqlHelper.ExecuteDataTable(sqlStr);
dropType.DataTextField = "type"; //设置dropBrand事件SelectedIndexChanged改变后dropType列表显示的数据
dropType.DataValueField = "id";
dropType.DataSource = dt;
dropType.DataBind();
}
参考原文:http://www.cnblogs.com/cqchai/archive/2011/05/28/2061378.html
ASP.NET中使用DropDownList实现无刷新二级联动详细过程的更多相关文章
- 在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
- [Asp.net mvc]jquery.form.js无刷新上传
写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...
- jquery 无刷新多级联动
原先不熟悉jquery时,总在寻找无刷新的方法,在此不断的积累自己所知道的jquery属性,常用方法.以下为jquery实现的无刷新联动事件 分公司: <select id="Sele ...
- JQuery中国省市区无刷新三级联动查询
之前有写过用<Ajax控件来实现中国的省市区无刷新查询> 今天用JQuery来实现,用Ajax控件和JQuery的优缺点就先不说了. 效果图如下: 下面来结合代码来详细说明一下如何用JQu ...
- asp.net中的<%%>形式的详细用法实例讲解
asp.net中的代码分离模式我们肯定都不陌生,C#(或者其它语言)写的代码一般不会和设计语言HTML混在一起,但是有的时候也避免不了,这时就会在UI页面里用<%%>来绑定显示.绑定变量数 ...
- Asp.Net下,基于Jquery的Ajax二级联动
最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...
- Asp:Button控件onclick事件无刷新页面提示消息
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptMana ...
- Hibernate+struts+JqueryAjax+jSON实现无刷新三级联动
看网上JqueryAjax三级联动的例子讲不是很全,代码也给的不是很全,给初学者带来一定的难度.小弟自己写了一个,可能有些地方不是很好,希望大家能够提出建议. 用的是Hibernate+struts2 ...
- Ajax做无刷新三级联动
1.引入JS and Jquery包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
随机推荐
- 通过Web.config实现301重定向
通过Web.config实现301重定向 IIS7以上可以通过修改Web.config实现IIS设置 现在我们通过Web.config实现301重定向 <system.webServer> ...
- 网页JS获取当前地理位置(省市区)
眼看2014又要过去了,翻翻今年的文章好像没有写几篇,忙真的或许已经不能成为借口了,在忙时间还是有的,就像海绵里的水挤挤总会有滴.真真的原因是没有学习过什么新的技术,工作过程中遇到的问题也不是非常难并 ...
- Mac mongodb 配置安装
简单总结就几条,比较简单配置mongodb. 1,首先下载安装包:百度云下载地址 2,下载之后解压到自己常放的工作目录下,然后开始配置一下你的Mac环境 vim ~/.bash_profile 添加m ...
- android 抓包 使用 tcpdmp + Wireshark
下载地址tcpdump: http://www.androidtcpdump.com/ 使用su用户, 给/system/可写的权限 mount -o remount,rw -t ...
- C++11实现一个自动注册的工厂
实现动机 工厂方法是最简单地创建派生类对象的方法,也是很常用的,工厂方法内部使用switch-case根据不同的key去创建不同的派生类对象,下面是一个伪代码. Message* create(int ...
- 自定义圆环progressbar
RoundProgressBar.java /** * RoundProgressBar.java [v1.0.0] * classes: com.example.audiorecordingtest ...
- 用 Wireshark 图解:TCP 三次握手
摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! “snow warn throughout the winter” 一.什么是 Wireshar ...
- Windows Store 开发总结——文件操作
1.读取Isolated Storage 每个Metro程序都有三个文件夹:Local,Roaming,Temp.每个文件夹的访问方法都是相同的. Local用于将数据存储在本地,这是程序特定的文件夹 ...
- angularjs + seajs构建Web Form前端(一)
简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark Otto和Jacob Thornton合作开,是一个CSS/HTML框架. Angula ...
- Linux查看系统信息命令汇总
# uname -a # 查看内核/操作系统/CPU信息 # /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostname # 查看计算 ...