Asp.net MVC4 下二级联动

效果图:

主要文件有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 = 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 == 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 = 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='"+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

 

你可能感兴趣的:(asp.net)