MVC 三级联动

本篇实现中国省市区三级联动,先看最终效果:

初始状态:

MVC 三级联动

当选择第1个Select,第2、3个Select可供选择: 

MVC 三级联动

当选择第2个Select,第1个不变、第3个Select可供选择:

MVC 三级联动 

当选择第3个Select,第1、2个不变:

MVC 三级联动

下面是代码:

控制器Controllers\HomeController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using 省市区__三级联动.Models;



namespace 省市区__三级联动.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

        [HttpGet] //刚开始加载页面的时候

        public ActionResult Index()

        {

            //省份  根据编号0001查的就是省份

          

            List<ChinaStates> listsheng = new ChinaDA().SelectBysheng("0001");

            ViewBag.shengs = new SelectList(listsheng, "AreaCode", "AreaName");





       

            List<ChinaStates> listshi = new ChinaDA().SelectByshi("11");

            ViewBag.shis = new SelectList(listshi, "AreaCode", "AreaName");



           

            List<ChinaStates> listqu = new ChinaDA().SelectByqu("1101");

            ViewBag.qus = new SelectList(listqu, "AreaCode", "AreaName");





            return View();

        }

        [HttpPost]  

        public ActionResult Index(string sheng, string shi, string qu)

        {

            

            List<ChinaStates> listsheng = new ChinaDA().SelectBysheng("0001");

            ViewBag.shengs = new SelectList(listsheng, "AreaCode", "AreaName",sheng);



            List<ChinaStates> listshi = new ChinaDA().SelectByshi(sheng);

            ViewBag.shis = new SelectList(listshi, "AreaCode", "AreaName",shi);



            var b = listshi.Exists(P => P.AreaCode == shi) ? shi : listshi[0].AreaCode;

            List<ChinaStates> listqu = new ChinaDA().SelectByqu(b);

            ViewBag.qus = new SelectList(listqu, "AreaCode", "AreaName");

           

            return View();

        }



    }

}

  模型:

首先要用linq连接数据库 然后建一个类开始写方法

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;



namespace 省市区__三级联动.Models

{

    public class ChinaDA

    {

        private ChinaDataContext _Context = new ChinaDataContext();

        public List<ChinaStates> Select()

        {

            return _Context.ChinaStates.ToList();

        }

        public List<ChinaStates> SelectBysheng(string AreaCode)

        {

            var query = _Context.ChinaStates.Where(p => p.ParentAreaCode == AreaCode);

            return query.ToList();

           

        }

        public List<ChinaStates> SelectByshi(string AreaCode)

        {

            var query = _Context.ChinaStates.Where(p => p.ParentAreaCode == AreaCode);

            return query.ToList();

        }

        public List<ChinaStates> SelectByqu(string AreaCode)

        {

            var query = _Context.ChinaStates.Where(p => p.ParentAreaCode == AreaCode);

            return query.ToList();

        }

    }

}

  视图:

@using 省市区__三级联动.Models

@{

    Layout = null;

}



<!DOCTYPE html>



<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

</head>

<body>

    @using (Html.BeginForm("Index", "Home", FormMethod.Post))

        {

    <div>

            @Html.DropDownList("sheng",ViewBag.shengs as SelectList,new { onchange="document.forms[0].submit();"})

            @Html.DropDownList("shi",ViewBag.shis as SelectList, new { onchange="document.forms[0].submit();"})

            @Html.DropDownList("qu",ViewBag.qus as SelectList)

       

    </div>

        }

</body>

</html>

  

 

你可能感兴趣的:(三级联动)