ASP.net 下拉列表级联

最新推荐文章于 2022-05-13 08:42:32 发布

白露-

最新推荐文章于 2022-05-13 08:42:32 发布

阅读量1.4k

点赞数 1

分类专栏： asp.net web学习笔记文章标签： asp.net

本文链接：https://blog.csdn.net/m0_56227168/article/details/122774934

版权

asp.net web学习笔记专栏收录该内容

49 篇文章 14 订阅

订阅专栏

本文是学习ASP.NET Web服务器编程的笔记，重点介绍了使用Ajax技术来实现实时更新。在前端，通过ScriptManager和UpdatePanel控件实现局部刷新，如在选择图书类别后，图书名称会自动更新。在后端，处理DropDownList的选择改变事件，根据选择的类别从数据库获取相应图书信息并填充到另一个下拉列表。

摘要由CSDN通过智能技术生成

一.说明

此文是小白在学习张晨光老师的视频教学<<Asp.Net WEB服务器编程技术>>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家.

二.前端

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication9_ajax_.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <br />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    图书类别:<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                    </asp:DropDownList>
                    <%--//AutoPostBack:向服务器自动提交,change-->
                    <br />
                    图书名称:<asp:DropDownList ID="DropDownList2" runat="server">
                    </asp:DropDownList>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                    <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
                </Triggers>
            </asp:UpdatePanel>
            <asp:Button ID="Button1" runat="server" Text="提交" />
        </div>
    </form>
</body>
</html>

设计页:
在这里插入图片描述
这里我们用了ajax,先放置scriptManager控件,紧接着放置Updatepanel控件,在此控件里,填入我们需要移步运行的代码及控件

可以在此处设置Updatepanel控件的属性,设置在内的,则会在调用时启用AJAX

三.后端

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Collections;

namespace WebApplication9_ajax_
{
    public partial class WebForm3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack) {
                DataTable dt = ToolMySqlDate.excutSql("SELECT * FROM student_ing");
                //运行前先清空列表
                DropDownList1.Items.Clear();
                DropDownList1.Items.Add("--请选择--");
				
				//将数据库查询出的数据依次赋值给下拉列表
				//ListItem(text,vlues)
                for (int i = 0; i < dt.Rows.Count; i++) {
                    DropDownList1.Items.Add(new ListItem(dt.Rows[i]["chatname"].ToString(), dt.Rows[i]["postid"].ToString()));
                }
            }
        }
        /// <summary>
        /// 第一个下拉列表的改变事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            //AutoPostBack:向服务器自动提交,change
            //如果选择的不是第一个,则刷新
            if (DropDownList1.SelectedIndex != 0)
            {
                Hashtable ht = new Hashtable();
                //将参数导入
                ht.Add("postid", DropDownList1.SelectedValue);

                DataTable dt = ToolMySqlDate.excutSql("SELECT * FROM student where postid=?postid", ht);

				//清空
                DropDownList2.Items.Clear();
				
				//关联数据
                DropDownList2.DataSource = dt;
                
                //赋值
                DropDownList2.DataTextField = "name";
                DropDownList2.DataValueField = "postid";
                //数据绑定
                DropDownList2.DataBind();
            }
            else {
            	//如果下拉列表1选的是第一个,即"-请选择--"时,清空数据,并返回,不做处理
                DropDownList2.Items.Clear();
                return;
            }
            

        }
    }
}

四.演示

当选择类别时,会在名称处自动更新数据,这里只是简单的逻辑演示,和业务逻辑无关,请忽视下方图书类别和图书名称所对应的实时数据.
在这里插入图片描述

白露-

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
ASP.net 下拉列表级联

一.说明此文是小白在学习张晨光老师的视频教学<<Asp.Net WEB服务器编程技术>>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家.二.前端<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication9_ajax_.WebForm3" %><!DOCTYPE html>
复制链接

扫一扫

专栏目录