asp.net_DropDownList应用

最新推荐文章于 2024-03-18 22:37:30 发布

BeJav

最新推荐文章于 2024-03-18 22:37:30 发布

阅读量2.8k

点赞数 1

分类专栏： asp.net 文章标签： sql asp.net

本文链接：https://blog.csdn.net/weixin_45905039/article/details/123731409

版权

asp.net 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

记录三个DropDownList的实践操作

先上效果图

在这里插入图片描述

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

前端代码：

<%@ 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（）方法的快捷创建方式：直接在拆分交互界面双击这个多选框

在这里插入图片描述

先上效果图

在这里插入图片描述

看图片的信息基本上就可以知道
①多选框选中一个选项，跳转按钮实现跳转页面；
②修改选项；
③增加选项；
④在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 = "";
    }
}

BeJav

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
asp.net_DropDownList应用

记录三个DropDownList的实践操作1.先上效果图多选框选择其中一个选项，多行文本框输出这个选项的基本数据，以及下面的两个按钮的功能。前端代码：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
复制链接

扫一扫