天天看點

ASP.NET MVC + Jquery 實作Ajax下拉框資料三級關聯

這是第一使用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;

        }

    }

}