為了提高客戶體驗和進行一些技術探索，現在正準備把我自己的客戶關系管理系統CRM在做一個Web的版本，是以對基于MVC的Web界面繼續進行一些研究和優化，力求在功能和界面上保持和Winform一緻，本文主要介紹在我的CRM系統中用到的全國省份、城市、行政區三者的兩種效果，在Winform上實作沒問題，在Web上基于MVC的EasyUI實作，同樣也沒有問題。
裡面主要通過對控件本身選擇的事件進行處理，然後動态擷取不同的資料進行展示，大緻的邏輯就是先初始化省份資料，然後省份控件選擇時觸發擷取該省份下的城市資訊，城市控件選擇的時候觸發擷取該城市的行政區資料，大概的代碼如下所示。
有了全國的省份、城市、行政區資料，加上對三者的資料通路進行了封裝，參考Winform版本的實作過程，當然在EasyUI的Web上實作起來，也是可以的。
我們先來看看實作的效果，然後在分析其中的實作思路和代碼，基于MVC+EasyUI的實作效果如下所示。
上面的效果是如何實作的呢？
為了實作控件的資料綁定，我們第一步需要為這幾個控件定義一些控制器的函數，友善擷取相關的資料。其中的CListItem有Text 和 Value兩個屬性，可以用于綁定操作。
為了實作三個ComboBox的控件的關聯效果，我們需要使用JS代碼實作資料的綁定，并綁定控件的Change事件，一旦使用者選擇其中一個，那麼可能觸發其他另外一個擷取資料源。
然後界面上需要擺放這幾個控件。
OK，我們實作了資料的初始化綁定，一旦使用者選擇了省份資料，那麼對應的城市資料清單也會更新了，選擇城市，那麼行政區也接着更新了，這一切似乎都搞定了？
還沒有，還需要考慮對編輯狀态下的資料指派，如果實體類的資訊裡面，已經有資料了，那麼綁定控件後，是否會正常顯示呢？
一般情況下，我們通過Ajax操作來擷取控制器的資料，然後綁定到界面控件上，如下所示。
如果沒有關聯的效果處理，一般情況下，這種指派的操作，沒有問題的，但是我發現使用這種方法操作城市和行政區的資料顯示不正常，開始百思不得其解，測試了幾種方法操作，都沒有使得城市、行政區的界面控件能夠正常顯示。
原來發現，造成這種問題的原因，可能是使用異步操作，它們的關聯效果還沒有處理完畢，就執行指派操作了，導緻可能資料無法正常顯示。
是以改用設定為同步的操作，如下紅色代碼所示，把async設定為false就表示同步，測試後發現這個設定後，界面控件能夠正常顯示了，一切都正常，終于解決心頭大患了。
以上就是我對于經常用到的全國省份、城市、行政區的Web上的關聯操作的界面效果和實作代碼，希望給大家提供一個參考的案例，共同提高。
<a href="http://www.cnblogs.com/wuhuacong/p/3281103.html">基于MVC4+EasyUI的Web開發架構形成之旅--總體介紹</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3317223.html">基于MVC4+EasyUI的Web開發架構形成之旅--界面控件的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3343967.html">基于MVC4+EasyUI的Web開發架構形成之旅--附件上傳元件uploadify的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3344096.html">基于MVC4+EasyUI的Web開發架構形成之旅--架構總體界面介紹</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3352016.html">基于MVC4+EasyUI的Web開發架構形成之旅--基類控制器CRUD的操作</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3361351.html">基于MVC4+EasyUI的Web開發架構形成之旅--權限控制</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3667703.html">基于MVC4+EasyUI的Web開發架構經驗總結（1）-利用jQuery Tags Input 插件顯示選擇記錄</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3669575.html">基于MVC4+EasyUI的Web開發架構經驗總結（2）- 使用EasyUI的樹控件建構Web界面</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3669708.html">基于MVC4+EasyUI的Web開發架構經驗總結（3）- 使用Json實體類建構菜單資料</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3736564.html">基于MVC4+EasyUI的Web開發架構經驗總結（4）--使用圖表控件Highcharts</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3780356.html">基于MVC4+EasyUI的Web開發架構經驗總結（5）--使用HTML編輯控件CKEditor和CKFinder</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3840321.html">基于MVC4+EasyUI的Web開發架構經驗總結（6）--在頁面中應用下拉清單的處理</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3841338.html">基于MVC4+EasyUI的Web開發架構經驗總結（7）--實作省份、城市、行政區三者關聯</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3871991.html">基于MVC4+EasyUI的Web開發架構經驗總結（8）--實作Office文檔的預覽</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3872890.html">基于MVC4+EasyUI的Web開發架構經驗總結（9）--在Datagrid裡面實作外鍵字段的轉義操作</a>
<a href="http://www.cnblogs.com/wuhuacong/p/3873498.html">基于MVC4+EasyUI的Web開發架構經驗總結（10）--在Web界面上實作資料的導入和導出</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4073203.html">基于MVC4+EasyUI的Web開發架構經驗總結（11）--使用Bundles處理簡化頁面代碼</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4085682.html">基于MVC4+EasyUI的Web開發架構經驗總結（12）--利用Jquery處理資料互動的幾種方式</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4085725.html">基于MVC4+EasyUI的Web開發架構經驗總結（13）--DataGrid控件實作自動适應寬帶高度</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4093778.html">基于MVC4+EasyUI的Web開發架構經驗總結（14）--自動生成圖示樣式檔案和圖示的選擇操作</a>