zoukankan html css js c++ java

MVC3+EF4.1学习系列(十)----MVC+EF处理树形结构

通过前几篇文章我们处理了一对一, 一对多,多对多关系很好的发挥了ORM框架的做用但是少说了一种树形结构的处理, 而这种树形关系我们也经常遇到,常见的N级类别的处理, 以及经常有数据与类别挂钩。今天主要写下EF处理树形结构以及 MVC如何展示树形结构。前面几篇的例子一直用的是一个例子,内容是连贯的。这篇是完全单独的~

先来说下工作中会遇到的常见场景针对这几个场景来处理~

1.类别

a.类别可以有无限级别

b.类别的最末端不确定是第几级某个节点可以到二级其他的节点有可能到四级

c.tree型展示整个类别并可以对tree进行CRUD （可以一次递归全部加载也可以异步加载）

d.面包屑型展示类别

e.删除父类应把下面所有的子类删除

2.与类别挂钩的数据（本文是文章）

a. 可以根据任意级别的类别查看文章

b. 合并两个类别的文章

上面这些场景基本覆盖了类别操作的常见情况如果大家觉得还有什么要处理可以给我说我补充上去~~

下面开始讲解~

一.准备工作

1.如何建立类别实体类来展示树形结构

上代码

 /// <summary>
    /// 类别
    /// </summary>
    public class Category
    {
        /// <summary>
        /// 主键
        /// </summary>
        public int CategoryId { get; set; }

        /// <summary>
        /// 类别名字
        /// </summary>
        [Required()]
        [StringLength(5)]
        public string CategoryName { get; set; }

        /// <summary>
        /// 父ID
        /// </summary>
        public Nullable<int> ParentId { get; set; }

        /// <summary>
        /// 上面的父节点
        /// </summary>
        public virtual Category Parent { get; set; }

        /// <summary>
        /// 下面的子节点
        /// </summary>
        [ForeignKey("ParentId")]
        public virtual ICollection<Category> ChildKeys { get; set; }

        /// <summary>
        /// 该类别的文章集合
        /// </summary>
        public virtual ICollection<Article> articleList { get; set; }

        /// <summary>
        /// 编号
        /// </summary>
        public string Note { get; set; }


        /// <summary>
        /// 状态
        /// </summary>
        public string State
        {
            get;
            set;
        }

        /// <summary>
        /// 级别
        /// </summary>
        public Nullable<int> Lev
        {
            get;
            set;
        }
        /// <summary>
        /// 排序
        /// </summary>
        public int Sort
        {
            get;
            set;
        }
    }

这样的设计很好的展示了树形结构一个节点有一个父类多个子类一个类别可以有多个文章这里说下后面的四个属性不是必要的~

2.文章实体类

上代码这个比较好理解不解释了~

文章实体类

3.建立Context

上代码

public class TreeDemoContext : DbContext
    {

        private readonly static string CONNECTION_STRING = "name=WlfSys_EFCF_ConnString";

        public DbSet<Category> Category { get; set; }
        public DbSet<Article> Article { get; set; }

        public TreeDemoContext()
            : base(CONNECTION_STRING)
        {
            // this.Configuration.ProxyCreationEnabled = false;
        }


        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();//移除复数表名的契约
        }
    }

这里不需要使用Fluent API 来映射实体类与数据库的关系里面也没什么亮点( 其实我一直想知道怎么用Fluent API 映射来解决下面的问题有知道的高人指点下~~ 感激 )

4.数据库初始化

这是我这种方法用ef处理树形结构最关键的一点熟练使用ef的人看了我上面的类别实体类的建立就会发现这是错误的因为这会造成自引用看下图生成的数据库表结构

由于自引用插入时会出现 INSERT 语句与 FOREIGN KEY SAME TABLE 约束"Category_ChildKeys"冲突。

我的解决办法是在初始化数据库时删除这个外键约束上代码

 public class TreeDemoInitializer : DropCreateDatabaseIfModelChanges<TreeDemoContext>
    {
        protected override void Seed(TreeDemoContext context)
        {
            //删除关联
            context.Database.ExecuteSqlCommand("ALTER TABLE [dbo].[Category] DROP CONSTRAINT [Category_ChildKeys]");


            //必须加上ID
            var Category = new List<Category>
            {
                  new Category{ CategoryId=1, CategoryName="亚洲", Lev=1, ParentId=0, Note="001",ChildKeys=new List<Category>{
                  new Category{CategoryId=2,CategoryName="中国",Lev=2,Note="00101",ChildKeys=new List<Category>{ new Category{CategoryId=6,  CategoryName="河南", Lev=3, Note="0010101" },new Category{CategoryId=7,  CategoryName="广州", Lev=3, Note="0010102" }    }},
                  new Category{CategoryId=3,CategoryName="日本",Lev=2,Note="00102",ChildKeys=new List<Category>{ new Category{CategoryId=8,  CategoryName="日本省1", Lev=3, Note="0010201" },new Category{CategoryId=9,  CategoryName="日本省2", Lev=3, Note="0010202" }  }
                } }
            },
                  new Category { CategoryId=4, CategoryName="欧洲", Lev=1, ParentId=0, Note="002", ChildKeys=new List<Category>{
                  new Category{CategoryId=5,CategoryName="荷兰",Lev=2,Note="00201"}
                } }
            
            };
            Category.ForEach(c => context.Category.Add(c));



            var Articles = new List<Article>{

                new Article{ ArticleName="小说13", CreateTime=DateTime.Now, CategoryId=5},
                new Article{ ArticleName="小说14", CreateTime=DateTime.Now, CategoryId=5},
                new Article{ ArticleName="小说15", CreateTime=DateTime.Now, CategoryId=5},
                new Article{ ArticleName="小说1", CreateTime=DateTime.Now, CategoryId=6},
                new Article{ ArticleName="小说2", CreateTime=DateTime.Now, CategoryId=6},
                new Article{ ArticleName="小说3", CreateTime=DateTime.Now, CategoryId=6},
                new Article{ ArticleName="小说4", CreateTime=DateTime.Now, CategoryId=7},
                new Article{ ArticleName="小说5", CreateTime=DateTime.Now, CategoryId=7},
                new Article{ ArticleName="小说6", CreateTime=DateTime.Now, CategoryId=7},
                new Article{ ArticleName="小说7", CreateTime=DateTime.Now, CategoryId=8},
                new Article{ ArticleName="小说8", CreateTime=DateTime.Now, CategoryId=8},
                new Article{ ArticleName="小说9", CreateTime=DateTime.Now, CategoryId=8},
                new Article{ ArticleName="小说10", CreateTime=DateTime.Now, CategoryId=9},
                new Article{ ArticleName="小说11", CreateTime=DateTime.Now, CategoryId=9},
                new Article{ ArticleName="小说12", CreateTime=DateTime.Now, CategoryId=9}
            
            };
            Articles.ForEach(a => context.Article.Add(a));

            context.SaveChanges();
        }
    }

并初始化一些数据进去这个初始化就算是类别的添加了在这添加时遇到个小问题我们的数据库类别ID默认是自增长的按理说不用指定主键ID 但是不指定ID 像我上面一下次插入多条时插入时却报错 ~~ 无法确定“ContosoUniversity.DAL.Category_ChildKeys”关系的主体端。添加的多个实体可能主键相同。指定了ID 才解决了这个问题

5. 搭建基本项目结构

依然使用 unit of work +Repository ( 项目大的话加入Iservice, Service 再加上IOC,这里只是个简单的demo) 如图

二.关于类别的操作以及展示

1.tree型展示整个类别

在webfrom时代实现tree展示很容易因为我们有犀利的控件 treeview 用treeview控件再加个递归绑定就很简单的完成了这是webfrom的好处但也是不好的地方比如 treeview生成出来的是 table 嵌套table的我如果想换成ul li怎么办控件开发造成了耦合度过高题外话说多了回归正题~

这里我用两种方法实现 treeview的展示

A方法扩展一个 HtmlHelper

实现 HTML.Tree(类别) 就能展示出treeview

用这个方法前再说几句不喜欢这个方法因为这有点像用控件了代码与视图依然在一起第二这里我使用了递归，但是小项目的话没什么问题直接上code

    public static MvcHtmlString Tree(this HtmlHelper html, Category treeModel)
        {
            return BindTree(treeModel);
        }

        private static MvcHtmlString BindTree(Category treeModel)
        {
            StringBuilder sb = new StringBuilder();
            if (treeModel != null)
            {
                sb.Append("<ul>");

                List<Category> list = treeModel.ChildKeys.ToList();
                foreach (var item in list)
                {
                    sb.Append("<li>");
                    sb.Append(item.CategoryName);
                    sb.Append("</li>");
                    sb.Append(BindTree(item));
                }
                sb.Append("</ul>");

            }
            MvcHtmlString mstr = new MvcHtmlString(sb.ToString());
            return mstr;
        }

上面实现了最最简单的展示树形结构无非就是递归的运用这个可以扩展是否展示 checkbox 啊上来默认展示几级啊后面的增删改连接啊 and so on~~

b. 利用ajax 实现异步加载 ( 个人喜欢的方法 ) 先上一个实现后的图我没做任何美工样子很难看~ 大家将就看下

前面有小箭头表示可以打开~~ 打开后变成打开的状态~

下面上视图解释和思路直接加在里面了

<script type="text/javascript">
    $(
    function () {
        var clickLi = function () {
            $(this).children("ul").toggle(); // 切换隐藏和显示li下面的ul


            //切换img图标是 选中还是未选中
            if ($(this).children("img").attr("src") == "http://www.cnblogs.com/Content/img/selectNode.jpg") {

                $(this).children("img").attr("src", "http://www.cnblogs.com/Content/img/noselectNode.jpg");
            }
            else {
                $(this).children("img").attr("src", "http://www.cnblogs.com/Content/img/selectNode.jpg");
            }


            //什么时候发送加载下面节点的请求呢？
            //在img 属性不为空  证明下面有节点  因为没有节点是不会有img 树形的  并且他的下面的ul个数为0 
            if ($(this).children("img").attr("src") != undefined && $(this).children("ul").length == 0) {              
                var cid = $(this).attr("id");
                var li = $(this);
                $.post("GetCategoryById", { id: cid }, function (data) {

                    if (data == "-1") {
                        alert("失败");
                    }
                    else {
                        li.append(data);
                    }
                });
            }
            return false;
        }

        //为什么用 live 不是直接click?

        //因为 ajax请求加载的  click事件是不管用的   要用live才可以 ~~切记 
        $("#CategoryTree li").live("click", null, clickLi);
    }
    );

</script>

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

@*@Html.Tree(Model);*@

 <ul id="CategoryTree">
    @foreach (var item in Model.ChildKeys)
    {
       <li id="@item.CategoryId">
           @if(item.ChildKeys.Count > 0)
           { 
               <img src="http://www.cnblogs.com/Content/img/noselectNode.jpg" /> 
           }
           <span class="name">@item.CategoryName</span> 
           @Html.ActionLink("添加", "Create", new { id=@item.CategoryId})
           @Html.ActionLink("修改", "Edit", new { id=@item.CategoryId})
       </li>
    }
 </ul>

这里说下jquery ajax请求时我们经常返回json 然后来构建这里说下mvc另一种方法返回一个部分视图~~ 我很喜欢这种方法上code~ 不解释啦~

ajax返回部分视图代码

部分视图的视图

2.展示面包屑

树形结构的展示我们经常遇到treeview型的还会遇到另一种面包屑这样的如

我们这里要做的就是根据当前类别向上一层层推到最上面并把最后一个加粗显示~ 我的思路是这样的比如当前所在的类别为最小的广州根据这个一层层推到最上面通过递归得到广州>中国>亚洲在通过反转字符串并给加粗就行了~~ 代码如下

    /// <summary>
        /// 根据当前类别建造面包屑
        /// </summary>
        /// <returns></returns>
        public static MvcHtmlString Menu(this HtmlHelper html, Category treeModel)
        {

            return new MvcHtmlString(MenuReverse(BindMenu(treeModel)));
        }

        /// <summary>
        /// 递归调用  得到 广州>中国>亚洲
        /// </summary>
        /// <returns></returns>
        private static string BindMenu(Category Model)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append(Model.CategoryName);
            if (Model.Parent != null)
            {
                sb.Append(">");
                sb.Append(BindMenu(Model.Parent));
            }
            return sb.ToString();
        }

        /// <summary>
        /// 反转字符串 并给最后一个加上黑体字标签
        /// </summary>
        /// <returns></returns>
        private static string MenuReverse(string menu)
        {
            return string.Join(">", menu.Split('>').Select((s, i) => i == 0 ? string.Format("<strong>{0}</Strong>", s) : s).Reverse().ToArray());
        }

3.删除父类要把下面的子类全部删除

这里就涉及到一个树形结构的重要方法通过当前类得到该类的所有子类子子类等的ID集合这时删除时用 delete in(子类集合 ) 就行了 ~~ 忘了怎么直接执行SQL语句的~~ 去看上一篇文章.. 通过现在类获得下面子类集合的方法如下

  /// <summary>
        /// 获得父类下所有子类的集合
        /// </summary>
        /// <returns></returns>
        private List<int> GetCidbyPid(int pid)
        {
            List<int> cidList = new List<int>();
            Category CategoryModel = unitOfWork.CategoryRepository.GetTEntityByID(pid);
            foreach (var item in CategoryModel.ChildKeys)
            {
                cidList.Add(item.CategoryId);
            }

            foreach (var item in CategoryModel.ChildKeys)
            {
                cidList.AddRange(GetCidbyPid(item.CategoryId));
            }
            return cidList;

            // 获得 1,2,3,4,5  tring strcid= string.Join(",", cidList);
        }

依然是通过递归获得所有的子节点集合再通过string.Join(",", cidList) 得到 delete in ( ) 里需要的的就行了~~

三.与类别挂钩的数据的展示

一. 可以根据任意级别的类别查看文章

依然提供两个方法~

1.根据类别查询文章利用递归

不过这个效率就太纠结了~~

 /// <summary>
        /// 通过任意类别 获得下面的全部文章
        /// </summary>
        /// <param name="cid"></param>
        /// <returns></returns>
        private List<Article> GetArticleByCid(int cid)
        {
           List<Article> ArticleList=new List<Article>();
           Category CategoryModel=unitOfWork.CategoryRepository.GetTEntityByID(cid);
           if (CategoryModel.ChildKeys.Count == 0)
           {
               ArticleList.AddRange(CategoryModel.articleList.ToList());
           }

           foreach (var item in CategoryModel.ChildKeys)
           {
               ArticleList.AddRange(GetArticleByCid(item.CategoryId));
           }
           return ArticleList;
           
        }

2. 利用前面说到的通过当前类得到该类的所有子类子子类等的ID集合再查询的时候 IN 就行了

这里有个小知识~ 用linq 执行 sql in的操作~ 用 Contains就行了代码如下

    public ActionResult Index()
        {
            //准备测试数据 测试不同情况   GetCidbyPid为根据ID获得所有子类以及子子类等的集合
            //测试最高级
            List<int> CidList = GetCidbyPid(1);

            // var CidList = GetCidbyPid(2);

            //测试最低级
            //var CidList = GetCidbyPid(6);

            // 贪婪加载类别 为了显示类别名字~
            var ArticleList = unitOfWork.ArticleRepository.Get(c => CidList.Contains(c.CategoryId), includeProperties: "Category");
            return View(ArticleList);
        }

二.合并两个类别的文章

这个很简单啦~ 合并两个类就是把一个类下的文章id 都变成另一个也就是说批量操作不要用EF 的一个个更新就行太慢了~还要发送多条更新语句

用context.Database.SqlQuery 直接执行 update 这个就不写代码啦~

四.通过第三方工具Telerik更加酷炫的展示tree

我上面写的东西都是小打小闹自娱自乐的玩下有很多地方不完善不合理,而MVC实现Tree 第三方工具已经有了帮我们做的非常优秀的了

这里给大家推荐个开源的是Telerik的 tree------介绍与连接

把该有的操作基本全部都封装在了里面啦~非常方便而且里面还有很多其他的控件~

还有,推荐大家看看源码第三方工具一定要多看看实现不要只会用

五.总结

这篇是完全独立的和前面几篇没什么关系~ 代码贴的都是核心片段~ 聪明的大家看看就能明白了而且应该有更好的实现

希望大家分享下EF MVC处理 tree的经验以及遇到的问题~~

我也提个问题因为tree结构的操作很多都用到了递归在EF 高并发大数据量处理时我觉得会出现一些问题希望大家说说怎么解决

总体内容没有太多难度~ 大家自己敲敲练练吧

实在太懒的同学留个邮件我把demo发给你们~

查看全文

相关阅读:
精通android体系架构、mvc、常见的设计模式、控制反转（ioc）
android UI 开发汇总
 Android 即时通讯 XMPP
jquery $.ajax运行不正常我的调试
 [开发知识点] 使用JQuery 将DataTable 转化成JSON数据,前端无法处理JSON数据的注意事项
 [CSS]如何查看每个元素的盒子
 使用ip策略关闭不用的端口
 [小问题]?和@区别
 [修改远程桌面连接端口]
[开发笔记]sql server中在单引号中包含单引号怎么办

原文地址：https://www.cnblogs.com/sylone/p/6097248.html