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

標籤：web開發   mvc   easyui   web開發架構   

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

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

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

650) this.width=650;" src="http://images.cnitblog.com/blog/8867/201312/09111122-57b3b0806a864aba980c0435f20e3658.png" style="border:0px;" />

並附贈送了我自己根據統計局資料修改整理後的全國省份、城市、行政區的資料指令碼。全國地區的省份、城市、區縣這些新政區劃的最新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的實現效果如下所示。

650) this.width=650;" src="http://images.cnitblog.com/i/8867/201407/131739219107621.png" style="border:0px;" />

650) this.width=650;" src="http://images.cnitblog.com/i/8867/201407/131739285512461.png" style="border:0px;" />   650) this.width=650;" src="http://images.cnitblog.com/i/8867/201407/131740180046952.png" style="border:0px;" />   

650) this.width=650;" src="http://images.cnitblog.com/i/8867/201407/131741535518495.png" style="border:0px;" />

上面的效果是如何?的呢？

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

650) this.width=650;" src="http://images.cnitblog.com/i/8867/201407/131801381606056.png" style="border:0px;" />

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

本文出自 “伍華聰的部落格” 部落格，請務必保留此出處http://wuhuacong.blog.51cto.com/1779896/1828945

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