MUI 省市区三级联动

/// <summary>
    /// 城市选择器数据
    /// </summary>
    public class CitySelector
    {
        public List<ProvinceBaseData> datas { get; set; }
    }
 /// <summary>
    /// 省份数据
    /// </summary>
    public class ProvinceBaseData
    {
        /// <summary>
        /// 城市名称
        /// </summary>
        public string text { get; set; }

        /// <summary>
        /// 城市编码
        /// </summary>
        public string value { get; set; }

        /// <summary>
        /// 区县列表
        /// </summary>
        public List<CityBaseData> children { get; set; }
    }public class CityBaseData
    {
        /// <summary>
        /// 城市名称
        /// </summary>
        public string text { get; set; }

        /// <summary>
        /// 城市编码
        /// </summary>
        public string value { get; set; }

        /// <summary>
        /// 区县列表
        /// </summary>
        public List<AreaBaseData> children { get; set; }
    }
  public class AreaBaseData
    {
        /// <summary>
        /// 区县名称
        /// </summary>
        public string text { get; set; }

        /// <summary>
        /// 区县编码
        /// </summary>
        public string value { get; set; }
    }

 /// <summary>
        /// 创建城市选择器
        /// </summary>
        /// <returns></returns>
        public CitySelector CreateCitySelector()
        {
            string cacheName = "city-selector-base-data";
            var baseData = SissCloud.Framework.Mvc.Caching.CacheHelper.Get<CitySelector>(cacheName);
if (baseData == null)
            {
                var provincedata = new List<ProvinceBaseData>();
                var provinces = _adService.GetList(a => a.ad_plevel == "0").ToList();
                provinces.ForEach(a =>
                {
                    var province = new ProvinceBaseData();
                    province.text = a.ad_name;
                    province.value = a.ad_no;
 var citys = _adService.GetList(b => b.ad_plevel == a.ad_no).ToList();
                    var pcitys = new List<CityBaseData>();
                    citys.ForEach(c =>
                    {
                        var city = new CityBaseData();
                        city.text = c.ad_name;
                        city.value = c.ad_no;
var areas = _adService.GetList(d => d.ad_plevel == c.ad_no).ToList();
                        var pareas = new List<AreaBaseData>();
                        areas.ForEach(e =>
                        {
                            var area = new AreaBaseData();
                            area.text = e.ad_name;
                            area.value = e.ad_no;
                            pareas.Add(area);
                        });
 city.children = pareas;
                        pcitys.Add(city);
                    });
                    province.children = pcitys;
                    provincedata.Add(province);
                });
                baseData = new CitySelector()
 {
                     datas = provincedata
                 };
                SissCloud.Framework.Mvc.Caching.CacheHelper.Add<CitySelector>(cacheName, baseData, 60 * 24);
            }
            return baseData;
        }

[HttpPost]
        public ActionResult GetCitySelector()
        {
            _result.success = true;
            _result.data = CreateCitySelector();
            return Json(_result, JsonRequestBehavior.DenyGet);
        }

@{
    ViewBag.SubTitle = "添加收货信息";
}
@section header{
    <link href="~/Content/MUI/css/mui.picker.min.css" rel="stylesheet" />
    <style type="text/css">
        .si-event-submit {
            font-size: 14px;
            color: #333333;
        }

        .submit-div {
            height: 40px;
            line-height: 40px;
            margin-top: 10px;
        }

        input {
            color: #999999;
            font-size: 16px;
        }

        .no-address {
            color: #999999;
            font-size: 14px;
            padding: 5px 10px;
        }
    </style>
}
<form class="mui-content mui-input-group" method="post" action="/Store/User/AddAddress" data-am-validator autocomplete="off">
    <div class="mui-input-row">
        <label class="">联系人</label>
        <input id="si-name" name="orderman" type="text" class="mui-input-clear" placeholder="联系人姓名" />
    </div>
    <div class="mui-input-row">
        <label class="">手机号码</label>
        <input id="si-tel" name="ordertel" type="text" class="mui-input-clear" placeholder="11位手机号码" />
    </div>
    @if (ViewBag.isNeedIdCard)
    {
        <div class="mui-input-row">
            <label class="">身份证</label>
            <input id="si-idcard" name="idcard_receiver" type="text" placeholder="身份证号码" pattern="(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)" class="mui-input-clear" />
        </div>
    }
    <div class="mui-input-row">
        <label class="">省份</label>
        <input id="provice" name="provice" type="text" class="mui-input-clear" placeholder="省份" readonly />
    </div>
    <div class="mui-input-row">
        <label class="">城市</label>
        <input id="city" name="city" type="text" class="mui-input-clear" placeholder="城市" readonly />
    </div>
    <div class="mui-input-row">
        <label class="">区/县</label>
        <input id="area" name="area" type="text" class="mui-input-clear" placeholder="区县" readonly />
    </div>
    <div class="mui-input-row">
        <label class=""> 地址</label>
        <input id="si-address" name="address" type="text" placeholder="XX镇YY街ZZ号" class="mui-input-clear" />

    </div>
    @*<div class="si-position-relative">

            <a class=" si-position-absolute si-right-top si-event-gotogetlocation si-hide">地图选址</a>
        </div>*@
    <div class="mui-input-row">
        <label class="">坐标</label>
        <input id="si-point" name="point" type="text" class="mui-input-clear" placeholder="点击选取坐标，用于计算门店距离（可选）" readonly />

    </div>
    <input name="longitude" hidden />
    <input name="latitude" hidden />
    <div class="mui-row si-font-align-center submit-div">
        <button class="si-event-submit" data-needidcrad="@(ViewBag.isNeedIdCard==true?1:0)">提交</button>
    </div>
    <div class="mui-row  no-address">没有找到您的地址？请联系门店</div>
</form>


<script src="~/Scripts/jquery.form.js"></script>
<script type="text/javascript">
    var addAddress = new AddAddress()
    addAddress.Ini()
    addAddress.BindEvent()
</script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7ePbrGSj4Roj3WRCsD6cymWm"></script>

<script src="~/Content/MUI/js/mui.picker.min.js"></script>

var AddAddress = function () {
    var obj = {
    }
    var isfromconfirmorder = Utils.GetUrlParms()['isfromconfirmorder'] || null

    function SetLngAndLat(lng, lat) {
        if (lng && lat) {
            $('input[name=point]').val('已选定坐标，可点击修改')
            $('input[name=longitude]').val(lng)
            $('input[name=latitude]').val(lat)
        } else {
            $('input[name=point]').val('')
            $('input[name=longitude]').val('')
            $('input[name=latitude]').val('')
        }
    }

    //省市区联动
    function GetCitySelector() {
        $.ajax({
            type: 'post',
            url: '/Store/User/GetCitySelector',
            data: {},
            dataType: 'json',
            success: function (data) {
                console.log(data);
                var picker = new mui.PopPicker({
                    layer: 3
                });
                picker.setData(data.data.datas)
                picker.pickers[0].setSelectedIndex(0);
                picker.pickers[1].setSelectedIndex(0);
                picker.pickers[2].setSelectedIndex(0);
                picker.show(function (SelectedItem) {
                    console.log(SelectedItem);
                    $('#provice').val(SelectedItem[0].text).data('province-no', SelectedItem[0].value).data('level', 0);
                    $('#city').val(SelectedItem[1].text).data('city-no', SelectedItem[1].value).data('level', 1);
                    $('#area').val(SelectedItem[2].text).data('area-no', SelectedItem[2].value).data('level', 2);
                })
            }
        });
    }

    function checkMobile(str) {
        var re = /^1\d{10}$/
        if (re.test(str)) {
            return true;
        } else {
            return false;
        }
    }

    function isCardID(sId) {
        var aCity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" }
        var iSum = 0;
        var info = "";
        if (!/^\d{17}(\d|x)$/i.test(sId))
            return "你输入的身份证长度或格式错误";
        sId = sId.replace(/x$/i, "a");
        if (aCity[parseInt(sId.substr(0, 2))] == null)
            return "你的身份证地区非法";
        sBirthday = sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2));
        var d = new Date(sBirthday.replace(/-/g, "/"));
        if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate()))
            return "身份证上的出生日期非法";
        for (var i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11);
        if (iSum % 11 != 1)
            return "你输入的身份证号非法";
        //aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女");//此次还可以判断出输入的身份证号的人性别
        return true;
    }
    function checkIdCard(str) {
        var re = "^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$";
        if (re.test(str)) {
            return true;
        } else {
            return false;
        }
    }
    obj.Ini = function () {
        $('#provice').on('click', function () {
            GetCitySelector();
        });
        $('#city').on('click', function () {
            GetCitySelector();
        });
        $('#area').on('click', function () {
            GetCitySelector();
        });
        if (App.IsHistoryBack) {
            $('input[name=orderman]').val(history.state.orderman)
            $('input[name=ordertel]').val(history.state.ordertel)
            $('input[name=idcard_receiver]').val(history.state.idcard_receiver)
            $('#provice').val(history.state.provice)
            $('#provice').data('province-no', history.state.proviceno)
            $('#city').val(history.state.city)
            $('#city').data('city-no', history.state.cityno)
            $('#area').val(history.state.area)
            $('#area').data('area-no', history.state.areano)
            $('input[name=address]').val(history.state.address)
            if (Models.AddressTemp.Lng()) {
                SetLngAndLat(Models.AddressTemp.Lng(), Models.AddressTemp.Lat())
            } else {
                var lng = history.state.lng
                var lat = history.state.lat
                SetLngAndLat(lng, lat)
            }
        }
        else {
            var params = Utils.GetUrlParms(window.location.href);
            if (typeof (params['provice']) != 'undefined') { //iphone情况下需要从URL取数据
                SetLngAndLat(params['lng'], params['lat'])
                $('input[name=orderman]').val(params['orderman'])
                $('input[name=ordertel]').val(params['ordertel'])
                $('input[name=idcard_receiver]').val(params['idcard_receiver'])
                $('#provice').val(params['provice'])
                $('#provice').data('province-no', params['proviceno'])
                $('#city').val(params['city'])
                $('#city').data('city-no', params['cityno'])
                $('#area').val(params['area'])
                $('#area').data('area-no', params['areano'])
                $('input[name=address]').val(history.state.address)
                $('input[name=address]').val(params['detailaddress'])
            }
        }
    }
    obj.BindEvent = function () {
        $('input[name=address]').on('input', function () {
            SetLngAndLat(null, null)
        })

        $('#si-point').click(function (e) {
            var orderman = $('input[name=orderman]').val()
            var ordertel = $('input[name=ordertel]').val()
            var idcard_receiver = $('input[name=idcard_receiver]').val()
            var provice = $('#provice').val();
            var proviceno = $('#provice').data('province-no');
            var city = $('#city').val();
            var cityno = $('#city').data('city-no');
            var area = $('#area').val();
            var areano = $('#area').data('area-no');
            var address = $('input[name=address]').val()
            var lng = $('input[name=longitude]').val()
            var lat = $('input[name=latitude]').val()
            var Params = {}

            App.SetHistoryState('orderman', orderman)
            App.SetHistoryState('ordertel', ordertel)
            App.SetHistoryState('idcard_receiver', idcard_receiver)
            App.SetHistoryState('provice', provice)
            App.SetHistoryState('city', city)
            App.SetHistoryState('area', area)
            App.SetHistoryState('proviceno', proviceno)
            App.SetHistoryState('cityno', cityno)
            App.SetHistoryState('areano', areano)
            App.SetHistoryState('address', address)
            App.SetHistoryState('lng', lng)
            App.SetHistoryState('lat', lat)
            var url = '/Store/User/GetLocation'
            if (lng && lat) {
                url = Utils.AddUrlParm(url, 'lng', lng)
                url = Utils.AddUrlParm(url, 'lat', lat)
            } else {
                var addressall = $('#provice').val()
                var cityName = $('#city').val()
                addressall += cityName == '市辖区' || cityName == '县' || cityName == '省直辖县级行政区划' ? '' : cityName
                var areaName = $('#area').val()
                addressall += areaName
                addressall += address
                url = Utils.AddUrlParm(url, 'addressall', addressall)
            }

            $(this).blur()
            window.location.href = url
        })

        $('.si-event-gotogetlocation').click(function () {
            $('#si-point').click()
        })
        $('.si-event-submit').click(function (e) {
            var $btn = $(this);
            var needidcrad = $btn.data('needidcrad');
            $btn.addClass('mui-disabled');
            e.preventDefault();
            var ordername = $('#si-name').val();
            if (ordername.trim().length == 0) {
                mui.alert('联系人姓名不能为空！');
                return;
            }
            var ordertel = $('#si-tel').val();
            if (ordertel.trim().length != 11) {
                mui.alert('请输入11位手机号码，不能含有空格');
                return;
            }
            if (!checkMobile(ordertel.trim())) {
                mui.alert('手机号码格式不正确');
                return;
            }
            if (needidcrad == '1') {
                var idcrad = $("#si-idcard");
                var cardnum = idcrad.val();
                if (isCardID(cardnum) != true) {
                    mui.alert(isCardID(cardnum));
                    return;
                }
            }
            if ($('#provice').val().trim().length == 0) {
                mui.alert('请选择省份');
                return;
            }
            if ($('#city').val().trim().length == 0) {
                mui.alert('请选择城市');
                return;
            }
            if ($('#area').val().trim().length == 0) {
                mui.alert('请选择区县');
                return;
            }
            var provice = $('#provice').data('province-no');
            var city = $('#city').data('city-no');
            var area = $('#area').data('area-no');
            var address = $('input[name=address]').val()
            var lng = $('input[name=longitude]').val()
            var lat = $('input[name=latitude]').val()
            $.ajax({
                type: 'post',
                url: '/Store/User/AddAddress',
                data: {
                    ordername: ordername, ordertel: ordertel, idcardnum: $("#si-idcard").val(), provinceno: provice, cityno: city, areano: area, lng: lng, lat: lat
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (data.success) {
                        if (isfromconfirmorder) {
                            history.back()
                        }
                        else {
                            window.location.href = '/Store/User/AddressList?shopid=' + Models.Shop.ShopId()
                        }
                    } else {
                        mui.alert("保存失败，因为" + data.message)
                    }

                }, error: function () {
                    mui.alert("无法连接服务器，请稍后再试")
                },
                complete: function () {
                    $btn.removeClass('am-disabled')
                }
            });
        })
    }
    return obj
}