基於MVC4+EasyUI的Web開發框架經驗總結（7）--實現省份、城市、行政區三者聯動

時間 2019-11-12

標籤基於 mvc4+easyui mvc easyui web 開發框架經驗總結實現省份城市行政區聯動欄目 HTML 简体版

原文原文鏈接

爲了提升客戶體驗和進行一些技術探索，如今正準備把我本身的客戶關係管理系統CRM在作一個Web的版本，所以對基於MVC的Web界面繼續進行一些研究和優化，力求在功能和界面上保持和Winform一致，本文主要介紹在個人CRM系統中用到的全國省份、城市、行政區三者的兩種效果，在Winform上實現沒問題，在Web上基於MVC的EasyUI實現，一樣也沒有問題。html

一、Winform上省份、城市、行政區的聯動效果

在很早的時候，我在Winform框架的一篇隨筆《Winform開發框架之字典管理模塊的更新，附上最新2013年全國最新縣及縣以上行政區劃代碼sql腳本》中介紹了在Winform版本里面的三者聯動效果，界面以下所示。ajax

並附贈送了我本身根據統計局數據修改整理後的全國省份、城市、行政區的數據腳本。全國地區的省份、城市、區縣這些新政區劃的最新Sql腳本下載地址以下所示： http://files.cnblogs.com/wuhuacong/CityDistrict.rarsql

裏面主要經過對控件自己選擇的事件進行處理，而後動態獲取不一樣的數據進行展現，大體的邏輯就是先初始化省份數據，而後省份控件選擇時觸發獲取該省份下的城市信息，城市控件選擇的時候觸發獲取該城市的行政區數據，大概的代碼以下所示。json

        private void txtProvince_SelectedIndexChanged(object sender, EventArgs e)
        {
            CListItem item = this.txtProvince.SelectedItem as CListItem;
            if (item != null)
            {
                string provinceId = item.Value;
                this.txtCity.Properties.BeginUpdate();
                this.txtCity.Properties.Items.Clear();
                List<CityInfo> cityList = BLLFactory<City>.Instance.GetCitysByProvinceID(provinceId);
                foreach (CityInfo info in cityList)
                {
                    this.txtCity.Properties.Items.Add(new CListItem(info.CityName, info.ID.ToString()));
                }
                this.txtCity.Properties.EndUpdate();
            }
        }

        private void txtCity_SelectedIndexChanged(object sender, EventArgs e)
        {
            CListItem item = this.txtCity.SelectedItem as CListItem;
            if (item != null)
            {
                string cityId = item.Value;
                this.txtDistrict.Properties.BeginUpdate();
                this.txtDistrict.Properties.Items.Clear();
                List<DistrictInfo> districtList = BLLFactory<District>.Instance.GetDistrictByCity(cityId);
                foreach (DistrictInfo info in districtList)
                {
                    this.txtDistrict.Properties.Items.Add(new CListItem(info.DistrictName, info.ID.ToString()));
                }
                this.txtDistrict.Properties.EndUpdate();
            }
        }

二、基於MVC+EasyUI的Web上實現省份、城市、行政區的聯動

有了全國的省份、城市、行政區數據，加上對三者的數據訪問進行了封裝，參考Winform版本的實現過程，固然在EasyUI的Web上實現起來，也是能夠的。框架

咱們先來看看實現的效果，而後在分析其中的實現思路和代碼，基於MVC+EasyUI的實現效果以下所示。異步

上面的效果是如何實現的呢？async

1）定義相關的控制器函數，提供Json數據源

爲了實現控件的數據綁定，咱們第一步須要爲這幾個控件定義一些控制器的函數，方便獲取相關的數據。其中的CListItem有Text 和 Value兩個屬性，能夠用於綁定操做。函數

        /// <summary>
        /// 獲取全部的省份
        /// </summary>
        /// <returns></returns>
        public ActionResult GetAllProvince()
        {
            List<CListItem> treeList = new List<CListItem>();

            List<ProvinceInfo> provinceList = BLLFactory<Province>.Instance.GetAll();
            foreach (ProvinceInfo info in provinceList)
            {
                treeList.Add(new CListItem(info.ProvinceName, info.ProvinceName));
            }
            return ToJsonContent(treeList);
        }

        /// <summary>
        /// 根據省份名稱獲取對應的城市列表
        /// </summary>
        /// <param name="provinceName">省份名稱</param>
        /// <returns></returns>
        public ActionResult GetCitysByProvinceName(string provinceName)
        {
            List<CListItem> treeList = new List<CListItem>();

            List<CityInfo> cityList = BLLFactory<City>.Instance.GetCitysByProvinceName(provinceName);
            foreach (CityInfo info in cityList)
            {
                treeList.Add(new CListItem(info.CityName, info.CityName));
            }

            return ToJsonContent(treeList);
        }

        /// <summary>
        /// 根據城市名稱獲取對應的行政區劃類別
        /// </summary>
        /// <param name="cityName">城市名稱</param>
        /// <returns></returns>
        public ActionResult GetDistrictByCityName(string cityName)
        {
            List<CListItem> treeList = new List<CListItem>();

            string condition = string.Format("");
            List<DistrictInfo> districtList = BLLFactory<District>.Instance.GetDistrictByCityName(cityName);
            foreach (DistrictInfo info in districtList)
            {
                treeList.Add(new CListItem(info.DistrictName, info.DistrictName));
            }

            return ToJsonContent(treeList);
        }

2）在視圖裏面添加控件綁定數據的JS代碼

爲了實現三個ComboBox的控件的聯動效果，咱們須要使用JS代碼實現數據的綁定，並綁定控件的Change事件，一旦用戶選擇其中一個，那麼可能觸發其餘另一個獲取數據源。post

        //綁定省份、城市、行政區信息
        function BindProvinceCity() {
            var province = $('#Province').combobox({
                valueField: 'Value', //值字段
                textField: 'Text', //顯示的字段
                url: '/Province/GetAllProvince',
                editable: true,
                onChange: function (newValue, oldValue) {
                    $.get('/City/GetCitysByProvinceName', { provinceName: newValue }, function (data) {
                        city.combobox("clear").combobox('loadData', data);
                        district.combobox("clear")
                    }, 'json');
                }
            });

            var city = $('#City').combobox({
                valueField: 'Value', //值字段
                textField: 'Text', //顯示的字段
                editable: true,
                onChange: function (newValue, oldValue) {
                    $.get('/District/GetDistrictByCityName', { cityName: newValue }, function (data) {
                        district.combobox("clear").combobox('loadData', data);
                    }, 'json');
                }
            });

            var district = $('#District').combobox({
                valueField: 'Value', //值字段
                textField: 'Text', //顯示的字段
                editable: true
            });
        }

而後界面上須要擺放這幾個控件。測試

                        <tr>      
                            <th>
                                <label for="Province">所在省份：</label>
                            </th>
                            <td>
                                <select class="easyui-combobox" id="Province" name="Province"  style="width:120px;"></select> 
                            </td>
                            <th>
                                <label for="City">城市：</label>
                            </th>
                            <td>
                                <select class="easyui-combobox" id="City" name="City"  style="width:120px;"></select> 
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label for="District">所在行政區：</label>
                            </th>
                            <td>
                                <select class="easyui-combobox" id="District" name="District"  style="width:120px;"></select>
                            </td>
                            <th>
                                <label for="Hometown">籍貫：</label>
                            </th>
                            <td>
                                <select class="easyui-combobox" id="Hometown" name="Hometown"  style="width:120px;"></select>
                            </td>
                        </tr>

OK，咱們實現了數據的初始化綁定，一旦用戶選擇了省份數據，那麼對應的城市數據列表也會更新了，選擇城市，那麼行政區也接着更新了，這一切彷佛都搞定了？

尚未，還須要考慮對編輯狀態下的數據賦值，若是實體類的信息裏面，已經有數據了，那麼綁定控件後，是否會正常顯示呢？

3）控件內容的綁定

通常狀況下，咱們經過Ajax操做來獲取控制器的數據，而後綁定到界面控件上，以下所示。

            $.getJSON("/Contact/FindByID?id=" + ID, function (info) {
                //賦值有幾種方式：.datebox('setValue', info.Birthday);.combobox('setValue', info.Status);.val(info.Name);.combotree('setValue', info.PID);
                $("#ID").val(info.ID);
                $("#Customer_ID").val(info.Customer_ID);
                $("#HandNo").val(info.HandNo);
                $("#Name").val(info.Name);

                $("#Province").combobox('setValue', info.Province);
                $("#City").combobox('setValue', info.City);
                $("#District").combobox('setValue', info.District);
                $("#Hometown").combobox('setValue', info.Hometown);
                
                ..................
            });
        }

若是沒有聯動的效果處理，通常狀況下，這種賦值的操做，沒有問題的，可是我發現使用這種方法操做城市和行政區的數據顯示不正常，開始百思不得其解，測試了幾種方法操做，都沒有使得城市、行政區的界面控件可以正常顯示。

原來發現，形成這種問題的緣由，多是使用異步操做，它們的聯動效果尚未處理完畢，就執行賦值操做了，致使可能數據沒法正常顯示。

所以改用設置爲同步的操做，以下紅色代碼所示，把async設置爲false就表示同步，測試後發現這個設置後，界面控件可以正常顯示了，一切都正常，終於解決心頭大患了。

            //使用同步方式，使得聯動的控件正常顯示
            $.ajaxSettings.async = false;

            //首先用戶發送一個異步請求去後臺實現方法
            $.getJSON("/Contact/FindByID?id=" + ID, function (info) {

以上就是我對於常常用到的全國省份、城市、行政區的Web上的聯動操做的界面效果和實現代碼，但願給你們提供一個參考的案例，共同提升。