zoukankan      html  css  js  c++  java
  • MVC之联动学习

    一,数据库表设计

    CREATE TABLE [dbo].[HY_Province](
        [id] [INT] NOT NULL,
        [province] [NVARCHAR](50) NOT NULL,
     CONSTRAINT [PK_HY_Province] PRIMARY KEY CLUSTERED 
    (
        [id] ASC
    )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
    ) ON [PRIMARY]
    
    GO
    CREATE TABLE [dbo].[HY_City](
        [id] [INT] NOT NULL,
        [city] [NVARCHAR](50) NOT NULL,
        [provinceID] [INT] NOT NULL,
        [companyLevel] [INT] NULL,
     CONSTRAINT [PK_HY_City] PRIMARY KEY CLUSTERED 
    (
        [id] ASC
    )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
    ) ON [PRIMARY]
    
    GO

    二,代码获取数据

            /// <summary>
            /// 获取省份
            /// </summary>
            public JsonResult GetProvincelist()
            {
                return Json(db.HY_Province.ToList(), JsonRequestBehavior.AllowGet);
            }
            /// <summary>
            /// 获取城市
            /// </summary>
            /// <param name="pid"></param>
            /// <returns></returns>
            public JsonResult GetCitylist(int pid)
            {
                var list = db.HY_City.Where(c => c.provinceID == pid).ToList();
                List<SelectListItem> item = new List<SelectListItem>();
                foreach (var City in list)
                {
                    item.Add(new SelectListItem { Text = City.city, Value = City.id.ToString() });
                }
                return Json(item, JsonRequestBehavior.AllowGet);
            }

    三,使用前段JS进行异步获取数据

    <script type="text/javascript">
        $(function () {
            GetProvince(); //加载省份
            $("#ProvinceId").change(function () {
                GetCity();
            });
        });
        function GetProvince() {
            $.getJSON(
                "/Register/GetProvincelist",
                function (data) {
                    $.each(data, function (i, item) {
                        alert(i);
                        alert(item);
                        $("<option></option>").val(item["id"]).text(item["province"]).appendTo($("#ProvinceId"));
                    })
                });
                        GetCity();
        }
        function GetCity() {
            $("#CityId").empty();
            $.getJSON(
                "/Register/GetCitylist",
                { pid: $("#ProvinceId").val() },
                function (data) {
                    $.each(data, function (i, item) {
                        $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#CityId"));
    
                    })
                });
        }
    </script>

    四,视图页面设计

    <select id="ProvinceId" name="ProvinceId">
    </select>
    <select id = "CityId" name="CityId">
    </select>
  • 相关阅读:
    浏览器行为:Form表单提交
    js中new到底做了什么?如何重写new?
    vue与react对比
    关于css中touch-action属性 在移动端开发中遇到的问题
    国际化:node导语言包
    django 开发忘记密码通过邮箱找回功能
    django 通过ajax完成邮箱用户注册、激活账号
    django 通过ajax完成登录
    django 通过邮箱和用户名都能登录
    django引入模板时,部分css文件渲染不成功失灵引入不成功
  • 原文地址:https://www.cnblogs.com/May-day/p/5888351.html
Copyright © 2011-2022 走看看