zoukankan      html  css  js  c++  java
  • 【原创】用UpdatePanel实现无刷新级联下拉框

    使用asp.net ajax扩展实现无刷新下拉列表可实现你要的效果,此种方法不用写js

    1.在项目中引用asp.net ajax扩展dll,附件中有(关于此扩展,参见http://www.cnblogs.com/Terrylee/archive/2006/11/12/ASPNET_AJAX_QuickStarts.html

       此处主要使用asp:UpdatePanel 实现
    2.使用测试用表结构如下
        表province    字段 id provincename
        表city          字段 id  provincename   cityname
    3.代码如下
       
    <%@ 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">
    <%@ Import Namespace = "System.Data" %>
    <%@ Import Namespace = "MySql.Data.MySqlClient" %>
    
    <script language="C#" runat="server">
    
        //页面载入
        protected void Page_Load(object sender, EventArgs e) 
    	{
    	  If(!IsPostBack)
    	    {
              getProvince();
            }
        }
    
        //得到省
        private void getProvince()
        {
            MySqlConnection myConnection = new MySqlConnection("server=localhost;userid=root;password=root;database=test");
            string sql = "select t.provincename from province t";
            MySqlDataAdapter myda = new MySqlDataAdapter(sql, myConnection);
            DataSet mydataset = new DataSet();
            myda.Fill(mydataset, "admin");
            DropDownList1.DataSource = mydataset.Tables[0].DefaultView;
            DropDownList1.DataTextField = "provincename";
            DropDownList1.DataValueField = "provincename";
            DropDownList1.DataBind();
            getCity(DropDownList1.SelectedValue);
        }
    
        //根据省得到市
        private void getCity(String s)
        {
            MySqlConnection myConnection = new MySqlConnection("server=localhost;userid=root;password=root;database=test");
            string sql = "select t.cityname from city t where t.provincename = '" + s + "'";
            MySqlDataAdapter myda = new MySqlDataAdapter(sql, myConnection);
            DataSet mydataset = new DataSet();
            myda.Fill(mydataset, "admin");
            DropDownList2.DataSource = mydataset.Tables[0].DefaultView;
            DropDownList2.DataTextField = "cityname";
            DropDownList2.DataValueField = "cityname";
            DropDownList2.DataBind();
        }
        
        //改变省时
        private void changeProvince(object sender, EventArgs e)
        {
            getCity(DropDownList1.SelectedValue);
        }
        
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head><title>Simple MySQL Database Query</title></head>
        <body>
            <form runat="server">
                <asp:DataGrid id="mydatagrid" runat="server" />
                    <!--此处AutoPostBack设为true时,才会对DropDownList2进行刷新-->
                    <asp:DropDownList  id="DropDownList1"  runat="server"  OnSelectedIndexChanged="changeProvince" AutoPostBack="true"> </asp:DropDownList> 
    
                    <!--使用UpdatePanel之前必须放置ScriptManager,必须引用asp.net ajax包-->
                    <asp:ScriptManager ID="ScriptManager1" runat="server" />
                    
                    <!--必须将DropDownList放入UpdatePanel内才可对其刷新-->
                    <asp:UpdatePanel id="cityPanel" runat="server" UpdateMode="Conditional">
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
                        </Triggers>
                        <ContentTemplate>
                            <asp:DropDownList  id="DropDownList2"  runat="server" AutoPostBack="true"></asp:DropDownList> 
                        </ContentTemplate>
                    </asp:UpdatePanel>
            </form>
        </body>
    </html>
    
    
  • 相关阅读:
    .NET/C# 使用 SetWindowsHookEx 监听鼠标或键盘消息以及此方法的坑
    使用UI Automation实现自动化测试--1-4
    使用npm命令下载sass时出现Error: not found: python2
    CentOS上安装Python3
    解决electron打包时,下载超时导致失败
    FJ省队集训2021
    微信小程序自定义封装组件-showModal
    react性能优化
    认识react虚拟Dom
    前端FileReader读取文件信息
  • 原文地址:https://www.cnblogs.com/myparamita/p/1862009.html
Copyright © 2011-2022 走看看