MVC通过递归+部分视图实现评论

前一个项目里有一个关于评论系统的需求。感觉这个评论的实现还是蛮好玩的，所以记录下这个系统的实现相关内容。

 

功能需求：

1、用户可以再视屏下方留言。

2、用户可以再别的用户留言下方回复。

3、用户可以删除自己的留言，删除之后所有属于这个留言的子留言都会被删除。

 

 

分析：

看到上面这个需求的时候，想法是可以把这个留言内容作为一个“留言树”，一个留言就是一个根节点，然后留言下方的回复就是根节点下方的字节点。回复的回复就是子节点的子节点。

所以数据库的设计就要提现这几个要素：①父节点标记   ②本身节点标记   ③标记时间（用于区分两个兄弟节点谁先谁后）

 

 “SourseID”表示这个评论所属哪个课件资源。

接下来是树的生成了，主要的设计思路如下：

1、当需要课件A的评论树的时候，先从数据库中取出所有“SourseId”为课件A的评论数据，把上述数据放入队列Queue中，并定义一个空的树Tree

2、Queue出队一个数据D，数据D在Tree中通过递归逐层查询自己的父节点，如果找到父节点就在Tree相应位置插入数据D，如果没有找到就把D再入队Queue中。

3、重复2的操作，直至Queue空队

 

 

代码如下：

/// <summary>
        /// 获取页面视图所需要的评论树
        /// </summary>
        /// <returns></returns>
        public List<CommentTree> GetCommentsForView(int SourseId)
        {
            List<CommentTree> trees = new List<CommentTree>();
            List<CommentInfEntity> comments = dal.SelectCommentInfs($" AND C.SourseID ='{SourseId}'");
            Queue<CommentInfEntity> queues = new Queue<CommentInfEntity>(comments);
            while(queues.Count!=0)
            {
                CommentInfEntity c = queues.Dequeue();
                if (c.PId == 0)
                {
                    CommentTree tree = new CommentTree();
                    tree.Node = c;
                    tree.Branch = new List<CommentTree>();
                    trees.Add(tree);
                    trees = trees.OrderBy(x => x.Node.CommentTime).ToList();
                }
                else if (c.PId != 0)
                {
                    c.PName = comments.Where(x => x.Id == c.PId).FirstOrDefault().Name;
                    if (!ParentIsExist(trees,c))
                    {
                        queues.Enqueue(c);
                    }
                }
            }
            return trees;
        }
        /// <summary>
        /// 迭代修改
        /// </summary>
        /// <param name="trees"></param>
        /// <param name="queue"></param>
        /// <returns></returns>
        private bool ParentIsExist( List<CommentTree> trees, CommentInfEntity queue)
        {
            for(int i=0;i<trees.Count;i++)
            {
                if (trees[i].Node.Id == queue.PId)
                {
                    CommentTree t = new CommentTree();
                    t.Branch = new List<CommentTree>();
                    t.Node = queue;
                    trees[i].Branch.Add(t);
                    trees[i].Branch = trees[i].Branch.OrderBy(x => x.Node.CommentTime).ToList();
                    return true;
                }
                else
                {
                    if (ParentIsExist(trees[i].Branch, queue))
                    {
                        return true;
                    }
                }    
            }
            return false;
        }

这样子最后的Tree就获得了。

 

然后在视图里面就可以用Html.RenderPartial来显示了

@foreach (CommentTree tree in ViewBag.CommentInf)
                                        {
                                            <div class="weui-cell">
                                                <div class="weui-cell__hd"><i class="glyphicon glyphicon-user"></i></div>
                                                <div class="weui-cell__bd">
                                                    <p>@(tree.Node.Name)：@(tree.Node.Comments)</p>
                                                </div>
                                                <div class="weui-cell__ft"><i commentname="@(tree.Node.Name)"  commentid="@(tree.Node.Id)" class="glyphicon   @(tree.Node.WeiXinPublicId == ViewBag.UserWeiXin ? "glyphicon-remove":"glyphicon-pencil")   " id="@(tree.Node.WeiXinPublicId == ViewBag.UserWeiXin ? "del-comment":"rep-comment")"></i></div>
                                            </div>
                                            foreach (var node in tree.Branch)
                                            {
                                                Html.RenderPartial("../Course/CommentParyial", node);
                                            }
                                        }

 

部分视图：

<div class="weui-cell reply">
    <div class="weui-cell__hd"><i class="glyphicon glyphicon-user"></i></div>
    <div class="weui-cell__bd">
        <p>@Model.Node.Name 回复 @Model.Node.PName：@Model.Node.Comments</p>
    </div>
    <div class="weui-cell__ft"><i commentname="@(Model.Node.Name)"  commentid="@(Model.Node.Id)"  class="glyphicon @(Model.Node.WeiXinPublicId == ViewBag.UserWeiXin ? "glyphicon-remove":"glyphicon-pencil")   "  id="@(Model.Node.WeiXinPublicId == ViewBag.UserWeiXin ? "del-comment":"rep-comment")"></i></div>
</div>

@foreach (var node in Model.Branch)
{
    Html.RenderPartial("../Course/CommentParyial", node);
}

 

上述部分视图也是用了递归的方法。

首先在页面上面显示根节点Node，然后把子节Child点发送给部分视图页面，部分视图页面获得数据后，把得到的子节Child点作为根节点显示，然后把Child的子节点发送给部分视图。。。。。最后直至数据结束，