asp.net_DropDownList应用

article/2025/9/7 18:22:04

记录三个DropDownList的实践操作

1.

先上效果图

在这里插入图片描述

多选框选择其中一个选项，多行文本框输出这个选项的基本数据，以及下面的两个按钮的功能。

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
</head>
<body><form id="form1" runat="server"><div><asp:DropDownList ID="DropDownList1" runat="server" onselectedindexchanged="DropDownList1_SelectedIndexChanged" AutoPostBack = "true"><asp:ListItem Value="A">first</asp:ListItem><asp:ListItem Value="B">second</asp:ListItem><asp:ListItem Value="C">Third</asp:ListItem></asp:DropDownList><br /><br /><br /><asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Height="120px" Width="208px"></asp:TextBox><br /><br /><asp:Button ID="Button1" runat="server" Text="自动选择第三项" onclick="Button1_Click" Width="128px" />&nbsp;<asp:Button ID="Button2" runat="server" Text="清除所有项" onclick="Button2_Click" Width="121px" /></div></form>
</body>
</html>

后端代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;public partial class _Default : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){}protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e){TextBox1.Text = "索引值:" + DropDownList1.SelectedIndex;TextBox1.Text += "\nText值:" + DropDownList1.SelectedItem.Text;TextBox1.Text += "\nValue值：" + DropDownList1.SelectedValue;TextBox1.Text += "\n总共多少项：" + DropDownList1.Items.Count;}protected void Button1_Click(object sender, EventArgs e){DropDownList1.SelectedItem.Selected = false; //这时候选中状态的选中项要先取消DropDownList1.Items[2].Selected = true;TextBox1.Text = "索引值:" + DropDownList1.SelectedIndex;TextBox1.Text += "\nText值:" + DropDownList1.SelectedItem.Text;TextBox1.Text += "\nValue值：" + DropDownList1.SelectedValue;TextBox1.Text += "\n总共多少项：" + DropDownList1.Items.Count;}protected void Button2_Click(object sender, EventArgs e){DropDownList1.Items.Clear();}
}

DropDownList1_SelectedIndexChanged（）方法的快捷创建方式：直接在拆分交互界面双击这个多选框

在这里插入图片描述

2.

先上效果图

在这里插入图片描述

看图片的信息基本上就可以知道
①多选框选中一个选项，跳转按钮实现跳转页面；
②修改选项；
③增加选项；
④在Page_Load（）方法绑定数据源以及创建选项

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
</head>
<body><form id="form1" runat="server"><div><asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="AccessDataSource1" DataTextField="网站名称" DataValueField="网址"></asp:DropDownList>&nbsp;&nbsp;&nbsp;&nbsp;<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="跳转" /><asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/test.mdb" SelectCommand="SELECT [网站名称], [网址] FROM [TB_HLINKS]"></asp:AccessDataSource><br /><br /><asp:Button ID="Button2" runat="server" Text="把第三项设置为拼多多" onclick="Button2_Click" Width="200px" />
&nbsp;<br /><br /><asp:Button ID="Button3" runat="server" Text="增加一项" onclick="Button3_Click" /><br /><br /><asp:Panel ID="Panel1" runat="server"></asp:Panel></div></form>
</body>
</html>

添加数据源的操作我就不细说了，可以参考我上一篇博客：
asp.net_css应用

后端代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;public partial class Default2 : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){//绑定数据源ArrayList arr = new ArrayList();arr.Add("a");arr.Add("b");arr.Add("c");DropDownList dl = new DropDownList(); //生成控件dl.DataSource = arr;dl.DataBind();Panel1.Controls.Add(dl);}protected void Button1_Click(object sender, EventArgs e){Response.Redirect(DropDownList1.SelectedValue); //进行跳转}protected void Button2_Click(object sender, EventArgs e){DropDownList1.Items[2].Text = "拼多多";DropDownList1.Items[2].Value = "https://www.pinduoduo.com/";}protected void Button3_Click(object sender, EventArgs e){ListItem item = new ListItem();item.Text = "唯品会";item.Value = "https://www.vip.com/";DropDownList1.Items.Add(item);}
}

修改选项用到了DropDownList.Items[i].Text和.Value

添加选项是new一个ListItem对象来进行操作。

Page_load（）当中这一句，等价于从工具箱直接添加控件。

DropDownList dl = new DropDownList(); //生成控件

而这两句，等价于在拆分交互页面直接点击编辑选择项

dl.DataSource = arr;
dl.DataBind();

3.实现一个登录界面，用户需要从两个相互关联的下拉列表框中选择用户所在城市

先上效果图：

在这里插入图片描述
看图可知，选择了一个省份，会自动生成省内的所有市（自己编辑）。

前端代码：

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
</head>
<body><form id="form1" runat="server"><div>姓名：<asp:TextBox ID="TextBox1" runat="server"  AutoPostBack = "true"></asp:TextBox>&nbsp;<asp:Label ID="NameLabel" runat="server" Text="" ForeColor = "red"></asp:Label><br /><br />密码：<asp:TextBox ID="TextBox2" runat="server"  AutoPostBack = "true"></asp:TextBox>&nbsp;<asp:Label ID="PasswordLabel" runat="server" Text="" ForeColor="red"></asp:Label><br /><br />所在城市：<asp:DropDownList ID="dl_province" runat="server" AutoPostBack = "true" onselectedindexchanged="dl_province_SelectedIndexChanged" style="height: 23px"><asp:ListItem>福建省</asp:ListItem><asp:ListItem>广东省</asp:ListItem></asp:DropDownList>&nbsp;<asp:DropDownList ID="dl_city" runat="server"></asp:DropDownList>&nbsp;<asp:Label ID="L" runat="server" Text="" ForeColor="red"></asp:Label><br /><br />
&nbsp;&nbsp;<asp:Button ID="Button1" runat="server" Text="登录" onclick="Button1_Click" />
&nbsp;&nbsp;&nbsp;<asp:Button ID="Button2" runat="server" Text="重置" onclick="Button2_Click" /><br /><br /><br /><asp:Label ID="Label1" runat="server" Text="" ></asp:Label></div></form>
</body>
</html>

后端代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;public partial class Default3 : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){}protected void dl_province_SelectedIndexChanged(object sender, EventArgs e){if (dl_province.SelectedItem.Text == "福建省"){string[] str = {"福州市","厦门市","漳州市"};dl_city.Items.Clear();dl_city.DataSource = str;dl_city.DataBind();}if (dl_province.SelectedItem.Text == "广东省"){dl_city.Items.Clear();string[] str = { "中山市", "珠海市", "深圳市" };dl_city.DataSource = str;dl_city.DataBind();}}protected void Button1_Click(object sender, EventArgs e){if (TextBox1.Text != "" && TextBox2.Text == "123456"){Label1.Text = TextBox1.Text + "居住在" + dl_province.Text + dl_city.Text;}else if(TextBox1.Text == ""){NameLabel.Text = "姓名不能为空";}else if(TextBox2.Text != "123456"){PasswordLabel.Text = "密码不正确";}}protected void Button2_Click(object sender, EventArgs e){TextBox1.Text = "";TextBox2.Text = "";Label1.Text = "";dl_province.SelectedItem.Selected = false;dl_city.SelectedItem.Selected = false;dl_city.Items.Clear();NameLabel.Text = "";PasswordLabel.Text = "";}
}

http://chatgpt.dhexx.cn/article/Y10e5h5g.shtml

相关文章

mvc html dropdownlist,ASP.NET MVC中使用DropDownList地详解

mvc html dropdownlist,ASP.NET MVC中使用DropDownList地详解

DropDownList控件又称下拉列表框控件,DropDownList控件动态连接到数据库，按指定 条件从数据库 中查询 出列表选项数据，然后绑 定到控件，可以方便快速地显示出多个下拉选 项 。 同时 ，通过修 改数据库 中数据 ，可 以动 态改 变下 拉选项 在ASP.NET MVC中，尽管我们可以直接…
阅读更多...
DropDownList 绑定数据

DropDownList 绑定数据

如何使用DropDownList 控件绑定数据呢&#xff0c;今天我们来介绍一下比较常用的一种方法——前后台结合方式&#xff1a; 首先&#xff0c;我们需要拉一个DropDownList 控件&#xff1a; 然后&#xff0c;通过控件配置SqlDataSource数据源&#xff0c;选择合适的数据表&#…
阅读更多...
jQuery 如何得到 scrollHeight 的值

jQuery 如何得到 scrollHeight 的值

之前为了得到div的scrollHeight的值&#xff0c; 一直写法是这样的&#xff1a; $(#box)[0].scrollHeight; 今天我知道了另外一个方法&#xff1a; $(#box).prop(scrollHeight); 注意&#xff1a; $(#box).arrt(scrollHeight); 这个写法是undefined值
阅读更多...
scrollHeight,clientHeight,scrollTop

scrollHeight,clientHeight,scrollTop

移动端加载数据时&#xff0c;由于数据太多&#xff0c;不会一次性全部加载出来。有些会采用pc端那样用分页码的形式&#xff0c;但是更多的确实滑动滚动条到内容最后&#xff0c;加载更多内容出来。一般引入了三方的前端框架和插件&#xff0c;基本都会有此功能。偶尔会需要采…
阅读更多...
前端中的scrollHeight 、scrollTop、clientHeight等意思

前端中的scrollHeight 、scrollTop、clientHeight等意思

要记住 通过 标签.style.width是获取不到宽度的&#xff0c;如果必须要获取可以通过clientWidth&#xff0c;或者是offsetWidth 完成这个动作需要先知道三个高度&#xff1a; scrollHeight 文档内容实际高度&#xff0c;包括超出视窗的溢出部分 scrollTop 滚动条距元素…
阅读更多...
一张图让你搞懂scrollHeight、offsetHeight等

一张图让你搞懂scrollHeight、offsetHeight等

名称属性说明clientTop只读clientTop 表示一个元素的顶部边框的宽度&#xff0c;不包括左外边距和左内边距。top可写该属性规定了元素的顶部位置&#xff0c;包括&#xff1a;内边距、滚动条、边框和外边距。scrollTop可写scrollTop表示被选元素的垂直滚动条位置offsetTop只读元…
阅读更多...
document.body.scrollHeight 取值不变

document.body.scrollHeight 取值不变

遇到一个奇葩的问题,document.body.scrollHeight一直不变,不会因为content 内容的高度而变化 原因: 就是因为下面这个样式设定,overflowX.
阅读更多...
scrollHeight的值一直为0,怎么办？

scrollHeight的值一直为0,怎么办？

注意&#xff1a;要使用ref&#xff0c;不要使用document.getElementById&#xff0c;不然得不到scrollHeight真实的值。 如下&#xff1a; chatform的值一直为0&#xff0c;而listheight的值是有的
阅读更多...
scrollTop和scrollHeight属性

scrollTop和scrollHeight属性

--------------------------------------------------------------------- 检测滚动条是否滚动到底部&#xff1a; <body><div id"outerctn"><div id"innerctn"><div id"innerctn1">测试div1</div><div id&qu…
阅读更多...
el.scrollHeight属性的理解

el.scrollHeight属性的理解

目录 前言 一、scrollHeight是什么&#xff1f; 二、没了 前言 在看iview的collaspse-transition组件实现时&#xff0c;发现有el.scrollHeight这个属性&#xff1a; enter(el) {el.dataset.oldOverflow el.style.overflowif (el.scrollHeight ! 0) {el.style.height el.scro…
阅读更多...
html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...

html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...

浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight 发布时间&#xff1a;2020-07-17 09:27:20 来源&#xff1a;亿速云 阅读&#xff1a;223 作者&#xff1a;小猪 小编这次要给大家分享的是浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeigh…
阅读更多...
html5 scrollheight,scrollHeight和scrollWidth，获取网页内容高度和宽度不正确

html5 scrollheight,scrollHeight和scrollWidth，获取网页内容高度和宽度不正确

问题如下图所示&#xff0c;高度明显不正确&#xff0c;请问问题出在哪&#xff0c;希望能给出详细解释。另外&#xff0c;希望能再具体解释下document.documentElement.clientHeight、window.innerHeight、document.documentElement.scrollHeight及document.body.clientHeight…
阅读更多...
html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...

html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...

全文参考&#xff1a;https://github.com/iuap-design/blog/issues/38 、MDN clientHeight&#xff0c;只读 clientHeight可以用公式 CSS height CSS padding - 水平滚动条的高度 (如果存在) 来计算。 如图&#xff0c;这样一个div&#xff0c;它的clientHeight为95&#xff0…
阅读更多...
html 的scor属性,scrollheight属性

html 的scor属性,scrollheight属性

scrollHeight 属性是属于什么范畴&#xff1f; CSS布局HTML小编今天和大家分享问大神&#xff0c;Height属性到底指的是什么 html设置 overflow-x: scroll;属性后怎么让指定位如果页面不够长(至少窗口长度两倍)&#xff0c;那肯定滚动不到一半的位置。否则任何浏览器都不会产生…
阅读更多...
scrollHeight实测

scrollHeight实测

scrollHeight实测 scrollHeight就是不考虑滚动条&#xff0c;将内容全部在页面上展开时的高度&#xff0c;注重要加上 padding&#xff0c;不包括border – 小菜菜 即 scrollHeight 实际内容尺寸 padding 我们来看看在box-sizing分别是content-box 和 border-box 时&#x…
阅读更多...
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍

JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍

一、先介绍clientHeight与scrollHeight的区别 clientHeight&#xff1a; 在页面上返回内容的可视高度&#xff08;不包括边框&#xff0c;边距或滚动条&#xff09; scrollHeight&#xff1a; 返回整个元素的高度&#xff08;包括带滚动条的隐蔽的地方&#xff09; 相关概念的…
阅读更多...
QQ好友辅助验证不要信

QQ好友辅助验证不要信

为什么说不要信&#xff1f; 首先&#xff0c;从我自己亲身经历说起&#xff1a; 我同学突然叫我帮忙弄辅助验证&#xff0c;我就好心帮忙弄嘛。 后面我也听话的照着弄&#xff0c;结果到后面。 说完语音&#xff0c;我走到教室。我就发现不对劲&#xff0c;因为我问同学…
阅读更多...
qq跳转加好友链接

qq跳转加好友链接

现在有谁可以做到 跳转qq加好友的链接&#xff0c;加了对方能收到验证的消息。 测试了好多链接都不行&#xff0c;对方都收不到加好友的消息 用推荐QQQ联系人分享到微信 获取链接 在换别的qq跳转加好友也收不到任何消息 请问有哪位大神可以&#xff0c;帮忙解决这个问题 小…
阅读更多...
网页QQ 不用加好友直接聊天

网页QQ 不用加好友直接聊天

1、打开腾讯推广网站&#xff1a; &#xfeff;&#xfeff; http://shang.qq.com/ 2、登录需要推广的QQ 3、选择组件样式和提示语&#xff1a; 4、复制生成的代码&#xff0c;并粘贴到网页上即可&#xff1a;
阅读更多...
(第一期)-自动化实现全自动加好友(以QQ可能想认识的人为例）

(第一期)-自动化实现全自动加好友(以QQ可能想认识的人为例）

大家好&#xff0c;我是公众号&#xff1a;狗哥文化 最近有不少网友说,之前的QQ可能想认识的人引流程序用不了,不支持最新版本的qq,问我有没有时间更新一下,刚好昨天夜晚有点时间就顺手更新了一下,最后把整个开发过程给大家一起分享一下吧 再编写这款程序之前我们先来展示一下…
阅读更多...
推荐文章

Copyright @ 2022~2023