MVC单表二级联动

今天学了MVC中单表二级联动，使用一个表单对其进行分级别查询

一个是下拉框的二级联动

一个是树状图类型的二级联动，树状图二级联动如果需要，后续可以将联动换为a标签，进行进一步的升级

这是单表的内容

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Model
{
    public class DataModel
    {
        [Display(Name = "主键id")]
        public int tid { get; set; }
        [Display(Name = "城市所属/级别id")]
        public int pid { get; set; }
        [Display(Name = "名称")]
        public string tname { get; set; }
    }
}

 

先看一下树状图的二级联动，相对于下拉框的二级联动会简单一点

后台直接用ado接收数据库的值return将值传入视图

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using BLL;
using Model;
using Newtonsoft.Json;

namespace day.Views
{
    public class typeController : Controller
    {
        BLL1 bll = new BLL1();
        // GET: type
        public ActionResult Index()
        {
            List<DataModel> list = bll.bang();
            return View(list);
        }
    }
}

 

前台代码，使用ol和li还有ul进行分级效果

@{
    ViewBag.Title = "Index";
}
@using Model
@model List<DataModel>
<h2>二级联动</h2>
<ol>
    @foreach (DataModel item in Model.Where(m => m.pid == 0))
    {
        <li>
            @item.tname
            @foreach (DataModel it in Model.Where(m => m.pid == item.tid))
            {
                <ul>@it.tname</ul>
            }
        </li>
    }
</ol>

 里面添上数据运行效果就是一个侧边的树状图了，可以使用分布视图进行显示，类似母版页左侧树状图效果

接下来是下拉框的二级联动，具体思路是获取第一级别的下拉内容，当下拉框发生改变的时候进行第二个下拉列表的改变

使用是post方法请求，最后序列化json返回

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using BLL;
using Model;
using Newtonsoft.Json;

namespace day.Views
{
    public class typeController : Controller
    {
        BLL1 bll = new BLL1();
        // GET: type
        public ActionResult Index()
        {
            List<DataModel> list = bll.bang();
            list.Insert(0, new DataModel { tid = -1, tname = "请选择" });
            ViewBag.xia = new SelectList(list, "tid", "tname");
            List<DataModel> list1 = bll.bang();
            list1.Insert(0, new DataModel { tid = -1, tname = "请选择" });
            ViewBag.xia1 = new SelectList(list1, "tid", "tname");
            return View(list);
        }
        [HttpPost]
        public ActionResult lian(int pid)
        {
            List<DataModel> list1 = bll.bang();
            list1=list1.Where(m=>m.pid==pid).ToList();
            list1.Insert(0, new DataModel { tid = -1, tname = "请选择" });
            string json = JsonConvert.SerializeObject(list1);
            
            return Json(json);
        }
    }
}

前台使用ajax向后台传值，把所选的一级id传入后台，如果一级id中含有2级id就进行遍历，查询后的结果传回遍历，这是整个二级联动两个方法的思路

@{
    ViewBag.Title = "Index";
}
@using Model
@model List<DataModel>
<h2>二级联动</h2>
<select id="xia1" onchange="fun()">
    @foreach (var item in Model.Where(m => m.pid == 0))
    {
        <option value="@item.tid">@item.tname</option>
    }
</select>
<select id="xia2">
    <option value="-1">请选择</option>
</select>
<script>
    function fun() {
        $.ajax({
            url: "/type/lian",
            data: { pid: $("#xia1").val() },
            type: "post",
            success: function (d) {
                $("#xia2").empty();
                $(JSON.parse(d)).each(function () {
                  
                    var op = "<option value=" + this.tid + ">" + this.tname + "</option>";
                 
                    $("#xia2").append(op);
                })
            }
        })
    }
</script>

 最后的显示结果如下