C#　Mvc下拉列表框三级联动

最新推荐文章于 2025-07-08 20:16:57 发布

原创最新推荐文章于 2025-07-08 20:16:57 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#C# #Mvc #三级联动

代码专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用Ajax实现的省份、城市及地区的三级联动选择器。通过前后端交互，根据用户选择的省份动态加载对应的城市，并进一步加载所属地区。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先声明,本人语言表达能力并不是很好,所以呢,以代码为主

<script>
        //获取城市
        function XiaCity(id)
        {
        //判断省份是否有id
            if(id==null)
            {
                $("#provinceName").empty().append("<option>请选择省份</option>");
                $("#cityName").empty().append("<option>请选择城市</option>");
                return;
            }
            else
            {
                $("#cityName").empty().append("<option>请选择城市</option>");
            }
            $.ajax({
                url: "/User/TheCity/" + id,
                type: "post",
                success: function (data) {
                    $("#cityName").empty().append("<option>请选择城市</option>");
                    $(data).each(function () {
                        $("#cityName").append("<option value='" + this.Value + "'>" + this.Text+ "</option>")
                    })
                }

                })
        }
        //获取地区
        function XiaArea(id) {
            if (id == null) {
              
                $("#areaName").empty().append("<option>请选择城区</option>");
                return;
            }
           
            $.ajax({
                url: "/User/TheArea/" + id,
                type: "post",
                success: function (data) {
                    $(data).each(function () {
                        $("#AreaName").append("<option value='" + this.Value + "'>" + this.Text + "</option>")
                    })
                }

            })
        }
        function OKadd(data)
        {
            if(data>0)
            {
                alert("添加成功!");
            }
        }
        //预加载
        $(function () {
            $("#button1").click(function () {
                if ($("#from0").valid) {
                    $("#form0").ajaxSubmit({
                        type: "post",
                        url: "/User/Index/",
                        success: function (data) {
                            OKadd(data);
                        }
                    })
                }
            })
            
        })
 </script>

这里是用ajax调用后台控制器

<p>
     
     @Html.DropDownListFor(n => n.provinceName, ViewBag.Province as List<SelectListItem>, "请选择省份", new { @onchange = "XiaCity(this.value)" })
     @Html.DropDownListFor(n => n.cityName, new List<SelectListItem>(), "请选择城市", new { @onchange = "XiaArea(this.value)" })
     @Html.DropDownListFor(n => n.AreaName, new List<SelectListItem>(), "请选择城区")
     
</p>

这里使用强类型视图

//显示页面
public ActionResult Index()
           
        { 
            TheProvince();
            return View();
        }
//获取省份
public void TheProvince()
        {
            UserBLL bll = new UserBLL();
            DataTable dt = bll.GetProvince();
            var linq = from s in dt.AsEnumerable()
                       select new SelectListItem
                       {
                           Value = s.Field<string>("provinceId"),
                           Text = s.Field<string>("provinceName")
                       };
            ViewBag.Province = linq.ToList();
        }
//获取城市
public JsonResult TheCity(string id)
        {
            UserBLL bll = new UserBLL();
            DataTable dt = bll.GetCity(id);
            var linq = from s in dt.AsEnumerable()
                       select new SelectListItem
                       {
                           Value = s.Field<string>("cityId"),
                           Text = s.Field<string>("cityName")
                       };
            return Json(linq.ToList());
        }
//获取地区
public JsonResult TheArea(string id)
        {
            UserBLL bll = new UserBLL();
            DataTable dt = bll.GetArea(id);
            var linq = from s in dt.AsEnumerable()
                       select new SelectListItem
                       {
                           Value = s.Field<string>("AreaId"),
                           Text = s.Field<string>("areaName")
                       };
            return Json(linq.ToList());
        }

控制器中创建方法Index,TheProvince,TheCity,TheArea 获取省份不需要传参数,但是获取城市和地区需要传递参数,参数为他的父级Id,获取地区中的数据为Linq语句

///命名空间
namespace ZS.Test.Model
{
//地区
    public class Area
    {
        public string id{get;set;}
      public string AreaName{get;set;}
      public string AreaId{get;set;}
      public string father{get;set;}
    }
}
namespace ZS.Test.Model
{
//城市
    public class City
    {
        public string id{get;set;}
      public string cityName{get;set;}
      public string cityId{get;set;}
      public string father{get;set;}
    }
}
namespace ZS.Test.Model
{
//省份
    public class Province
    {
        public int id{get;set;}
      public string provinceName{get;set;}
      public string provinceId{get;set;}
    }
}

Model中的数据除省份没有父类Id,其他表中的数据例如Area中 father连接的是City中的Id
Mvc中页面显示的数据是强类型视图的,而上述Model是类库中的用于连接数据库,前台显示需要您自己手动敲一敲,最好把所有的字段都放在一个类中

为什么要发一个三级联动的代码,因为个人感觉自己敲过的代码过一段时间就会忘掉,所以发到csdn上也方便自己日后能回来看一下