1.5　论坛首页设计

1.5.1　论坛首页概述

程序源论坛首页包含了各大版块区域，每个区域又包含了各子版块。同时，每个子版块又有三个默认帖子。这些数据是由程序在数据库中读取并展示在页面上。除此之外，页面滚动大图、导航、搜索和登录等功能是页面共享版块，所以，首页也包含了这一部分内容。论坛首页的运行结果如图1.8所示。

图1.8　论坛首页运行结果

1.5.2　论坛首页技术分析

在程序源论坛项目中，将首页内容定义在名称为Home的控制器中，然后定义Index方法作为首页的处理动作。方法中将实现首页版块信息数据的读取。按照首页版块设计的需求，读取逻辑可以分析为从大到小递归，以大版块区域为主，每条大版块区域包含一个子版块区域的集合数据，每个子版块区域又包含一个推荐帖子集合数据。这个逻辑关系使用Entity Framework+Linq就可以实现。Home控制器的Index方法定义如下：

例程08　代码位置：资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Controllers\HomeController.cs

1.5.3　论坛首页实现过程

本模块使用的数据表：tb_ForumArea、tb_FormClassify、tb_ForumMain

1. 首页页面设计

在项目的Views视图文件夹下的Home目录中，定义Index视图文件，在视图文件顶部既需要定义接收模型实体数据的变量，同时，也要定义用于访问站点资源的变量，以及页面标题的定义和引用css样式文件这两部分内容，其都是基础的定义，下面主要理解一下页面内容的布局设计。

（1）按照返回的数据实体模型可以分析出，大版块包含小版块，小版块包含最多为3个推荐帖子。所以，该层级关系符合页面的布局样式。因此，则首先需要循环遍历最大的版块，代码如下：

例程09　代码位置：资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\Index.cshtml

首先，定义页面内容的父容器div，然后在div内判断数据集合是否为空，如果不为空，则遍历该数据集合。循环内部定义了大版块区域的布局标签：img为版块标题的“收起／展开”的图片按钮；h4标签为版块标题的版块名称。这样，此循环就能够将所有大版块区域布局到页面上，但目前这些大版块只是一个空的容器，里面没有任何内容。

接下来是布局大版块内的子版块内容。在循环每个大版块区域时，都预留了一个空的table表格标签，在此table标签内的tbody子标签内，可以实现对子版块区域的布局。所以，大版块和子版块是一种嵌套循环关系。Tbody标签内的代码如下：

例程10　代码位置：资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\Index.cshtml

同样，首先判断子版块集合是否为空，然后循环遍历子版块集合。从图1.9首页页面初始效果预览图片中可以看到，子版块区域是每三个版块占一行，所以，应该判断每循环三个子版块时就应该重启一行，即一个tr标签。代码中定义了rowIndex索引变量，当rowIndex等于1时，输出起始tr标签。当rowIndex等于3时，输出结束tr标签，并且将rowIndex归零以便下一次重启新行。最后，在循环外又进行了一次rowIndex判断，此处的逻辑表示最后一次循环时，如果rowIndex不等于3，如果结束tr标签则会漏输出，所以此处添加一层逻辑判断。

最后在每个子版块区域内进行添加3个推荐帖子标题，这同样是种嵌套循环。在子版块区域内预留了<dd class="game-desc"></dd>空内容标签，在此标签内即可布局推荐帖子。代码如下：

例程11　代码位置：资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Home\Index.cshtml

上面代码中的for循环使用了并且关系验证，最多取3条数据，但又必须小于总记录数，如果不加小于3可能会超出3条数据；如果不加小于Count总记录数，那么可能会超出总记录数而索引超出范围导致报错。最后使用Html.ActionLink绑定帖子标题的链接。

当首页设计完成之后，数据和基本格式已经能够显示出来，但样式上还没有得到完善。效果如图1.9所示。

2. 页面导航公共部分设计

页面公共部分包括轮播图、导航栏、搜索、登录以及底部信息等内容。包括首页在内，其他前台页面也都使用该公共部分。

前面学习了布局页面的一些相关知识，它是定义在Shared文件夹内的。创建项目时默认包含了一个_Layout.cshtml布局页面，但本项目不使用该布局页面。所以，在Shared文件夹内新创建一个_LayoutBBSSite.cshtml布局页面，并在页面内添加布局代码。

图1.9　首页页面初始效果

布局视图文件内定义的Html标签与普通内容视图标签是不同的。首先，它包含了html、head和body等标签，然后，在标签中还需要用到RenderSection、RenderBody等方法。这些方法是用来标记布局页与内容页进行合并的匹配方案。

首先，布局页同样需要定义访问资源文件的变量，然后在head标签内定义页面标题、引用样式等代码。如下是_LayoutBBSSite.cshtml页面的head标签内部分代码：

例程12　代码位置：资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Shared\_LayoutBBSSite.cshtml

在内容页，通过定义@section linkcss{}并在括号内定义标签代码，即可将内容放置在该位置。其中，linkcss为自定义名称。RenderSection方法的第二个布尔参数表示内容页是否必须定义该部分，false表示允许不呈现该部分内容。

在页面主题部分，共包含了3个大区域，分别为轮播图、导航栏和登录、页面底部信息。下面将一一进行设计布局。

首先是轮播图的标签定义：

例程13　代码位置：资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Shared\_LayoutBBSSite.cshtml

ol标签内定义了两个li标签，表示切换轮播图的两个圆点按钮。class为item的两个div标签为轮播图图片。定义多个图片时，直接向后追加div标签并设置class属性值为item，同时还需要对应的增加li的数量。

接着设计导航栏、搜索和登录部分代码。该部分代码包含4个div布局容器，下面只列出主要布局代码：

例程14　代码位置：资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Shared\_LayoutBBSSite.cshtml

<ul class="nav navbar-nav">
    <li>@Html.ActionLink("首页", "Index", "Home")</li>
    <li>@Html.ActionLink("精华帖子", "Recommend", "Home")</li>
</ul>

导航栏使用了ul和li标签进行布局，通过Html.ActionLink方法动态指向了控制器动作。同样，增加导航栏目只需添加li标签并绑定内容即可。

搜索框需要提交文本框内容，所以使用了form标签进行表单提交。

例程15　代码位置：资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Shared\_LayoutBBSSite.cshtml

登录部分可分为两种状态，一种是未登录状态，另一种是登录后状态。

例程16　代码位置：资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Shared\_LayoutBBSSite.cshtml

通过实例化BBSSite.MyPublic.LoginStatus类并访问IsLogin属性即可判断用户的登录状态，如果已登录则显示用户信息，未登录则显示登录按钮。

第三大部分是页面底部信息，但此时内容页面还没有指定要显示的位置，所以，在编写底部布局标签前应通过RenderBody()方法标记内容页应该呈现的位置。

例程17　代码位置：资源包\TM\01\BBSSiteItem\BBSSite\BBSSite\Views\Shared\_LayoutBBSSite.cshtml

如图1.10所示是首页完成后的效果图，头部、内容以及底部信息都已经呈现在网页上。

图1.10　首页页面效果