基於MVC4+EasyUI的Web開發框架經驗總結(7) -开发者知识库

基於MVC4+EasyUI的Web開發框架經驗總結(7) -开发者知识库,第1张

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

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

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

基於MVC4+EasyUI的Web開發框架經驗總結(7) -开发者知识库,第2张

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

基於MVC4+EasyUI的Web開發框架經驗總結(7) -开发者知识库,第3张

基於MVC4+EasyUI的Web開發框架經驗總結(7) -开发者知识库,第4张   基於MVC4+EasyUI的Web開發框架經驗總結(7) -开发者知识库,第5张   

基於MVC4+EasyUI的Web開發框架經驗總結(7) -开发者知识库,第6张

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

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

基於MVC4+EasyUI的Web開發框架經驗總結(7) -开发者知识库,第7张

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

 

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

基於MVC4 EasyUI的Web開發框架形成之旅--總體介紹

基於MVC4 EasyUI的Web開發框架形成之旅--MVC控制器的設計

基於MVC4 EasyUI的Web開發框架形成之旅--界面控件的使用

基於MVC4 EasyUI的Web開發框架形成之旅--附件上傳組件uploadify的使用

基於MVC4 EasyUI的Web開發框架形成之旅--框架總體界面介紹

基於MVC4 EasyUI的Web開發框架形成之旅--基類控制器CRUD的操作

基於MVC4 EasyUI的Web開發框架形成之旅--權限控制

基於MVC4 EasyUI的Web開發框架經驗總結(1)-利用jQuery Tags Input 插件顯示選擇記錄

基於MVC4 EasyUI的Web開發框架經驗總結(2)- 使用EasyUI的樹控件構建Web界面

基於MVC4 EasyUI的Web開發框架經驗總結(3)- 使用Json實體類構建菜單數據

基於MVC4 EasyUI的Web開發框架經驗總結(4)--使用圖表控件Highcharts

基於MVC4 EasyUI的Web開發框架經驗總結(5)--使用HTML編輯控件CKEditor和CKFinder

基於MVC4 EasyUI的Web開發框架經驗總結(6)--在頁面中應用下拉列表的處理

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

基於MVC4 EasyUI的Web開發框架經驗總結(8)--實現Office文檔的預覽

基於MVC4 EasyUI的Web開發框架經驗總結(9)--在Datagrid里面實現外鍵字段的轉義操作

基於MVC4 EasyUI的Web開發框架經驗總結(10)--在Web界面上實現數據的導入和導出

基於MVC4 EasyUI的Web開發框架經驗總結(11)--使用Bundles處理簡化頁面代碼

基於MVC4 EasyUI的Web開發框架經驗總結(12)--利用Jquery處理數據交互的幾種方式

基於MVC4 EasyUI的Web開發框架經驗總結(13)--DataGrid控件實現自動適應寬帶高度

基於MVC4 EasyUI的Web開發框架經驗總結(14)--自動生成圖標樣式文件和圖標的選擇操作

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复