ajax实现的无刷新三级联动

http://zhangyu028.cnblogs.com/articles/310568.html

本文来自小山blog:
http://singlepine.cnblogs.com/articles/257954.html
里面是三级联动,有数据库文件可下栽.
我只是将三级更改为两级,使用SQL SERVER数据库而已.

我的截图如下:

1.首先要在项目中增加对ajax.dll 的引用.

2.AjaxMethod.cs

AjaxMethod.cs
using System;
using System.Data;
using System.Data.SqlClient;
namespace MyAjaxSample
{
    /**//// <summary>
    /// AjaxMethod 的摘要说明。
    /// </summary>
    public class AjaxMethod
    {

        GetPovinceList#region GetPovinceList
        public static DataSet GetPovinceList()
        {
            string sql="select * from povince";
            return GetDataSet(sql);
        }
        #endregion

        GetCityList#region GetCityList
        [Ajax.AjaxMethod]
        public  DataSet GetCityList(int povinceid)
        {
            string sql="select * from city where father='"+povinceid+"'";
            return GetDataSet(sql);            
        }
        #endregion

        GetAreaList#region GetAreaList
        [Ajax.AjaxMethod]
        public  DataSet GetAreaList(int cityid)
        {
            string sql="select * from area where father='"+cityid+"'";
            return GetDataSet(sql);            
        }
        #endregion
    
        GetDataSet#region GetDataSet
        public static DataSet GetDataSet(string sql)
        {
            string ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
            SqlDataAdapter    sda =new SqlDataAdapter(sql,ConnectionString);
            DataSet ds=new DataSet();
            sda.Fill(ds);
            return ds;
        }
        #endregion

        

    }
}

3.HTML代码:

FourAjaxSample.aspx
<%@ Page language="c#" Codebehind="FourAjaxSample.aspx.cs" AutoEventWireup="false" Inherits="MyAjaxSample.FourAjaxSample" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>FourAjaxSample</title>
        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        <meta content="C#" name="CODE_LANGUAGE">
        <meta content="JavaScript" name="vs_defaultClientScript">
        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        <script language="javascript">
        function cityResult() 
        { 
            var city=document.getElementById("DropDownList1");
            AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
        }
        
        function get_city_Result_CallBack(response)
         {
          if (response.value != null)
             {                    
              document.all("DropDownList2").length=0;　　　　            
　　　　      var ds = response.value;
              if(ds != null && typeof(ds) == "object" && ds.Tables != null)
              {                    
                for(var i=0; i<ds.Tables[0].Rows.length; i++)
　　　　        {
　　　　            var name=ds.Tables[0].Rows[i].city;
　　　　　　        var id=ds.Tables[0].Rows[i].cityID;
　　　　　　        document.all("DropDownList2").options.add(new Option(name,id));
　　　　        }
　　　　           document.all("TextBox1").value="";　　
              }
             }               
         return
       }

    function areaResult() 
    { 
        var area=document.getElementById("DropDownList2");
        AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
    }


    function get_area_Result_CallBack()
    {
　　　　var province=document.getElementById("DropDownList1");
        var pindex = province.selectedIndex;
        var pValue = province.options[pindex].value;
        var pText  = province.options[pindex].text;

        var city=document.getElementById("DropDownList2");
        var cindex = city.selectedIndex;
        var cValue = city.options[cindex].value;
        var cText  = city.options[cindex].text;
　　　　document.all("TextBox1").value=pText+cText;　　　　                    
 
    }
        </script>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
            <h3>Ajax实现两级联动</h3>
            <TABLE class="border" id="border" style="Z-INDEX: 101; LEFT: 16px; WIDTH: 289px; POSITION: absolute; TOP: 48px; HEIGHT: 79px"
                borderColor="#95b0d9" cellSpacing="0" cellPadding="0" width="289" align="center" bgColor="#ffffff"
                border="1">
                <TR>
                    <TD style="WIDTH: 130px; HEIGHT: 27px" bgColor="#d8e7f6">
                        <asp:label id="Lab_province" runat="server">省(直辖市)</asp:label></TD>
                    <TD style="HEIGHT: 27px">
                        <asp:dropdownlist id="DropDownList1" runat="server" onchange="cityResult();"></asp:dropdownlist></TD>
                </TR>
                <TR>
                    <TD style="WIDTH: 130px; HEIGHT: 24px" bgColor="#d8e7f6">
                        <asp:Label id="Lab_City" runat="server">城市</asp:Label></TD>
                    <TD style="HEIGHT: 24px">
                        <asp:DropDownList id="DropDownList2" runat="server" onchange="areaResult();"></asp:DropDownList></TD>
                </TR>
                <TR>
                    <TD style="WIDTH: 130px" bgColor="#d8e7f6">你的最后选择是:
                    </TD>
                    <TD>
                        <asp:TextBox id="TextBox1" runat="server"></asp:TextBox></TD>
                </TR>
            </TABLE>
        </form>
    </body>
</HTML>

4 .cs文件:

FourAjaxSample.aspx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace MyAjaxSample
{
    /**//// <summary>
    /// FourAjaxSample 的摘要说明。
    /// </summary>
    public class FourAjaxSample : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.DropDownList DropDownList1;
        protected System.Web.UI.WebControls.Label Lab_province;
        protected System.Web.UI.WebControls.Label Lab_City;
        protected System.Web.UI.WebControls.TextBox TextBox1;
        protected System.Web.UI.WebControls.DropDownList DropDownList2;
    
        private void Page_Load(object sender, System.EventArgs e)
        {
            Ajax.Utility.RegisterTypeForAjax(typeof(MyAjaxSample.AjaxMethod));
            if(!Page.IsPostBack)
            {
                this.DropDownList1.DataSource=AjaxMethod.GetPovinceList();
                this.DropDownList1.DataTextField="province";
                this.DropDownList1.DataValueField="provinceID";
                this.DropDownList1.DataBind();
                this.DropDownList1.Attributes.Add("onclick","cityResult();");
                this.DropDownList2.Attributes.Add("onclick","areaResult();");
            }
        }

        Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {    
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion
    }
}

5.web.config

web.config设置数据库连接串
  <appSettings>
        <!-- SQL数据库连接 -->
        <add key="ConnectionString" value="Data Source=localhost;User Id=sa;Password=zhangzs;Initial Catalog=mytest;"/>
  </appSettings>

ajax实现无刷新两级联动DropDownList的更多相关文章

  1. Ajax省市区无刷新单表联动查询

    方法一: 在很多时候都需要用到无刷新级联查询,本文将以省市区的级联查询作为例子.注:此为单表三级联动 环境:Vistual Studio 2015 .MSSQL 1.首先下载AjaxControlTo ...

  2. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  3. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  4. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  5. Ajax 实现无刷新分页

    Ajax 实现无刷新分页

  6. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  7. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

  8. JS练习：两级联动

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  9. Combobox下拉框两级联动

    下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科 ...

随机推荐

  1. 晶振电路的设计-AN2867学习

    一 石英晶体的等效电路.带宽: FS~FA之间就是并联带宽,越窄稳定性越好.其中Fs.Fa为Lm/Rm/Cm电抗分别为0和无穷大时的谐振频率).Fp为工作频率(通过调整负载电容CL来达到中心频率) 起 ...

  2. 11073 最热门的K个搜索串

    11073 最热门的K个搜索串时间限制:350MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题 语言: G++;GCC;VCDescription大家都非常喜欢而习惯用baidu ...

  3. [转]25个HTML5和JavaScript游戏引擎库

    本文转自:http://www.open-open.com/news/view/27c6ed 1. The GMP JavaScript Game Engine GMP是一个基于精灵2-D游戏,它可以 ...

  4. 关于老教授之家项目的思考 && 中国互联网+大赛培训

    最近在做中国互联网+竞赛相关的项目,有一点思考在这里记录下来,算是一份经历,日后可以再回顾,这也是我真正参加的一个大型比赛,作为技术人员可能更多的是从事技术,但是在其他方面能贡献自己的一份力量也是不错 ...

  5. typescript的lambads解决this关键字找不到属性

    var people = { name: ["abc", "jack", "pepter", "jim"], getna ...

  6. 《大巧不工 web前端设计修炼之道》学习笔记

    前端设计如同一个人的着装与外表,站点的设计总是最先吸引人们的眼球.布局是否合理.风格是否简介.配色是否和谐,流程是否通畅,操作是否便捷,这些前端特效都影响着用户对站点的认可度.随着用户体验,可用性,可 ...

  7. 二叉查找树的C语言实现（一）

    什么是二叉查找树? 二叉查找树(Binary Search Tree),也称有序二叉树(ordered binary tree),排序二叉树(sorted binary tree),是指一棵空树或者具 ...

  8. CI控制器调用内部方法并载入相应模板的做法

    当我打开链接:http://localhost/3g/index/open/a/b?from=timeline后,判断链接中的from是否等于timeline,如果等于timeline,那么就调用控制 ...

  9. Vue.js基础语法（一）

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 前言: 前端解析数 ...

  10. nopcommerce 3.6网银在线支付插件（源码）

    网银在线支付插件,下载后通过后台插件管理安装.配置即可使用. 下载:网银在线支付插件3.1.3.6版.rar (106.3KB) 源代码放在\Plugins目录下,用vs打开重新生成. 源地址:htt ...