使用mvc+ef从数据库中读取树形菜单自己写的小例子

最新推荐文章于 2023-07-12 12:21:07 发布

原创最新推荐文章于 2023-07-12 12:21:07 发布 · 983 阅读

0 ·

CC 4.0 BY-SA版权

MVC 专栏收录该内容

4 篇文章

订阅专栏

本文提供了一个使用Mvc和Entity Framework（Ef）从数据库读取并构建树形菜单的简单示例。主要涉及TB_MenuList类的定义，包含ID、Title、ParentID等属性，以及TB_MenuListDBContext作为DbContext子类的数据访问层。

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

Models页面代码：

public class TB_MenuList
    {
        /// <summary>
        /// 主键
        /// </summary>
        public int ID { get; set; }
        /// <summary>
        /// 菜单标题
        /// </summary>
        public string Title { get; set; }
        /// <summary>
        /// 菜单英文标题（备用）
        /// </summary>
        public string Title_Eng { get; set; }
        /// <summary>
        /// 用户可见权限(0代表无需无权限)
        /// </summary>
        public int DisplayPermission { get; set; }
        /// <summary>
        /// 父级ID(用来保存上一节点ID，0代表顶级)
        /// </summary>
        public int ParentID { get; set; }
        /// <summary>
        /// 菜单链接地址
        /// </summary>
        public string URL { get; set; }
        /// <summary>
        /// 是否在新页面打开
        /// </summary>
        public int IsNewPage { get; set; }

    }

    public class TB_MenuListDBContext : DbContext 
    {
        public DbSet<TB_MenuList> TB_MenuList { get; set; } 
    }

controllers页面：

private TB_MenuListDBContext db = new TB_MenuListDBContext();

        //
        // GET: /TB_MenuList/

        public ActionResult Index()
        {
            return View(db.TB_MenuList.ToList());
        }


        //
        // GET: /TB_MenuList/Details/5

        public ActionResult Details(int id = 0)
        {
            TB_MenuList tb_menulist = db.TB_MenuList.Find(id);
            if (tb_menulist == null)
            {
                return HttpNotFound();
            }
            return View(tb_menulist);
        }

        //
        // GET: /TB_MenuList/Create

        public ActionResult Create()
        {
            return View();
        }

        //
        // POST: /TB_MenuList/Create

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(TB_MenuList tb_menulist)
        {
            if (ModelState.IsValid)
            {
                db.TB_MenuList.Add(tb_menulist);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(tb_menulist);
        }

        //
        // GET: /TB_MenuList/Edit/5

        public ActionResult Edit(int id = 0)
        {
            TB_MenuList tb_menulist = db.TB_MenuList.Find(id);
            if (tb_menulist == null)
            {
                return HttpNotFound();
            }
            return View(tb_menulist);
        }

        //
        // POST: /TB_MenuList/Edit/5

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(TB_MenuList tb_menulist)
        {
            if (ModelState.IsValid)
            {
                db.Entry(tb_menulist).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(tb_menulist);
        }

        //
        // GET: /TB_MenuList/Delete/5

        public ActionResult Delete(int id = 0)
        {
            TB_MenuList tb_menulist = db.TB_MenuList.Find(id);
            if (tb_menulist == null)
            {
                return HttpNotFound();
            }
            return View(tb_menulist);
        }

        //
        // POST: /TB_MenuList/Delete/5

        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            TB_MenuList tb_menulist = db.TB_MenuList.Find(id);
            db.TB_MenuList.Remove(tb_menulist);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }

        /// <summary>
        /// 页面左侧部分的树节点，使用ajax
        /// </summary>
        /// <param name="ParentID"></param>
        /// <returns></returns>
        public ActionResult GetMenuListByParentID(int ParentID)
        {
            var tb_menulist = from m in db.TB_MenuList select m;
            tb_menulist = tb_menulist.Where(s => s.ParentID.Equals(ParentID));
            return PartialView("Partial_GetMenuListByParentID", tb_menulist);
        }

        /// <summary>
        /// 页面的左侧部分
        /// </summary>
        /// <returns></returns>
        public ActionResult Layout_Index()
        {
            var tb_menulist = from m in db.TB_MenuList select m;
            tb_menulist = tb_menulist.Where(s => s.ParentID.Equals(0));
            return View(tb_menulist);
        }

        /// <summary>
        /// 页面的首页
        /// </summary>
        /// <returns></returns>
        public ActionResult Default()
        {
            
            return View();
        }

        /// <summary>
        /// 页面的顶部页面
        /// </summary>
        /// <returns></returns>
        public ActionResult Top()
        {
            ViewBag.Name = User.Identity.Name;
            return View();
        }

Default.cshtml页面代码（注：由于frameset不能应用在body标签之间，使用必须加Layout = null;此代码，并且再次页面不能出现别的html标签，如div标签等，没有一一实验，这也是导致mvc无法显示frameset的原因）：

@{
    Layout = null;
}
<frameset border="0" framespacing="0" frameborder="0" rows="60,*">
    <frame name="top" marginwidth=0 marginheight=0 src="@Url.Action("Top")" frameborder=0 noresize scrolling=none target="main">
        <frameset border="0" framespacing="0" frameborder="0" cols="200,*">
            <frame name="left" marginwidth=0 marginheight=0 src="@Url.Action("Layout_Index")" frameborder=0 noresize scrolling=none target="main">
            <frame name="main" marginwidth=0 marginheight=0 src="#" frameborder=0 noresize scrolling=yes>
        </frameset>
</frameset>

Layout_Index.cshtml页面代码（使用ajax读取点击的标签下的叶节点）：

@model IEnumerable<WebCenter.Models.TB_MenuList>

<script type="text/javascript">
    function GetChildTree(HtmlID, id) {
        $.ajax({
            type:"POST",
            url:'@Url.Action("GetMenuListByParentID")',
            data:{ParentID:id},
            datatype:"html",
            success:function(data){
                $("#Expand" + id).html(data);
                $("#Expand" + id).slideDown(500);
            },
            error: function () {

                    alert("处理失败!");

                }
        });
    }

    function ExpandAndFold(HtmlID,id) {

        var isDisplay = $("#Expand" + HtmlID).css("display");
        if (isDisplay == "none") {
            GetChildTree(HtmlID,id)
        }
        else {

            $("#Expand" + HtmlID).slideUp(500);
        }
    }

</script>

@{int i=0;
    foreach (var item in Model) {
     i++;
<div class="MenuItem">
    <ul><li class="MenuItemTitle" onclick="ExpandAndFold(@i,@item.ID)">@item.Title</li></ul>
    <div class="Expand" id="Expand@(i)">

    </div>
</div>
}
}

Partial_GetMenuListByParentID.cshtml页面代码（由于是需要查找叶子节点，使用使用的是创建部分视图，网上说部分视图一般放在views的shared文件夹中，所以我也就创建在了那里，步骤：右键shared-添加-视图-输入名字并勾选创建部分视图-确定，此处的名字和GetMenuListByParentID方法的中返回的PartialView方法中的第一个参数名字相同）：

@model IEnumerable<WebCenter.Models.TB_MenuList>

<ul>
    @foreach(var item in Model)
    {
        <li><a target="main" href="@(item.URL)">@item.Title</a></li>
    }
</ul>