asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框

时间:2006/6/27 23:37:12      阅读:13556     附件: AjaxVB2005.rar (经验值:10)     下载:39

      这两天要使用到无刷新下拉功能,研究了一下Ajax,整理了一份使用asp.net2.0(vb)结合Ajax实现DropDownList无刷新三联动下拉框,共享出来,希望大家能用上

html代码

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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>
    <title>web3.cn——Ajax实现无刷新三联动下拉框</title>
    <style type="text/css"> 
        body {COLOR: #333; 
        FONT-SIZE: 9pt; 
        LINE-HEIGHT:150%; 
        FONT-FAMILY: 'Lucida Grande',arial,verdana,sans-serif; }
    </style>
            <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)
                {                    
                    //debugger;
                    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));
                    }
                    }
                }                
                return
            }
            //市区----------------------------------------
            function areaResult() 
            { 
                var area=document.getElementById("DropDownList2");
                AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
            }
            function get_area_Result_CallBack(response)
            {
                if (response.value != null)
                {                    
                    document.all("DropDownList3").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].area;
                      var id=ds.Tables[0].Rows[i].areaID;
                      document.all("DropDownList3").options.add(new Option(name,id));
                    }                
                    }
                }
                return
            }
            function getData()
            {
                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;
                
                var area=document.getElementById("DropDownList3");
                var aindex = area.selectedIndex;
                var aValue = area.options[aindex].value;
                var aText  = area.options[aindex].text;
                
                var txt=document.getElementById("TextBox1");                                

                document.getElementById("<%=TextBox1.ClientID%>")
                .innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;
            }
            </script>
</head>
<body>
    <form id="form1" runat="server">
    <table cellspacing="0" border="1" style="width:300px;border-collapse:collapse;background:#ececec;">
        <tr>
            <td>省市</td>
            <td><asp:dropdownlist id="DropDownList1" runat="server"></asp:dropdownlist></td>
        </tr>
        <tr>
            <td>城市</td>
            <td><asp:dropdownlist id="DropDownList2" runat="server"></asp:dropdownlist></td>
        </tr>
        <tr>
            <td>市区</td>
            <td><asp:dropdownlist id="DropDownList3" runat="server"></asp:dropdownlist></td>
        </tr>
    </table>
    <br />
    <asp:TextBox id="TextBox1" runat="server" Width="424px"></asp:TextBox>
    <input type="button" value="获取资料" onclick="getData();" />
    </form>
</body>
</html>

VB代码

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Ajax.Utility.RegisterTypeForAjax(GetType(AjaxMethod))
        If Not Page.IsPostBack Then
            Me.DropDownList1.DataSource = AjaxMethod.GetPovinceList()
            Me.DropDownList1.DataTextField = "province"
            Me.DropDownList1.DataValueField = "provinceID"
            Me.DropDownList1.DataBind()

            Me.DropDownList1.Attributes.Add("onclick", "cityResult();")
            Me.DropDownList2.Attributes.Add("onclick", "areaResult();")
        End If
    End Sub
End Class

AjaxMethod.vb 代码

Imports Microsoft.VisualBasic
Imports System
Imports System.Data
Imports System.Data.SqlClient

Public Class AjaxMethod

GetDataSet

GetPovinceList

GetCityList

GetAreaList

End Class

在web.config文件加增加

<httpHandlers>
      <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
    </httpHandlers>

详细代码请下载附件

评论
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2006/8/4 22:04:05) by 飘萍 
    ajax是现在比较流行的技术,这个很有用。
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2006/9/20 14:23:40) by Atlas 
    用VS2005创建一个基本的Atlas Web应用:http://shark.blog.ccidnet.com/blog/ccid/do_showone/tid_89856.html
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2006/12/20 10:09:04) by 康康 
    不错,找了好久了
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2006/12/20 10:19:24) by 康康 
    附件在哪里哟?
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/1/16 14:14:59) by fun228 
      正在找这相关的资料呢!!
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/1/23 18:15:28) by ciyo 
    终于找到这方面的资料了
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/1/24 21:55:21) by ciyo58 
    请问这句话改成C#怎么写<Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)> _
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/5/11 8:48:21) by hy007 
    很好的文章,谢谢!
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/5/13 22:06:41) by 聂小明 
    不错,我会经常来的,呵呵,期盼发表新的文章....
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/6/2 15:45:30) by renjie 
    好东西啊!免费的吗?
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/6/12 11:48:31) by 邱长青 
    好东西
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/6/25 13:21:15) by hpbsun@163.com 
    谢谢哥们,刚自己用2.0做不下去了,在网上看到兄弟文章,弯腰谢过.
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/7/31 15:12:27) by 刘兴林 
    找了好久了,先谢谢了1
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/8/23 13:46:01) by bluelxxm 
    太棒了
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/9/7 17:25:07) by 王云鹏 
    我想要你的代码,谢谢
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/9/11 14:19:05) by 晓杨 
    我想看看你原代码,谢谢!!
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/9/11 15:41:26) by wongzhanggen 
    想看看源码
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/10/24 10:09:33) by guo 
    想要你的代码,谢谢
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2007/10/27 21:00:53) by bin 
    不错,想下源码。。。
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2008/8/17 15:57:04) by ranran 
    能看看源码吗?
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2009/4/26 1:13:39) by ehan 
    怎么老提示Could not load file or assembly 'Ajax' or one of its dependencies. 系统找不到指定的文件。
  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2009/9/19 16:59:22) by 国泉 

    <p>说我的经验不够啊,大虾们能发一个给我吗?我需要有一个数据库!谢谢</p>

  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2009/9/19 17:25:52) by 国泉 

    我的QQ是871152639 ,邮箱是871152639@qq.com

  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2009/9/20 12:25:44) by 国泉 

    老提示用户 'test' 登录失败。,怎么回事啊?请大虾们尽快回复我好!谢谢……

  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2009/9/21 15:16:53) by 国泉 

    终于找到一个不错的,可是我不知道该如何用session提取他的下拉值出来,还有dropdownlist的value值是空值,怎么样写进数据库。请大虾们指教一下

    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Data.OleDb" %>
    <script language="VB" runat="server">
    Sub Page_Load(Sender As Object, E As EventArgs)
     Dim conn As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("city.mdb"))
     Dim adp As New OleDbDataAdapter("Select * From provinces", conn)
     Dim ds As New DataSet()
     adp.Fill(ds, "provinces")
     '以下绑定省份,利用循环将所有省份添加到provinces控件
     Dim I As Integer
     For I =0 To ds.Tables("provinces").Rows.Count -1
      Dim dr As Datarow=ds.Tables("provinces").Rows(I)    '返回一个数据行对象
      droppro.Items.Add(New ListItem(dr("ProName"),dr("ProID")))  '添加一个选项
     Next
     '以下将所有区县输出到下面的ltlsubcity静态文本控件中
     adp=New OleDbDataAdapter("Select * From cities", conn)
     adp.Fill(ds, "cities")
     For I=0 To ds.Tables("cities").Rows.Count -1
      Dim dr As Datarow=ds.Tables("cities").Rows(I)    '返回一个数据行对象
     ltlsubcity.Text &= "subcity[" & I & "] = new Array(""" & dr("ProID") & """,""" & dr("CityName") & """,""" & dr("CityID") & """);" & Chr(10)  '最后输出一个换行符
     Next
     '下面给droppro控件添加JavaScript事件
     droppro.Attributes.Add("onchange","javascript:mychange(this.options[this.selectedIndex].value);") 
    End Sub
    </script>
    <html>
    <head>
    <script LANGUAGE="javascript">
     subcity = new Array();      //定义一个数组,存放所有区县信息
     <asp:Literal id="ltlsubcity" runat="server"/>  //这里使用了literal控件输出所有区县信息
     function mychange(provalue) {     //proValue参数传入客户选中的省份编号
      document.myform.dropcity.length = 0;    //将city下拉框先清空
      document.myform.dropcity.options[0] = new Option('==请选择区县==','');//先添加第0行
      var i;
      for (i=0;i < subcity.length; i++)    // subcity.length表示数组长度,为5
       {
        if (subcity[i][0] == provalue)   //判断是否属于所选省份
        { 
        //下面语句将在city下拉框最下边添加一个新项
        document.myform.dropcity.options[document.myform.dropcity.length] = new Option(subcity[i][1],subcity[i][2]);
        }        
       }
      }   
    </script>
    </head>
    <body>
     <form id="myform" runat="server">
      请选择省份
      <asp:DropDownList id="droppro" runat="server" >
       <asp:ListItem Value="" Text="==请选择省份=="/>
      </asp:DropDownList>
      请选择区县
      <asp:DropDownList id="dropcity" runat="server">
       <asp:ListItem Value="" Text="==请选择区县=="/>
      </asp:DropDownList>
     </form>
    </body>
    </html>
     

  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2009/10/8 9:11:58) by 书法 

    想要你的代码,谢谢想看看源码

  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2010/3/25 14:32:10) by 婵″倷缍嶆稉瀣祰閻㈤潧濂?Url= 

    Ajax真是个好东东!

  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2010/3/25 22:59:46) by 谢谢 

    <p>想要你的代码,谢谢想看看源码</p>

  • Re:asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框   (2011/3/9 8:22:52) by 徐萌 

    想看看你的代码,可惜分不够。

标 题:
 
姓 名:
 
主 页:

验证码:

评论:
 

Because of the cache,you may see your comments several minutes later.