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>
    
    
  • 相关阅读:
    Linux中怎么通过PID号找到对应的进程名及所在目录
    MYSQL 1093 之You can't specify target table for update in FROM clause解决办法
    Spring注解@Resource和@Autowired区别对比
    Java数据类型和MySql数据类型对应一览
    java高分局之jstat命令使用(转)
    为python安装matplotlib模块
    Python中的文件IO操作(读写文件、追加文件)
    Python 3语法小记(九) 异常 Exception
    SpringBoot下的Job定时任务
    linux的top命令参数详解
  • 原文地址:https://www.cnblogs.com/myparamita/p/1862009.html
Copyright © 2011-2022 走看看