
1.7 帖子列表显示及发帖模块设计
1.7.1 帖子列表显示及发帖模块概述
当用户单击查看某一个子专区的帖子时,即有一个页面专门列出所属该专区的所有帖子的数据列表。并且,可以支持在该专区下发布一个新的帖子。帖子列表显示效果如图1.13所示。

图1.13 帖子列表显示效果
用户发帖页面效果如图1.14所示。

图1.14 用户发帖
1.7.2 帖子列表显示及发帖模块技术分析
实现帖子列表显示及发帖模块时,用到了Razor视图引擎中的@符号语法标记、Html帮助器和Model对象,关于@符号语法标记、Html帮助器的讲解,请参见1.6.2节,这里主要对Model对象进行讲解。
每个视图都有自己的Model属性,它是用于存放控制器传递过来的Model实例对象,即实现了强类型。强类型的好处之一是类型安全,如果在绑定视图页面数据时,写错了Model对象的某个成员名,编译器会报错;另一个好处是Visual Studio中的代码智能提示功能。它的调用方式如下:
@model MySite.Models.Product
上面代码是指在视图中引入了控制器方法传递过来的实例对象,通过在视图页面中使用Model即可访问MySite.Models.Product中的成员:
<span>@Model.ID</span>
这里应该注意的是在引用时,model的m是小写字母,在页面中使用时,Model的M是大写。
1.7.3 帖子列表显示及发帖模块实现过程
本模块使用的数据表:tb_ForumMain、tb_ForumInfoStatus、tb_ForumClassify、tb_ForumArea、tb_UsersByCustomer
1. 实现读取帖子列表
首先,应该分析加载一个子专区的帖子列表都需要哪些条件,然后根据数据库表的结构以及页面需求来制定参数列表。则参照表结构可以确定,主帖列表需要提供一个子专区的ID才能得到所属的主帖数据。由于页面中是以列表的形式展示的所属主帖信息,所以,数据分页也是必要的功能。这里将分页的页面作为Action方法参数,而每页显示的数据条数则可以固定写程序中。
打开Home控制器,在类下面定义MainContent方法,按照需求定义id和CurrentPageindex参数。方法定义如下:
例程26 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Controllers\HomeController.cs


数据加载完成后,接着就是设计帖子列表页面,在Home控制器下创建MainContent.cshtml视图文件,然后首先定义专区Logo、标题和版主的布局标签,代码如下:
例程27 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\MainContent.cshtml

然后按顺序定义子专区各项统计信息的布局标签,代码如下:
例程28 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\MainContent.cshtml

定义数据表格时,需要注意权限的控制。对于有权限的用户后台所返回的ViewBag.IsLimit值应为true,所以,在绑定表格标题和数据主体时应使用if判断ViewBag.IsLimit的权限状态。布局代码如下:
例程29 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\MainContent.cshtml

最后绑定分页控件,代码如下:
例程30 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\MainContent.cshtml

没有登录的用户会显示如图1.15所示的列表页面。登录后的用户会显示图1.16所示的列表页面。

图1.15 未登录用户显示列表

图1.16 已登录用户显示列表
2. 实现发帖功能
发帖功能只限于登录的用户,普通游客是无法进行直接发帖的。通过判断用户登录状态,设置富文本编辑器的显示状态即可实现,编辑器布局标签如下:
例程31 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\MainContent.cshtml

富文本编辑器采用第三方控件实现,所以需要引用第三方js文件。然后通过自定义js代码来控制编辑器的显示状态,代码如下:
例程32 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\MainContent.cshtml

同时,在页面中还定义了其他js方法,这些方法实现了数据的提交或更改数据状态等操作,分别为subForm提交发帖内容、SettingRecommend设置推荐、Examine审核发帖、Delrecord删除帖子。
用户登录后富文本编辑器为可编辑状态,效果如图1.17所示。

图1.17 用户发帖
3. 读取精华帖子列表
精华帖子是由有权限的管理人员在众多帖子中标记为精华帖,因此类帖内容丰富、阅读价值较高、图文并茂以及原创等特点,所以被晋升为精华帖。
读取精华帖主要在主帖列表中查询标记状态为精华的帖子,控制器方法代码定义如下:
例程33 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Controllers\HomeController.cs

接着创建Recommend.cshtml视图文件,文件布局代码与专区帖子列表大致相同,所以这里就不在列出。运行程序,查看精华帖列表页,将看到如图1.18所示的列表页面。

图1.18 精华帖列表页