关于省市联动的一点当心得

省市联动，以前个人玩法是每个select变更，都发请求到后台进行处理，后台将json发回前台，前台进行后面两层或者一层的数据填充，后来发现这样玩效率实在太太低下，（我写的也不太好，会形成一些无用的请求）一开始原本还好啦，但是后来咱们增长了一个功能，根据用户所存在系统里得地址信息来填充用户信息，世界一会儿就很差了。咱们要将省、市、县三条信息。写入每一条信息后面的信息都会联动。那么我所遇到的问题就很麻烦了

第一步：写入省份信息——触发事件，清空城市信息——城市选择框触发change事件，向后台请求city=null的区县信息。城市信息填充完毕触发事件——请求city=city的区县信息。区县信息填充。

这一连串的请求下来速度很慢，用户体验不好，并且要作成同步的，若是是异步的会形成不少匪夷所思的问题。到后来实在难以用这种方式进行下去了，因而咱们想到了让用户载入网页时把城市、区县的信息所有下载下来。省份信息由于后台可以填充，因此就无论他了。而咱们的省市区信息都是从接口调用的，为了保证数据的统一，我必须在后台构建缓存的时候重建js文件。

因而就在后台用Json.net构造了一个字典。（吐槽一下，.NET自带的序列化器太弱了。Dictionary<string,IEnumerable<Place>>这样的对象就没法序列化了）城市的key用省份的ID，区县的key用城市的ID。这样玩我以为是比较好的，不知道有没有更巧妙的作法。而后后台构造数据的时候，序列化完之后记得要加个东西：在头上，加一个var cities=   在尾上加一个;  这样子就造出了一个js的字典对象咯。区县也同样。而后把两个js丢到一个文件里，前台在页面上加一个<script src="~/scripts/places.js"></script>结束。用起来效果很好的，速度很快。能够把引用放到body里，由于我在后台构造网页的时候填充了默认值因此不太容易出现读值的问题。

好吧，这篇博文省略了不少细节，主要观点就是，在省市联动的时候，最好将填充的数据作成一个独立的js文件来处理，尽可能不要有先后台交互，这样体验上会好不少（其实作起来也会方便不少，少不少代码量）。若是有什么须要了解的细节，能够联系我。留言就行了~嘿嘿