Summary of Web Development Framework experience based on MVC4 + EasyUI (7)-linkage among provinces, cities, and administrative districts, and mvc4easyui

Summary of Web Development Framework experience based on MVC4 + EasyUI (7)-linkage among provinces, cities, and administrative districts, and mvc4easyui

In order to improve the customer experience and make some technical exploration, we are now preparing to make a Web version of my own CRM system, therefore, we will continue to conduct some research and Optimization on the MVC-based Web interface, and strive to maintain the same functionality and interface as Winform, this article mainly introduces the two effects of Chinese provinces, cities, and administrative districts used in my CRM system. It is no problem to implement it on Winform and implement EasyUI based on MVC on the Web, no problem.

1. Linkage between provinces, cities, and administrative regions on Winform

Very early on, I wrote an article on the Winform framework, "update the dictionary management module of the Winform development framework, the latest SQL script for administrative divisions in the latest counties and counties in China in 2013 is provided to introduce the effect of the three linkages in the Winform version. The interface is shown below.

The data script for the provinces, cities, and administrative districts of the country after I have compiled the data according to the data of the Bureau of Statistics. The latest SQL scripts for new policy districts in provinces, cities, and counties in China are as follows: http://files.cnblogs.com/wuhuacong/CityDistrict.rar

It mainly processes the Events Selected by the Control and dynamically obtains different data for display. The general logic is to initialize the provincial data first, then, when the province control is selected, it is triggered to obtain the city information of the province. When the city control is selected, it is triggered to obtain the administrative region data of the city. The approximate code is as follows.

        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. Interaction between provinces, cities, and administrative districts on the Web based on MVC + EasyUI

With the data of provinces, cities, and administrative districts in China, and the data access to the three fields is encapsulated, refer to the implementation process of Winform version, of course, implemented on EasyUI Web, yes.

Let's take a look at the implementation results, and then analyze the Implementation ideas and code. The implementation results based on MVC + EasyUI are as follows.

How is the above effect achieved?

1) define related controller functions and provide Json data sources

To bind controls to data, we need to define some controller functions for these controls to facilitate the acquisition of relevant data. CListItem has two attributes: Text and Value, which can be used for binding.

/// <Summary> /// obtain all provinces /// </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> /// obtain the corresponding city list based on the province name /// </summary> /// <param name = "provinceName"> province name </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> /// obtain the corresponding administrative region category based on the city name // </summary> /// <param name = "cityName"> city name </ 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) Add the JS Code for the control to bind data to the view.

To achieve the linkage effect of the three ComboBox controls, we need to use JS Code to bind data and bind the Change event of the control. Once one of them is selected, this may trigger another data source.

// BindProvinceCity () {var province = $ ('# Province '). combobox ({valueField: 'value', // Value Field textField: 'text', // the url of the displayed field: '/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', // Value Field textField: 'text', // The displayed field 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', // Value Field textField: 'text', // The displayed field editable: true });}

Then these controls need to be placed on the interface.

<Tr> <th> <label for = "Province"> Province: </label> </th> <td> <select class = "easyui-combobox" id = "Province" name = "Province" style = "width: 120px; "> </select> </td> <th> <label for =" City "> City: </label> </th> <td> <select class = "easyui-combobox" id = "City" name = "City" style = "width: 120px; "> </select> </td> </tr> <th> <label for =" District "> region: </label> </th> <td> <select class = "easyui-combobox" id = "District" name = "District" style = "width: 120px; "> </select> </td> <th> <label for =" Hometown "> nationality: </label> </th> <td> <select class = "easyui-combobox" id = "Hometown" name = "Hometown" style = "width: 120px; "> </select> </td> </tr>

OK. We have implemented data initialization and binding. Once the user selects the province data, the corresponding City Data list will be updated. When the city is selected, the administrative district will be updated, all of this seems to have been done?

No. You still need to consider assigning values to the data in the editing state. If there is already data in the object class information, will the data be displayed normally after the control is bound?

3) control content binding

In general, we use Ajax operations to obtain the Controller data and then bind it to the interface control, as shown below.

$. GetJSON ("/Contact/FindByID? Id = "+ ID, function (info) {// There are several ways to assign values :. 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 );
..................});}

If there is no linkage effect, this assignment operation is normal in general, but I found that using this method to operate the data of the city and administrative region is not normal, at the beginning, I was puzzled. I tested several operations and did not display the interface controls of the city or administrative district properly.

Originally, it was found that the cause of this problem may be that asynchronous operations are used, and their association effect has not been completed, so the value assignment operation is executed, and data may not be displayed properly.

Therefore, use the settings to synchronize. As shown in the red code below, setting async to false indicates synchronization. After the test, the interface control is displayed normally and everything is normal, finally, the problem was solved.

// Use the synchronization method to make the linked control display normally $. ajaxSettings. async = false; // first, the user sends an asynchronous request to the backend implementation method $. getJSON ("/Contact/FindByID? Id = "+ ID, function (info ){

The above is my interface effect and implementation code for the commonly used Web interactive operations on provinces, cities, and administrative regions throughout the country. I hope to provide you with a reference case to improve it together.

 

Which team is the strongest in Live 8?