首页新闻招聘找找看知识库
  • 回复:17 浏览:29252 2009-03-21 15:52 来自 GFSov

    这是第一使用Jquery实现城市三级数据联动的实例!之前本人没有使用过Jquery,在WebForm的开发过程中,很多时候用的是ASP.NET Ajax,ajaxPro +JavaScript,从未使用过JS框架,最近在学习ASP.NET MVC,在最新的发布版本中,已经集成了Jquery 1.3.1,自然,也要学一学!发现使用Jquery代码果然写得比原始JS优雅!只是语法和方法太多,现在还没弄熟,还需要时间来学习.....这次是第一次使用Jquery写客户端脚本,如果大家发现更好的实现方法,请给我留言!谢谢!

    注明:ASP.NET MVC 1.0 ,作者:0x001;

    View:

    <script type="text/javascript">
        $(document).ready(function() {
            GetByJquery();
            $("#ddlProvince").change(function() { GetCity() });
            $("#ddlCity").change(function() { GetDistrict() });
        });
       
        function GetByJquery() {

            $("#ddlProvince").empty(); //清空省份SELECT控件

            $.getJSON("/ajax/GetProvinceList", function(data) {
                $.each(data, function(i, item) {
                    $("<option></option>")
                        .val(item["ProvinceID"])
                        .text(item["ProvinceName"])
                        .appendTo($("#ddlProvince"));
                });
                GetCity();
            });     

        }

        function GetCity() {

            $("#ddlCity").empty(); //清空城市SELECT控件
            var url ="/ajax/GetCityList/" + $("#ddlProvince").val();
            $.getJSON(url, function(data) {
                $.each(data, function(i, item) {
                    $("<option></option>")
                        .val(item["CityID"])
                        .text(item["CityName"])
                        .appendTo($("#ddlCity"));
                });
                GetDistrict();
            });
        }

        function GetDistrict() {
            $("#ddlDistrict").empty(); //清空市区SELECT控件
            var url = "/ajax/GetDistrictList/" + $("#ddlCity").val();
           
            $.getJSON(url, function(data) {
                $.each(data, function(i, item) {
                    $("<option></option>")
                        .val(item["DistrictID"])
                        .text(item["DistrictName"])
                        .appendTo($("#ddlDistrict"));
                });
            });
        }

    </script>
    <table><tr><td><select id="ddlProvince"/></td><td><select id="ddlCity"/></td><td><select id="ddlDistrict" /></td></tr></table>

    Controller :

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using System.Web.Mvc.Ajax;

    namespace MvcBBS.Controllers
    {
        public class AjaxController : Controller
        {
            //
            // GET: /Ajax/

            /// <summary>
            /// 获取所有[省份]数据
            /// </summary>
            public ActionResult GetProvinceList()
            {
                if (!Request.IsAjaxRequest())
                {
                    return Content("请不要非法方法,这是不道德的行为!");
                }

                BLL.Province bll = new MvcBBS.BLL.Province();
                List<MvcBBS.Model.S_Province> modellist = bll.GetProvinceList();

                return Json(modellist);
            }

            /// <summary>
            /// 获取某[省份]的所有[城市]数据
            /// </summary>
            public ActionResult GetCityList(int id)
            {
                if (!Request.IsAjaxRequest())
                {
                    return Content("请不要非法方法,这是不道德的行为!");
                }
                BLL.Province bll = new MvcBBS.BLL.Province();
                List<MvcBBS.Model.S_City> modellist = bll.GetCityList(id);
                return Json(modellist);
            }

            /// <summary>
            /// 获取某[城市]的所有[市区]数据
            /// </summary>
            public ActionResult GetDistrictList(int id)
            {
                if (!Request.IsAjaxRequest())
                {
                    return Content("请不要非法方法,这是不道德的行为!");
                }

                BLL.Province bll = new MvcBBS.BLL.Province();
                List<MvcBBS.Model.S_District> modellist = bll.GetDistrict(id);

                return Json(modellist);
            }

        }
    }

    我比较喜欢使用三层+工厂模式来读写数据,O/R Mapping不太适合我的要求!我们写的项目经常不是为了方便移植,而是选择明确的数据库,需要更高的性能,更强的业务逻辑!大家看到上面的代码,应该很熟悉,从数据库读数据到List<>中返回,并使有ASP.NET MVC内置的Json方法转换数据并Response.

    DAL:    

    // BLL,Model就不贴出来了!

    using System;
    using System.Data;
    using System.Text;
    using System.Data.SqlClient;
    using System.Collections.Generic;
    using DBUtility;//请先添加引用

    namespace MvcBBS.DAL
    {
        public class Province
        {
            public Province()
            {}

            /// <summary>
            /// 获取所有省份数据
            /// </summary>
            /// <returns></returns>
            public List<Model.S_Province> GetProvinceList()
            {
                StringBuilder strSql = new StringBuilder();
                strSql.Append("SELECT ProvinceID,ProvinceName ");
                strSql.Append(" FROM S_Province ");
                List<Model.S_Province> modelList = new List<MvcBBS.Model.S_Province>();
                SqlDataReader dr = DbHelperSQL.ExecuteReader(strSql.ToString());           
                while (dr.Read())
                {
                     Model.S_Province _model = new MvcBBS.Model.S_Province();
                     _model.ProvinceID = int.Parse(dr["ProvinceID"].ToString());
                     _model.ProvinceName = dr.GetString(1);
                    modelList.Add(_model);
                }
                dr.Close();
                return modelList;
            }

            /// <summary>
            /// 获取某省份的所有城市数据
            /// </summary>
            /// <param name="ProvinceID"></param>
            /// <returns></returns>
            public List<Model.S_City> GetCityList(int ProvinceID)
            {
                StringBuilder strSql = new StringBuilder();
                strSql.Append("SELECT CityID,CityName,ZipCode");
                strSql.Append(" FROM S_City ");
                strSql.Append(" WHERE ProvinceID=");
                strSql.Append(ProvinceID.ToString());

                List<Model.S_City> modelList = new List<MvcBBS.Model.S_City>();
                SqlDataReader dr = DbHelperSQL.ExecuteReader(strSql.ToString());
                while (dr.Read())
                {
                    Model.S_City _model = new MvcBBS.Model.S_City();
                    _model.CityID = int.Parse(dr["CityID"].ToString());
                    _model.CityName = dr.GetString(1);
                    _model.ZipCode = dr.GetString(2);
                    _model.ProvinceID = ProvinceID;
                    modelList.Add(_model);
                }
                dr.Close();
                return modelList;
            }

            /// <summary>
            /// 获取某城市的所有市区
            /// </summary>
            /// <param name="CityID"></param>
            /// <returns></returns>
            public List<Model.S_District> GetDistrict(int CityID)
            {
                StringBuilder strSql = new StringBuilder();
                strSql.Append("SELECT DistrictID,DistrictName");
                strSql.Append(" FROM S_District ");
                strSql.Append(" WHERE CityID=");
                strSql.Append(CityID.ToString());

                List<Model.S_District> modelList = new List<MvcBBS.Model.S_District>();
                SqlDataReader dr = DbHelperSQL.ExecuteReader(strSql.ToString());
                while (dr.Read())
                {
                    Model.S_District _model = new MvcBBS.Model.S_District();
                    _model.DistrictID = int.Parse(dr["DistrictID"].ToString());
                    _model.DistrictName = dr.GetString(1);
                    _model.CityID = CityID;
                    modelList.Add(_model);
                }
                dr.Close();
                return modelList;
            }
        }
    }

    转载请注明: 0x001.com ,谢谢!大家多多提点建议!本人需要学习和改进的动力! 

  • Give up breathe
    2009-07-31 17:58 Give up breathe

    感觉 不错 学习一下
    第1楼 回到顶楼
  • Blink_Star
    2009-08-10 19:30 Blink_Star
    文档的顶层无效。处理资源 'http://localhost:53279/Default.aspx' 时出错。第 1 行,位置: 1

    是怎么回事呀 请帮忙解决哈
    第2楼 回到顶楼
  • 风中飘叶
    2009-08-11 08:48 风中飘叶
    不错啊
    上个月我也在做这个功能。
    第3楼 回到顶楼
  • itliyi
    2009-12-12 10:02 itliyi
    lz能不能放个源码下载链接?谢谢
    第4楼 回到顶楼
  • Tear Y
    2009-12-20 20:09 Tear Y
    DAL用Linq啊
    第5楼 回到顶楼
  • 风从指尖飘过
    2009-12-27 17:07 风从指尖飘过
    有源码没?发个看看呀 谢谢
    第6楼 回到顶楼
  • 绝版货、
    2010-01-05 09:27 绝版货、
    你贴的地址别人无法访问的啊!@Blink_Star
    第7楼 回到顶楼
  • 梦醉
    2010-04-07 11:07 梦醉
    $("<option></option>")
    .val(item["ProvinceID"])
    .text(item["ProvinceName"])
    .appendTo($("#ddlProvince"));
    这里出错 对象不支持此属性或方法 是什么原因?
    第8楼 回到顶楼
  • 在云端
    2010-04-07 23:55 在云端
    @梦醉
    用ie开发人员工具调试,看看这个对象是什么,有哪些属性和方法以及他们的值是多少,就会很清楚了
    第9楼 回到顶楼
  • jess12
    2010-05-24 20:01 jess12
    nxagentParseOptionString: Warning ignored option 'type' = 'unix-default'.
    nxagentParseOptionString: Warning ignored option 'cleanup' = '0'.
    nxagentParseOptionString: Warning ignored option 'accept' = 'X.X.X.X'.
    nxagentParseOptionString: Warning ignored option 'cookie' = '47E41FEFA78B0E02AECBCF9BD1B6BA20'.
    nxagentParseOptionString: Warning ignored option 'nodelay' = '1'.
    nxagentParseOptionString: Warning ignored option 'keybd' = '1'.
    Info: Proxy running in server mode with pid '3920'.
    Info: Waiting for connection from 'X.X.X.X' on port '5009'.
    Info: Aborting the procedure due to signal '15', 'SIGTERM'.
    -------------------------
    latest dumps for 70-270 ! 70-290 braindump ! testking 70-236 ! windows 7 exam dumps


    第10楼 回到顶楼
  • 一毛&梦想
    2010-06-09 22:30 一毛&梦想
    能不能问一下,程序里面$符号,是什么意思啊?
    第11楼 回到顶楼
  • 小堆爸
    2010-06-13 09:24 小堆爸
    请问可以打包源码下载吗?谢谢!
    第12楼 回到顶楼
  • 青青1
    2011-06-22 09:54 青青1
    var url ="/ajax/GetCityList/" + $("#ddlProvince").val();
    我输出这个URL $("#ddlProvince").val()这个返回空值,怎么回事呀 现在是第二级下拉框没有显示出来数据
    第13楼 回到顶楼
  • 林中闲人
    2014-04-14 15:25 林中闲人
    第14楼 回到顶楼
  • IT猎头Jackie
    2014-12-23 16:38 IT猎头Jackie
    上海互联网电商公司招聘1-3年ASP.NET开发,10K*14,免费饮料和零食,高大上的办公环境,有大型网站(MVC)开发经验的优先~ 有意的qq:1839371325
    第15楼 回到顶楼
  • renshen4322
    2015-11-22 14:39 renshen4322
    这个其实只是个思路,但里面细节很多错的,可能作者故意放出错误,或是培训机构所为。
    第16楼 回到顶楼
登录后才能评论,请先登录注册