![ASP.NET项目开发全程实录(第4版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/589/26793589/b_26793589.jpg)
1.8 帖子查看与回复模块设计
1.8.1 帖子查看与回复模块概述
论坛帖子最主要的作用就是解决发帖人的问题,或其他浏览者能够回复发帖人,实现讨论的目的,同时,也能够将讨论结果分享给其他人浏览。所以这就少不了某一帖子的查看与回复功能。帖子查看与回复模块效果如图1.19所示。
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P51_3462.jpg?sign=1738852904-3uTFdX0uEwhJyv9feyGyks0nklulIWMV-0-64939fc8f5eca164780fac7740980a02)
图1.19 帖子查看与回复
1.8.2 帖子查看与回复模块技术分析
程序源论坛中的各个模块都是使用ASP.NET MVC模式实现的,本节对ASP.NET MVC的请求过程进行讲解。
当在浏览器中输入一个有效的请求地址,或者通过网页上的某个按钮请求一个地址时,ASP.NET MVC通过配置的路由信息找到最符合请求的地址,如果路由找到了合适的请求,访问先到达控制器和Action方法,控制器接收用户请求传递过来的数据(包括URL参数、Post参数、Cookie等),并做出相应的判断处理,如果本次是一次合法的请求并需要加载持久化数据,那么通过Model实体模型构造相应的数据。在响应用户阶段可返回多种数据格式,分别如下:
返回默认View(视图),即与Action方法名相同。
返回指定的View,但Action必须属于该控制器下。
重定向到其他的View(视图)。
例如,当一个用户在浏览器中输入并请求了“http://localhost/Home/Index”地址,程序会先执行路由匹配,然后转到Home控制器,再进入Index方法中。
1.8.3 帖子查看与回复模块实现过程
本模块使用的数据表:tb_ForumMain、tb_ForumSecond、tb_ForumClassify、tb_UsersByCustomer、tb_ZY_Sex
1. 查看帖子
查看帖子信息包含发帖人信息、主帖标题、主帖内容以及发帖时间等,如果主帖中已经有跟帖回复,则需要将跟帖信息读取并绑定在帖子页面中。
首先,定义查看帖子的控制器处理动作,方法名称为SecondContent。同样,加载某一帖子数据时,需要提供主帖id才能读取,并且如果跟帖数据较多,还会采用分页的方式加载跟帖数据。控制器的方法定义如下:
例程34 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Controllers\HomeController.cs
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P52_33036.jpg?sign=1738852904-m0NpcwB0xFjEFNjNpKl8urgsQyZx5Q1K-0-eb00e690da18bbaaf3272b9e18c4f842)
在视图文件中,主要对发帖主题和跟帖信息进行数据绑定。下面是这两部分布局代码标签的定义,代码如下:
例程35 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\SecondContent.cshtml
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P53_33040.jpg?sign=1738852904-2JjZpVNWtKoTWyekQaf1PGN8kNdEnj1j-0-8cd84acb18342fb84b4752797d745679)
上面布局代码中使用table一行多列的方式分别绑定了发帖人信息、发帖时间以及帖子主题等数据。这是第一行固定的数据信息。那么,跟帖数据的绑定同样在table中进行。通过foreach循环遍历跟帖集合数据,每一条回复信息产生一个新的tr(新行)。这样,就形成了一个跟帖列表。布局代码如下:
例程36 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\SecondContent.cshtml
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P54_33043.jpg?sign=1738852904-DU0N5AZzwlioaG9CyontjeWk8RinY4eg-0-064992c60740771f0731f9fa49186422)
每一条回帖同样包含了回帖人的信息,与发帖人并列放置在了第一列。接着,第二列(td)是放置回帖信息内容列,代码如下:
例程37 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\SecondContent.cshtml
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P54_33045.jpg?sign=1738852904-BcXtStXRlFPFTZcOW7XWhrODnxwBAoaw-0-d9d1eba301a58deaf31cba798d75817a)
如图1.20所示为发帖信息,回帖效果如图1.21所示。
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P55_3567.jpg?sign=1738852904-62A1xwWRCN0ExP8yQuwdKNjDWrSwxPy3-0-b0bb4c1fa004d000bbc3eb3f660b7305)
图1.20 查看发帖
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P55_3570.jpg?sign=1738852904-nxETMunvahvCjf0z4SDQMIzfHXTzzGEG-0-478633a0ce8eb6c17ef2d4942b10cef9)
图1.21 查看回帖
2. 回复主帖
回复主帖是针对楼主的发帖主题进行相关回复的讨论过程,但只有登录的用户才可以进行回帖。与发帖相同,这里使用第三方富文本编辑器来编辑回帖信息。
创建富文本编辑器的方式与发帖时相同,这里主要讲解如何实现回帖的过程。当用户单击“回复帖子”按钮时将会触发js定义的subForm方法进行提交数据前的处理工作,代码如下:
例程38 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\SecondContent.cshtml
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P56_33048.jpg?sign=1738852904-ESjsu7ELFCnvZgPWJZBtqPoLeXo6zPww-0-98d7bc46cf19181d13267f6cfc2602a6)
在subForm方法中首先检测用户是否已经登录,如果未登录则提示用户是否登录。所以,这里限制了只有登录的用户才能进行回帖,如果用户已经登录,则检测用户输入的回帖信息是否有效,然后将文本数据赋值给一个id名称为“ueditor_textarea_content”的textarea控件。最后,返回true。
在绑定富文本编辑器时,使用了Html.BeginForm方法指定了HomeSave控制器的ReplyContent动作方法,所以数据会被提交到该控制器指定的动作中。ReplyContent方法代码如下:
例程39 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Controllers\HomeSaveController.cs
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P56_33050.jpg?sign=1738852904-WxytUqLi1HfKRAfew50zZTAvYY7vVWzL-0-9326601b8037d94eb0f60e59e18832f5)
如图1.22所示,编辑好要回复的内容后,然后单击“回复帖子”按钮即可完成回帖功能。
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P57_3612.jpg?sign=1738852904-4AuHWedGSq7nG6PYEFo0hred7GcUcl61-0-7771bf4e8db87a5bb524c7ac13cdf722)
图1.22 回复主帖
3. 回复某一楼层
除了回复主帖外,还可以针对某一楼层的回复进行回复,实现局部的讨论功能。在定义ReplyContent方法时,代码中使用了ReplySequenceID变量,从注释说明中可以看出,如果这个变量没有接收到前端传递过来的ReplySequenceID参数值或值为0则表示当前回复的是主帖,如果该值有效(大于0),则表示当前回复的是某一楼层。所以,所有回复工作都是由ReplyContent动作方法完成的。
既然后台控制器动作中实现了回复功能,接下来看一下前台页面上该如何实现回复的功能。在布局页面标签时就已经定义了“回复此楼”按钮,按钮的onlick事件指定了Replying方法,并传入了当前楼层的回复id。
Replying方法定义在了Content文件夹下的js文件夹内。方法定义如下:
例程40 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Content\js\SecondContent.js
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P58_33053.jpg?sign=1738852904-5i5858nKIPUNK7jxl9wbSRm2mqrTtS40-0-57be11256c65f579c6d0e6a9b61a57a4)
当单击“回复此楼”之后会弹出如图1.23所示的回复窗口。
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P58_3631.jpg?sign=1738852904-z6xPqsQlIh5F0xbFeETUSKfofERc9LYV-0-849e792274e5237399c1dc1a4ea76123)
图1.23 回复楼层
4. 绑定楼层回复
当楼层回复的功能完成之后,接下来就是呈现楼层中回复的内容。因为所有的回复都是在某一楼层中发生,所以,该部分布局标签一定是定义在楼层中的某一容器内。
在查看帖子一节中,布局回复帖子标签时,在绑定回复内容的div标签下面有一处注释内容,标记为“<!--此处为预留布局-->”。那么绑定楼层回复的布局标签就是定义在该位置区域的。布局标签定义如下:
例程41 代码位置:资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\SecondContent.cshtml
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P59_33056.jpg?sign=1738852904-3tJA0tSfgS5N6XqcTVZnHWeefCshocXd-0-6ffe570c71ce9f30fb491ea4e32fa0cf)
布局后的呈现效果如图1.24所示。
![](https://epubservercos.yuewen.com/60F777/15253385804108706/epubprivate/OEBPS/Images/Figure-P60_3664.jpg?sign=1738852904-tUVZXjRBN9Y5gAksJcf2PZhn6S6XlaHW-0-401724a6023b0fa628e28d9d2d8401ee)
图1.24 楼层内回复