省市联动

昵称10504424 2015-09-02

展开全文

学校上课时老师实现的省市联动都是通过服务器端控件的IsPostback属性实现的,然而我知道这在实际应用中一点用也没有,选项变一下就刷新一下页面,根本不现实,事实上网上看到的省市联动都是无刷新的.但我不知道怎样实现,没有学过ajax,也没有任何思路,学过ajax后,又想起了这个恋恋不忘的问题,于是自己思索实现了.不知道真正的企业中是怎么实现的,觉得我的方法好像有点绕,不管怎么说,功能是实现了.

我的省市数据都是基于数据库的,数据库就不上了,大体结构如下:

我用三层实现的,当然没有一步一步写三层,毕竟只是为了实现这一个功能,没必要做那么多机械的工作,直接用codesmith生成了三层模板,所以BLL层,DAL层,实体类就不上了,那不是重点,也不影响阅读.

首先页面加载时需要去数据库查询所有的省数据,因此建立了一个用于aja的一般处理程序ProInit.ashx,代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
using ProAndCity.Model;
using ProAndCity.BLL;
using System.Web.Script.Serialization;

namespace ProAndCity
{
    /// <summary>
    /// ProInit 的摘要说明
    /// </summary>
    public class ProInit : IHttpHandler,IRequiresSessionState
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //查询所有省数据(省的areapid为0)
           IEnumerable<ProAndCity.Model.AreaFull> list = new AreaFullBLL().GetAll(0);
           JavaScriptSerializer jss = new JavaScriptSerializer();
           string json = jss.Serialize(list);
           context.Response.Write(json);
        }

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

飘过一个想法,反正省的数据不可能有变动,感觉这里查询出的数据可以直接存在缓存中,省的每次都去查询数据库,不过这里又不是搞互联网优化,还是关心重点,这个无视了....

当省下拉框的选择项变更时,要根据id去数据库查询对应的市数据,因此建立了一个用于ajax的一般处理程序CityRequest.ashx,处理查询市数据的ajax请求,代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using ProAndCity.Model;
using ProAndCity.BLL;
using System.IO;
using System.Text;
using System.Web;
using System.Web.SessionState;
using System.Web.Script.Serialization;
namespace ProAndCity
{
    /// <summary>
    /// CityRequest 的摘要说明
    /// </summary>
    public class CityRequest : IHttpHandler,IRequiresSessionState
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
           int proId=Convert.ToInt32( context.Request["proId"]);
           IEnumerable<AreaFull> list = new AreaFullBLL().GetAll(proId);
           JavaScriptSerializer jss = new JavaScriptSerializer();
           string json = jss.Serialize(list);
           context.Response.Write(json);
        }

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

最后就是主界面的代码了,界面简洁请无视,完全为了功能而做的:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ProAndCity.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www./1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="JS/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            proInit();//加载省份
            $("#<%=ddlPro.ClientID%>").change(selectChange);
            selectChange();
        });

        //省份选项变化事件
        var selectChange=function () {
            $("#<%=ddlCity.ClientID%>").html("");
            var proId = $(this).val()==""?0:$(this).val();
            $.post("/CityRequest.ashx", { "proId": proId }, function (data) {
                var obj = eval(data);
                for (var i = 0; i < obj.length; i++) {
                    var areaName = obj[i].AreaName;
                    var areaId = obj[i].AreaId;
                    $("#<%=ddlCity.ClientID%>").append('<option value="' + areaId + '">' + areaName+ '</option>');
                    }
                });
        };

        //加载省份
        var proInit = function() {
            $.post("/ProInit.ashx", function (data) {
                var obj = eval(data);
                for (var i = 0; i < obj.length; i++) {
                    var areaName = obj[i].AreaName;
                    var areaId = obj[i].AreaId;
                    $("#<%=ddlPro.ClientID%>").append('<option value="' + areaId + '">' + areaName + '</option>');
                }
              });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:DropDownList ID="ddlPro" runat="server">
        </asp:DropDownList>
    
        城市:<asp:DropDownList ID="ddlCity" runat="server">
        </asp:DropDownList>
    
    </div>
    </form>
</body>
</html>