省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例。前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅。

在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图:

 邀月工作室

主要文件如下:
AreaModel.cs:

using System;
using System.Collections.Generic;
namespace Downmoon.Framework.Model
{
    
#region PopularArea
    
public class Area
    {
        
private string m_Area_ID;
        
/// <summary>
        
/// 地区编号
        
/// </summary>
        public string Area_ID
        {
            
get { return m_Area_ID; }
            
set { m_Area_ID = value; }
        }

        
private string m_Area_Name;
        
/// <summary>
        
/// 地区名称
        
/// </summary>
        public string Area_Name
        {
            
get { return m_Area_Name; }
            
set { m_Area_Name = value; }
        }

        
private double m_Area_Order;
        
/// <summary>
        
/// 排序
        
/// </summary>
        public double Area_Order
        {
            
get { return m_Area_Order; }
            
set { m_Area_Order = value; }
        }

        
private int m_Area_Layer;
        
/// <summary>
        
/// 层级
        
/// </summary>
        public int Area_Layer
        {
            
get { return m_Area_Layer; }
            
set { m_Area_Layer = value; }
        }

        
private string m_Area_FatherID;
        
/// <summary>
        
/// 父级ID
        
/// </summary>
        public string Area_FatherID
        {
            
get { return m_Area_FatherID; }
            
set { m_Area_FatherID = value; }
        }

        
public Area() { }

        
public Area(string id, string name, double order, int layer, string father)
        {
            
this.Area_ID = id;
            
this.Area_Name = name;
            
this.m_Area_Order = order;
            
this.m_Area_Layer = layer;
            
this.m_Area_FatherID = father;

        }
    }
    
#endregion
}

AreaControl.cs:

using System;
using System.Collections.Generic;
using Downmoon.Framework.Model;

namespace Downmoon.Framework.Controllers
{
    
public class AreaList : IArea
    {
        
// Area singleton
        private static AreaList instance;
        
public static AreaList Instance
        {
            
get
            {
                
if (AreaList.instance == null)
                {
                    AreaList.instance 
= new AreaList();
                }
                
return AreaList.instance;
            }
        }

        
public List<Area> GetAreaList()
        {
            List
<Area> Areas = new List<Area>();
            Areas.Add(
new Area("110000""北京市"01"000000"));
            Areas.Add(
new Area("110100""市辖区"02"110000"));
            Areas.Add(
new Area("110101""东城区"03"110100"));
            Areas.Add(
new Area("110102""西城区"03"110100"));
            Areas.Add(
new Area("110103""崇文区"03"110100"));
            Areas.Add(
new Area("330000""浙江省"01"000000"));
            Areas.Add(
new Area("330100""杭州市"02"330000"));
            Areas.Add(
new Area("330200""宁波市"02"330000"));
            Areas.Add(
new Area("330102""上城区"03"330100"));
            Areas.Add(
new Area("330103""下城区"03"330100"));
            Areas.Add(
new Area("330104""江干区"03"330100"));
            Areas.Add(
new Area("330105""拱墅区"03"330100"));
            Areas.Add(
new Area("330106""西湖区"03"330100"));
            Areas.Add(
new Area("330203""海曙区"03"330200"));
            Areas.Add(
new Area("330204""江东区"03"330200"));
            Areas.Add(
new Area("330205""江北区"03"330200"));
            Areas.Add(
new Area("330206""北仑区"03"330200"));
            Areas.Add(
new Area("330211""镇海区"03"330200"));
            
return Areas;
        }

        
public List<Area> GetAreaListFindByParentID(string filter)
        {
            
return GetAreaList().FindAll(
                
delegate(Area ar)
                {
                    
return ar.Area_FatherID == filter;
                }
                );
        }
    }
}

Factory.cs

using System;
using System.Collections.Generic;
//using Downmoon.Framework.Model;
namespace Downmoon.Framework.Controllers
{
    
public class Factory
    {
        
public static IArea GetAreaController()
        {
            
return AreaList.Instance;
        }
    }
}

IArea.cs

using System;
using System.Collections.Generic;
using System.Text;
using Downmoon.Framework.Model;

namespace Downmoon.Framework.Controllers
{
    
public interface IArea
    {
        List
<Area> GetAreaList();
        List
<Area> GetAreaListFindByParentID(string filterID);
    }
}

一、基于aspnet自带的Ajax框架,主要好处是与asp.net完全集成,无需写过多的js。缺点是在framework2下需作一些设置,在Framework 4下无需设置。
Framework 2:

需首先在web.config文件中作配置:

<?xml version="1.0"?>
<configuration>
    
<configSections>
        
<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
            
<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
                
<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
                
<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
                    
<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere" />
                    
<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />
                    
<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />
                
</sectionGroup>
            
</sectionGroup>
        
</sectionGroup>
    
</configSections>

    
<system.web>
        
<customErrors defaultRedirect="" />
        
<trace mostRecent="true" pageOutput="true" />
        
<pages>
            
<controls>
                
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            
</controls>
        
</pages>
        
<compilation>
            
<assemblies>
                
<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
            
</assemblies>
        
</compilation>

        
<httpHandlers>
            
<remove verb="*" path="*.asmx"/>
            
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            
<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
        
</httpHandlers>

        
<httpModules>
            
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        
</httpModules>
    
</system.web>


    
<system.webServer>
        
<validation validateIntegratedModeConfiguration="false"/>
        
<modules>
            
<add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        
</modules>
        
<handlers>
            
<remove name="WebServiceHandlerFactory-Integrated" />
            
<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode"
                 type
="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            
<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode"
                 type
="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            
<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
        
</handlers>
    
</system.webServer>
</configuration>


前台页面:
 

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
    
</asp:ScriptManager>
    
<div>
        
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            
<ContentTemplate>
                
<table width="500" border="0" cellpadding="0" cellspacing="2" >
                    
<tr>
                        
<td height="25" bgcolor="#EAEAEA" >
                            请选择省/市/区:
                        
</td>
                        
<td bgcolor="#f7f7f7">
                            
&nbsp; &nbsp;<asp:DropDownList ID="dpProvince" runat="server"
                                AutoPostBack
="true" onselectedindexchanged="dpProvince_SelectedIndexChanged" />
                            
&nbsp; &nbsp;<asp:DropDownList ID="dpCity" runat="server" AutoPostBack="true"
                                onselectedindexchanged
="dpCity_SelectedIndexChanged" />
                            
&nbsp; &nbsp;<asp:DropDownList ID="dpArea" runat="server" AutoPostBack="false"
                                 
/>
                        
</td>
                    
</tr>
                    
<tr>
                        
<td height="25" bgcolor="#EAEAEA" >
                        
</td>
                        
<td  bgcolor="#f7f7f7">
                            
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
                                
<ProgressTemplate>
                                    正在查询,请稍候……………………
</ProgressTemplate>
                            
</asp:UpdateProgress>
                        
</td>
                    
</tr>
                  
                
</table>
            
</ContentTemplate>
            
<Triggers>
                
<asp:AsyncPostBackTrigger ControlID="dpProvince" EventName="SelectedIndexChanged" />
                
<asp:AsyncPostBackTrigger ControlID="dpCity" EventName="SelectedIndexChanged" />

            
</Triggers>
        
</asp:UpdatePanel>
    
</div>

 Framework 4:与代码完全一样,只是无需在web.config中作配置。

 如图:
邀月工作室

 二、基于JQuery1.4.1的Ajax框架,主要好处是与后续版本的asp.net完全集成。

 基于ashx作一个Request,主要代码:

using System;
using System.Collections.Generic;
using System.Web;
using Downmoon.Framework.Controllers;
using Downmoon.Framework.Model;
using System.Text;
namespace dropdown_JQuery14_Net2
{
    
/// <summary>
    
/// Summary description for AjaxRequest
    
/// </summary>
    public class AjaxRequest : IHttpHandler
    {

        
public void ProcessRequest(HttpContext context)
        {

            
string Area_FatherID = string.Empty;
            
if (context.Request["pid"!= null)
            { Area_FatherID 
= context.Request["pid"].ToString(); }
            
string parentId = string.Empty;
            
//mydbDataContext db = new mydbDataContext();
            
//根据传过来的Value值 进行查询
            
//List<ChinaStates> list = db.ChinaStates.Where(c => c.ParentAreaCode == strId).ToList();
            List<Area> list = Factory.GetAreaController().GetAreaListFindByParentID(Area_FatherID);
            context.Response.ContentType 
= "application/json";
            context.Response.ContentEncoding 
= Encoding.UTF8;
            context.Response.Write(ListToJson(list));
            context.Response.End();
        }
        
public string ListToJson(List<Area> list)
        {
            StringBuilder sb 
= new StringBuilder();
            
if (list != null)
            {
                sb.Append(
"[");
                
for (int i = 0; i < list.Count; i++)
                {
                    sb.Append(
"{");
                    sb.Append(
"\"Area_ID\":\"" + list[i].Area_ID + "\",");
                    sb.Append(
"\"Area_Name\":\"" + list[i].Area_Name + "\"");
                    
//sb.Append("\"Area_FatherID\":\"" + list[i].Area_FatherID + "\"");
                    if (i != list.Count - 1)
                    {
                        sb.Append(
"},");
                    }
                }

            }
            sb.Append(
"}");
            sb.Append(
"]");
            
return sb.ToString();
        }
        
public bool IsReusable
        {
            
get
            {
                
return false;
            }
        }
    }
}


前台:aspx

<!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 runat="server">
    
<title></title>
    
<style type="text/css">
        #dpCity
        
{
            display
: none;
            position
: relative;
        
}
        #dpArea
        
{
            display
: none;
            position
: relative;
        
}
    
</style>
    
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
        请选择省/市/区: 
&nbsp; &nbsp;<asp:DropDownList ID="dpProvince" runat="server" />
        
&nbsp; &nbsp;<asp:DropDownList ID="dpCity" runat="server">
        
</asp:DropDownList>
        
&nbsp; &nbsp;<asp:DropDownList ID="dpArea" runat="server" AutoPostBack="false" />
    
</div>
    
<script language="javascript" type="text/javascript">
      
        $(
function () {
            
var $dp1 = $("#dpProvince");
            
var $dp2 = $("#dpCity");
            
var $dp3 = $("select[name$=dpArea]");
            $dp1.focus();
            
//alert($dpCity);
            loadAreas("000000""0");
            $dp1.bind(
"change keyup"function () {
                
if ($(this).val() != "") {
                    
//alert($("select option:selected").val());
                    //loadAreas($("select option:selected").val(), "1");
                    var strPid = $dp1.attr("value"); //获取城市
                    loadAreas(strPid, "1");
                    $dp2.fadeIn(
"slow");
                } 
else {
                    $dp2.fadeOut(
"slow");
                }
            });
            $dp2.bind(
"change keyup"function () {
                
var strCId = $dp2.attr("value"); //获取城市
                if ($(this).val() != "") {
                    loadAreas(strCId, 
"2");
                    $dp3.fadeIn(
"slow");
                } 
else {
                    $dp3.fadeOut(
"slow");
                }
            });
        });
        
function loadAreas(selectedItem, level) {
            $.getJSON(
"AjaxRequest.ashx?pid=" + selectedItem, function (data) {
                
switch (level) {
                
case "0":
                       $(
"#dpProvince").html("");
                       $(
"#dpProvince").append("<option value='' selected='selected'>请选择...</option>");
                        
for (var i = 0; i < data.length; i++) {
                           $(
"#dpProvince").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name));
                        };
                        
break;
                    
case "1":
                       $(
"#dpCity").html("");
                       $(
"#dpCity").append("<option value='' selected='selected'>请选择...</option>");
                        
for (var i = 0; i < data.length; i++) {
                           $(
"#dpCity").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name));
                        };
                        
break;
                    
case "2":
                        $(
"#dpArea").html("");
                        $(
"#dpArea").append("<option value='' selected='selected'>请选择...</option>");
                        
for (var i = 0; i < data.length; i++) {
                           $(
"#dpArea").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name));
                        };
                        
break;
                  
                    
default:
                        
break;
                }
            });

        }       

    
</script>
    
</form>
</body>
</html>

 邀月工作室

 

 三、基于ExtJS 3.2的Ajax框架。
后台:

using System;
using System.Collections.Generic;
using System.Web;
using Downmoon.Framework.Controllers;
using Downmoon.Framework.Model;
using System.Text;
namespace dropdown_ExtJS32_Net2.Ajax
{
    
/// <summary>
    
/// Summary description for GetAreaXml
    
/// </summary>
    public class GetAreaXml : IHttpHandler
    {
        
//string baseCode = "000000";
        public void ProcessRequest(HttpContext context)
        {
            
string parentId = "000000";
            
if (context.Request["pid"!= null)
            {
                parentId 
= context.Request["pid"].ToString();
            }
            
//parentId = (parentId.Length > 0) ? parentId : "000000";
            ////string parentId2 = "000000";
            
////if (context.Request["pid2"] != null)
            
////{
            
////    parentId2 = context.Request["pid2"].ToString();
            
////}
            #region tony 2010.2.7 update
            List
<Area> list = new List<Area>();
            
//if (parentId.Length > 0)
            
//{
                list = Factory.GetAreaController().GetAreaListFindByParentID(parentId);
            
//}
            ////else if (parentId2.Length > 0)
            
////{
            
////    list = Factory.GetAreaController().GetAreaListFindByParentID(parentId2);
            
////}

            
#endregion

            context.Response.AddHeader(
"Cache-Control""no-cache, must-revalidate");
            context.Response.ContentEncoding 
= System.Text.Encoding.UTF8;
            context.Response.ContentType 
= "text/html";

            StringBuilder sb 
= new StringBuilder();


            
for (int i = 0; i < list.Count; i++)
            {
                sb.Append(
"{\"Area_Name\":\"" + list[i].Area_Name + "\",");
                sb.Append(
"\"Area_ID\":\"" + list[i].Area_ID + "\"},");
            }

            
string json = sb.ToString().TrimEnd(',');

            context.Response.Write(
"{\"Results\":[" + json + "]}");


        }

        
public bool IsReusable
        {
            
get
            {
                
return false;
            }
        }
    }
}



前台页面.aspx

<!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 runat="server">
    
<title>demo a dropdownlist by extjs 3.2 </title>
    
<link rel="stylesheet" href="Scripts/ext/3.2/resources/css/ext-all.css" />
    
<script type="text/javascript" src="Scripts/ext/3.2/adapter/ext/ext-base.js"></script>
    
<script type="text/javascript" src="Scripts/ext/3.2/ext-all.js"></script>
    
<script type="text/javascript">
        Ext.onReady(
function () {
            
//alert("extjs is Ok!");
        });
        
function $() {
            
return Ext.get(arguments[0]);
        }

        
/*Area*/
        
function GetAreas() {
            
//alert($(arguments[1]));
            var cityCtrl = $(arguments[1]).child("select");

            
var cityCtrlContainer = $(arguments[1]);
            cityCtrl.dom.options.length 
= 0;
            
if ($(arguments[0]).getValue() == "") { cityCtrlContainer.hide(); return; }
        
            cityCtrl.disabled 
= true;
            
var selectValue2 = $(arguments[0]).getValue();
            Ext.Ajax.request({
                url: arguments[
2],
                params: { pid: selectValue2 },
                method: 
'GET',
                success: 
function (result, request) {
                    
//alert(params);
                    var jsonData = Ext.util.JSON.decode(result.responseText);
                    
//alert(jsonData.Results.length);
                    if (jsonData.Results.length > 0) {
                        cityCtrl.dom.options.add(
new Option("请选择""000000"));
                        
for (var i = 0; i < jsonData.Results.length; i++) {
                            cityCtrl.dom.options.add(
new Option(jsonData.Results[i].Area_Name, jsonData.Results[i].Area_ID));
                        }
                        cityCtrl.disabled 
= false;
                        cityCtrlContainer.show();
                    }
                    
else {
                        cityCtrlContainer.hide();
                    }

                },
                failure: 
function (result, request) { Ext.MessageBox.alert('Failed''Successfully posted form: ' + action.date); }
            });
        }

      
    
</script>
</head>
<body>
    
<form id="form1" runat="server">

    
<table width="500" border="0" cellpadding="0" cellspacing="2">
        
<tr>
            
<td height="25" bgcolor="#EAEAEA">
                
<div style="float: left; height: 20px; line-height: 20px;">
                    请选择
</div>
                
<asp:DropDownList Style="float: left;" ID="dropProvince" runat="server" />
                
<div style="float: left; height: 20px; line-height: 20px;">
                    省
</div>
                
<asp:Panel ID="panelArea" runat="server">
                    
<asp:DropDownList Style="float: left;" ID="dropArea" runat="server"   />
                    
<div style="float: left; height: 20px; line-height: 20px;">
                        市
</div>
                
</asp:Panel>
                
<asp:Panel ID="panelArea2" runat="server"  >
                    
<asp:DropDownList Style="float: left;" ID="dropArea2" runat="server" />
                    
<div style="float: left; height: 20px; line-height: 20px;">
                        县
</div>
                
</asp:Panel>
            
</td>
        
</tr>
    
</table>
    
</form>
</body>
</html>

效果如图:
邀月工作室
邀月工作室


附源码下载:
下载二
下载一

posted @ 2010-06-15 17:19  邀月  阅读(10967)  评论(16编辑  收藏