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

1、Winform上省份、城市、行政區(qū)的聯(lián)動效果

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

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

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上實現(xiàn)省份、城市、行政區(qū)的聯(lián)動

有了全國的省份、城市、行政區(qū)數(shù)據(jù)，加上對三者的數(shù)據(jù)訪問進行了封裝，參考Winform版本的實現(xiàn)過程，當(dāng)然在EasyUI的Web上實現(xiàn)起來，也是可以的。
我們先來看看實現(xiàn)的效果，然后在分析其中的實現(xiàn)思路和代碼，基于MVC+EasyUI的實現(xiàn)效果如下所示。

1）定義相關(guān)的控制器函數(shù)，提供Json數(shù)據(jù)源

為了實現(xiàn)控件的數(shù)據(jù)綁定，我們第一步需要為這幾個控件定義一些控制器的函數(shù)，方便獲取相關(guān)的數(shù)據(jù)。其中的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>
/// 根據(jù)省份名稱獲取對應(yīng)的城市列表
/// </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>
/// 根據(jù)城市名稱獲取對應(yīng)的行政區(qū)劃類別
/// </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）在視圖里面添加控件綁定數(shù)據(jù)的JS代碼

為了實現(xiàn)三個ComboBox的控件的聯(lián)動效果，我們需要使用JS代碼實現(xiàn)數(shù)據(jù)的綁定，并綁定控件的Change事件，一旦用戶選擇其中一個，那么可能觸發(fā)其他另外一個獲取數(shù)據(jù)源。

//綁定省份、城市、行政區(qū)信息
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">所在行政區(qū)：</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，我們實現(xiàn)了數(shù)據(jù)的初始化綁定，一旦用戶選擇了省份數(shù)據(jù)，那么對應(yīng)的城市數(shù)據(jù)列表也會更新了，選擇城市，那么行政區(qū)也接著更新了，這一切似乎都搞定了？
還沒有，還需要考慮對編輯狀態(tài)下的數(shù)據(jù)賦值，如果實體類的信息里面，已經(jīng)有數(shù)據(jù)了，那么綁定控件后，是否會正常顯示呢？

3）控件內(nèi)容的綁定

一般情況下，我們通過Ajax操作來獲取控制器的數(shù)據(jù)，然后綁定到界面控件上，如下所示。

$.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);
    
    ..................
});
}

如果沒有聯(lián)動的效果處理，一般情況下，這種賦值的操作，沒有問題的，但是我發(fā)現(xiàn)使用這種方法操作城市和行政區(qū)的數(shù)據(jù)顯示不正常，開始百思不得其解，測試了幾種方法操作，都沒有使得城市、行政區(qū)的界面控件能夠正常顯示。

原來發(fā)現(xiàn)，造成這種問題的原因，可能是使用異步操作，它們的聯(lián)動效果還沒有處理完畢，就執(zhí)行賦值操作了，導(dǎo)致可能數(shù)據(jù)無法正常顯示。

因此改用設(shè)置為同步的操作，如下紅色代碼所示，把async設(shè)置為false就表示同步，測試后發(fā)現(xiàn)這個設(shè)置后，界面控件能夠正常顯示了，一切都正常，終于解決心頭大患了。

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

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

以上就是我對于經(jīng)常用到的全國省份、城市、行政區(qū)的Web上的聯(lián)動操作的界面效果和實現(xiàn)代碼，希望給大家提供一個參考的案例，共同提高。