首页 > 代码库 > Asp.net MVC4 下二级联动

Asp.net MVC4 下二级联动

2024-07-10 20:37:18   224人阅读

效果图：

主要文件有Index.cshtml ,ErJLDController.cs ，还有数据库文件 。

1、首先在数据库中创建省级、城市的表，我的表如下：我用了一张表放下了省级、城市的数据，用level划分省份和城市，parentId表示该城市所在省份的id

 1 namespace Mvcproject.Controllers 2 { 3     //二级联动 4     public class ErJLDController : Controller 5     { 6  7         ZjbEntities db = new ZjbEntities(); 8         // 9         // GET: /Test/10         11         public ActionResult Index()12         {13             //pro_city province=new pro_city();14             15             return View();16         }17 18         public JsonResult getProvince() {19             20             List<pro_city> provinceList = (from p in db.pro_city where p.level == 1 select p).ToList();21   22 23             JsonResult Jprovince = new JsonResult();24             Jprovince.Data = http://www.mamicode.com/provinceList;>25             Jprovince.JsonRequestBehavior = JsonRequestBehavior.AllowGet;26             return Jprovince;27 28         }29 30         public JsonResult getCity(string pName)31         {32 33             //string pid = (from p in db.pro_city where p.areaValue =http://www.mamicode.com/= pName select p.id).ToString();>34             //int id = int.Parse(pid);35             int id = int.Parse(pName);36 37             List<pro_city> cityList = (from p in db.pro_city where p.parentId == id select p).ToList();38   39             JsonResult Jcity = new JsonResult();40             Jcity.Data = http://www.mamicode.com/cityList;>41             Jcity.JsonRequestBehavior = JsonRequestBehavior.AllowGet;42             return Jcity;43 44         }45        46     }47 }
ErJLDController.cs
 1 <body> 2     <div> 3         <select id="provinceId" > 4          <option> 请选择省份</option> 5         </select> 6         <select id="cityId"> 7             <option>请选择市区</option> 8         </select> 9     </div>10 11     <script type="text/javascript">12     13         14 15         //用json从数据库里取一级列表的参数16         $(function () {17 18             $.getJSON("ErJLD/getProvince/", function (obj) {19                 $.each(obj, function (i, p) {20                     $("#provinceId").append("<option value=http://www.mamicode.com/‘"+p.id+"‘>" + p.areaValue + "</option>");21                 });22 23                 $("#provinceId").change(function () {24                     //用attr（）方法获取当前选择的option的value值（即p.id ,数据库里的id值，25                     //虽然在TestController中的getCity方法中传入的是string类型的形参，但是后来需要变换成int类型, 所以value值应该为数字）26                     var pName = $("#provinceId").attr("value");27                     $.getJSON("ErJLD/getCity?pName=" + pName, getcity);28                 });29             });30         });31            32       33         34 35         function getcity(obj) {         36             $("#cityId").empty();37                         $.each(obj, function (m, v) {38                             $("#cityId").append("<option >" + v.areaValue + "</option>");39                         });40        41                     };42                43               44             45 46     </script>47 </body>
Index.cshtml

 


联系
我们