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

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

裡面主要通過對控制元件本身選擇的事件進行處理，然後動態獲取不同的資料進行展示，大致的邏輯就是先初始化省份資料，然後省份控制元件選擇時觸發獲取該省份下的城市資訊，城市控制元件選擇的時候觸發獲取該城市的行政區資料，大概的程式碼如下所示。

        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) {

以上就是我對於經常用到的全國省份、城市、行政區的Web上的聯動操作的介面效果和實現程式碼，希望給大家提供一個參考的案例，共同提高。

基於MVC4+EasyUI的Web開發框架的系列文章：