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　首頁頁面效果