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传递的数据
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
@{
Layout =
null
;
//<span style="color: #ff0000;">表示母板页为空</span>
}
<!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))
//<span style="color: #ff0000;">首先显示所有的父级列表，因为父级列表的ParentID为空，所以可以找到所有的父级列表显示出来。</span>
{
<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"
>
@{
//<span style="color: #ff0000;">显示完了所有的父级列表以后，就需要显示所有的子级列表，并且要设置其为Hidden。</span>
var top = 30;
foreach
(Models.CategoryInfo item
in
cateList)
{
if
(
string
.IsNullOrEmpty(item.ParentID))
{
<span style=
"color: #ff0000;"
> top = top + 20;
//这个表示每个子级列表显示的位置。距top的高度。
var topPix = top.ToString() +
"px"
;</span>
<div id=
"cate_content_block_@(item.CategoryID)"
class
=
"cate_content_block_wrapper"
style=
"top:@topPix;<span style="
color: #ff0000;
">display:none</span>;"
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/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/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.下面来看一下我在本地调试显示的效果。
可以说结果还是符合了我的预期。实现了对于博客园首页的网站分类列表的功能实现。下一个功能就是博客园首页中的列表显示。
这个很简单，我把我在开发中遇到的一些问题和大家说一下，希望可以得到帮助。
我在设计这个网站系统的架构结构的时候，纠结了很久，总是想不到合适的能完全满足我要求的架构，是我对于架构的经验不足造成的，还是什么原因呢？请各位解答，谢谢～有时候写博真的能发现自己的很多问题，大家积极写博，共同进步
第一篇：Asp.net MVC 3 开发一个简单的企业网站系统
第二篇：Asp.net MVC 3 开发简单的企业系统开篇--数据库
第三篇：Asp.net MVC 3 开发企业网站系统仿照博客园部分功能--总体设计
还有一点我忘记说了，就是对于这种静态的内容，不需要每次都从服务器读取数据再次进行显示，这会非常的影响性能。我们可以采用Memcached对这些静态的不经常变动的数据进行缓存，当然这个也以后进行。现在是先实现基本功能，至于其他性能问题，以后逐渐加上