Asp.net MVC3 企业网站系统高仿博客园首页左侧列表页面实现效果

在前一篇文章Asp.net MVC 3 开发企业网站系统仿照博客园部分功能--总体设计中介绍了数据库的总体设计，现在呢我们就来实现博客园的左侧网站分类效果实现。当然因为我的前端功底实在不敢恭维，所以我采用博客园的CSS和JS脚本，这样我们可以提高网站的实现速度，而不用为了前端的显示界面调整浪费时间（注：前端很重要）。下面我就来说明我的这个分类的实现方式，如果您有更好的建议，欢迎您提出来！

在具体说明实现之前，我要说明一下这个网站系统我采用的架构或者说目录实现方式（通过QQ截图显示）：

现在我来说一下我这么设计结构的原因：

1.IDBServices：这个是访问数据库以及对数据库进行操作的接口。

2.ImpAccessServices：这个类库是通过继承IDBServices实现对Access数据库的访问、操作

3.ImpSqlServices：这个类库实现自IDBServices接口，是对SqlServer数据库的访问。

4.ImpServices：继承自IServices接口，实现对sqlserver或者Access等其他数据库的访问

5.IServices：服务层接口，这里定义了多有对于数据库可能进行的操作以及应该返回的数据类型，以及查询接口

6.Models：独立出来的MVC的Models层，这个类库单独独立出来应该是所有项目都会采用的，这样可以避免因为Models层的过大而影响MVC目录结构，还有就是独立出来可以由其他人员进行开发，方便整合。

7.MVCCompany：这个是MVC应用程序，是和用户直接打交道的地方。

还有一点，我觉得有必要说一下，就是我单独把数据访问层接口放到独立的类库中，而把实现类放到其他不同的类库中，这样我个人认为有两个好处：1.就是方便管理，可以单独开发，不会相互影响，2.就是可以更加有效的进行IOC，依赖注入，更加方便的增加可维护性，我认为这是更加重要的方面。

为了增加这个小型网站的可维护性以及可扩展性或者可更改性，我采用的是将不同的部分单独分开（比如首页网站分类、显示列表我都单独分在不同的页面中），在需要的地方进行组装显示。我想这也是现在软件开发通用的方式。（其中UserControl就是一个例子）

好了，该介绍的我想都介绍完了，下面来演示过程：

强调一下，在MVC中可以进行组装的方法有很多种，我采用的是Html.RenderAction()方法的一个重载，当然可以采用其他的诸如Html.Action().Html.Partial(),Html.RenderPartial()，采用母板页方式（其实我个人特别反感在需要组装的时候就使用母板页，当然这是一个不错的方式，但是有时候母板页会带来其他问题，不如采用MVC中的htmlHelper方法来的好。当然这只是个人意见）等不同的方法。在这里我想说一下，Html.RenderAction方法的执行效率会比Html.Action()效率高，至于为什么？当然这也是有条件的，各位可以查资料

开发过程：

1.创建所有的对数据库的操作的实现类，这是必须的

在这里我创建的就是CategoryServices，是继承自IServices接口的一个实现类。其中定义了各种网站分类应该具有的方法，在这里使用的就是返回所有的分类列表

public List<CategoryInfo> GetAll()方法，返回多有的网站分类的数据列表

2.创建好了网站分类的服务类以后，剩下的工作就轻松很多了。创建CategoryController,在该Controller的Action方法Index中定义需要的数据

1 public ActionResult Index()
2       {
3           CategoryServices cateServices = new CategoryServices();
4           List<CategoryInfo> cateList = cateServices.GetAll();
5           ViewBag.Cate = cateList;
6           return View(cateList);
7       }

该方法通过服务层类返回数据网站分类必须的数据，并且通过ViewBag传递到View层

3.在View层中显示Controller传递的数据

@{
    Layout = null;//表示母板页为空
}
<!DOCTYPE html>
<html>
<head>
    <title>Category</title>
</head>
<body>
    <div id="cate_title_block">
        <div id="cate_title_title">
            <div class="cate_title">
                网站分类</div>
        </div>
        <ul id="cate_item">
            @{
                List<Models.CategoryInfo> cateList = ViewBag.Cate as List<Models.CategoryInfo>;
                foreach (Models.CategoryInfo item in cateList)
                {
                    if (string.IsNullOrEmpty(item.ParentID))//首先显示所有的父级列表，因为父级列表的ParentID为空，所以可以找到所有的父级列表显示出来。
                    {
                <li id="cate_item_ @item.CategoryID" class="" onmouseout="cateHidden( @item.CategoryID)" onmouseover="cateShow(@item.CategoryID)">
                    <a href="">@item.CategoryName</a> </li>
                    }
                }
            }
        </ul>
        <div class="cate_bottom">
        </div>
    </div>
    <div id="cate_sub_block">
        @{//显示完了所有的父级列表以后，就需要显示所有的子级列表，并且要设置其为Hidden。
            var top = 30;
            foreach (Models.CategoryInfo item in cateList)
            {
                if (string.IsNullOrEmpty(item.ParentID))
                {

                    top = top + 20;//这个表示每个子级列表显示的位置。距top的高度。
                    var topPix = top.ToString() + "px";
            <div id="cate_content_block_@(item.CategoryID)" class="cate_content_block_wrapper" style="top:@topPix;display:none;" onmouseout="cateHidden(@(item.CategoryID))" onmouseover="cateShow(@(item.CategoryID))">
                <div class="cate_content_top">
                </div>
                <div class="cate_content_block">
                    <ul>
                        @{    foreach (Models.CategoryInfo subItem in cateList)
                              {
                                  if (subItem.ParentID == item.CategoryID)
                                  {
                            <li>
                                @Html.ActionLink(subItem.CategoryName, "cate", "category", new { id = subItem.CategoryID }, null)
                            </li>
                                  }
                              }
                        }
                    </ul>
                </div>
                <div class="cate_content_bottom">
                </div>
            </div>
                }

            }
        }
    </div>
</body>
</html>

4.创建好了可以显示的列表以后，我们就要让他在首页组装了。通过Html.RenderAction()来在首页渲染

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link rel="Stylesheet" type="text/css" href="http://common.cnblogs.com/css/reset.css" />
    <link rel="Stylesheet" type="text/css" href="http://common.cnblogs.com/blog/css/aggsite.css?id=2012120102" />
    <link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="http://feed.cnblogs.com/blog/sitehome/rss" />
    <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
    <script src="http://common.cnblogs.com/script/json2.js" type="text/javascript"></script>
    <script src="http://common.cnblogs.com/blog/script/site.src.js?id=2012120102" type="text/javascript"></script>
</head>
<body>
    <div id="side_nav">
        @{Html.RenderAction("index", "category");}
    </div>
</body>
</html>

可能有些园友很疑惑，为什么我这里的ID或者class都和博客园的定义一样，在这里我想说一下就是，我前端真的很不在行，只能通过这种方式来提高进度。毕竟都是工作的人，时间很紧张。你懂得

5.下面来看一下我在本地调试显示的效果。