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

本文轉載自查看原文 2014-07-13 18:03 20056 Web開發框架

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

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

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

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

里面主要通過對控件本身選擇的事件進行處理，然后動態獲取不同的數據進行展示，大致的邏輯就是先初始化省份數據，然后省份控件選擇時觸發獲取該省份下的城市信息，城市控件選擇的時候觸發獲取該城市的行政區數據，大概的代碼如下所示。

        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();
            }
        }

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

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

我們先來看看實現的效果，然后在分析其中的實現思路和代碼，基於MVC+EasyUI的實現效果如下所示。

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

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事件，一旦用戶選擇其中一個，那么可能觸發其他另外一個獲取數據源。

        //綁定省份、城市、行政區信息
        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) {