Asp.net MVC 3執行個體學習之ExtShop（二）——建立主版頁面

     
主版頁面的作用就是將整個網站的公用元素集中起來，便於維護。在本執行個體中的主版頁面內容主要1所示，將頁面中頂部的導覽列、左邊的分類欄和底部的著作權資訊集中起來。

圖1

     
在修改主版頁面之前，首先在項目根目錄增加一個“Images”的目錄，用來存放項目圖片。在方案總管中選擇“Extshop”，然後單擊滑鼠右鍵選擇“添加”，從子功能表中選擇“建立檔案夾”，然後將檔案夾的名稱修改為“Images”，最後將項目圖片添加到“Images”檔案中。

      從上一篇

博文可以瞭解到，預設的主版頁面是_Layout.cshtml檔案，因此我們需要修改該檔案。在編輯器中開啟該檔案，同時開啟Site.css檔案。

      首先要修改的是Site.css，將body定義中的font-size修改為14px，並增加以下兩行代碼：

margin:0;padding:0;

 

      然後切換到_Layout.cshtml檔案，首先完成頂部導覽列，在@RenderBody上加入以下代碼：

    <div id='navBar'>        <div class="logo"></div>        <div class="nav">            <span><a href="/" mce_href="">首頁</a></span>            <span><a href="">優惠資訊</a></span>            <span><a href="">聯絡我們</a></span>            <div class="right">                 <a href="#" mce_href="#" id="login">登入</a>  |                  <a href="#" mce_href="#" id="reg">免費註冊</a>  |                  <a href="#" mce_href="#" id="cart">購物車</a>  |                  <a href="">協助</a>            </div>        </div>        <div class="last"></div>    </div>  

    
從代碼中可以看到，因為具體的頁面還沒有實現，所以所有連結目前都是空的，而“登入”、“免費註冊”和“購物車”3個連結因為是呼叫指令碼的，所以都設定了ID，其串連都為“#”。

      在Site.css檔案尾加入以下CSS代碼：

     

ul,li{padding:0;margin:0;}li {list-style: none;}a{text-decoration:none}a:visited{text-decoration:none;}#navBar {height:41px;width:980px;margin:auto;display:block;overflow:hidden;}#navBar div{float:left;font-weight:bold;color:#fff;line-height:30px;}#navBar a{color:#fff;}#navBar a:hover{color:#f90;}#navBar a:visited {color:#fff;}#navBar .logo{width:178px;height:41px;background:transparent url(/images/top1.jpg) no-repeat}#navBar .nav{width:789px;height:41px;display:block;background:url(/images/top2.jpg) repeat-x;padding-top:10px;}#navBar .nav span{font-weight:bold;width:80px;display:block;text-align:center;float:left;}#navBar .nav .right{width:220px;height:41px;display:block;float:right;font-size:12px;line-height:24px;padding-top:8px;}#navBar .nav .right a{width:auto;font-weight:normal;}#navBar .last{width:13px;height:41px;background:transparent url(/images/top3.jpg) no-repeat}

 

       請注意CSS代碼中的背景圖片路徑，都是以“/”開頭的，表示是根目錄下的“Images”目錄下的檔案。這樣做的目的，無非是為了方便。

       繼續完成餘下部分，在頁面中添加如下代碼：

  <div class="wrap">    <div class="left">        <span class="header">分類瀏覽</span>        @{Html.RenderAction("LeftList", "Catalog", new { id = PageData["id"] });}        <br />    </div>    <div id="main">        @RenderBody()    </div>    <div class="clear"></div>  </div> <div id="footer">Ext公司  Copyright 2011</div>

 

     
因為左邊的分類瀏覽是動態，所以在第4行代碼中，通過RenderAction方法調用Catalog控制器裡的LeftList方法返回需要的分類資訊，而“new

{id=PageData["id

"]}”參數的目的是允許頁面通過具體的id控制列表。

      第8行就是要插入的內容頁。

      最後在Site.css加入以下的css代碼：

.wrap {width:980px;margin:10px auto 10px auto;}.wrap .clear{clear:both;}.left {float:left;width:160px;margin-right:10px;border:1px solid #d3d3d3;padding:1px;}.left .header{background:url(/images/leftHeader.jpg) repeat-x;height:28px;line-height:28px;width:150px;display:block;color:#fff;font-size:14px;margin:0px;}.left span{width:140px;display:block;height:20px;line-height:20px;padding-left:10px;background:transparent url(/images/point02.jpg) no-repeat scroll 0 10px;margin-left:5px;}.left a{color:#000;}.left a:hover{text-decoration:underline;}#main {float:right;width:800px}#footer {height:30px;width:980px;display:block;text-align:center;margin:auto;line-height:30px;border-top:1px solid #d2d2be}

 

     
整個頁面的架構基本就完成了。不過要測試架構，還需要做點事情。選擇“Controllers”目錄，然後添加一個“CatalogControl”的控制器。然後在控制器裡添加一個LeftList操作，代碼如下：

 

[ChildActionOnly]<br /> public ActionResult LeftList(string id)<br /> {<br /> string condition = "";<br /> if (id.Length > 0)<br /> {<br /> condition = "CategoryID.Substring(0,@1)==@0 && CategoryID.Length>@1";<br /> }<br /> else<br /> {<br /> condition = "CategoryID.Length<7";<br /> }<br /> ViewData["id"] = id;<br /> ExtShopDataContext dc = new ExtShopDataContext();<br /> var q = dc.T_Categories.Where(condition, id,id.Length).OrderBy(m => m.CategoryID);<br /> return PartialView(q);<br /> }<br />

 

     
代碼中，“ChildActionOnly”屬性的目的是讓這個操作不能通過瀏覽器直接存取，只能通過RenderAction調用。因為需要將id傳遞給視圖，所以要講id值儲存在“ViewData["id"]”中，以方便視圖調用。代碼最後一句返回的不是“View”，而是“PartialView”，類似於返回使用者自訂控制項。

      要使代碼能正常運行，還需要在引用中加入以下語句：

 

using Extshop.Models;<br />using System.Linq.Dynamic;<br />

 

     
代碼第二句需要引用Linq的動態庫，所以需要在項目中增加一個“App_LocalResources”目錄，將“DynamicLibrary.cs”檔案添加到該目錄。

      現在要為操作添加一個視圖，在“LeftList”上單擊滑鼠右鍵，在菜單中選擇“Add View”，將看到2所示的結果。

 

圖2

 

      勾上“Create a strongly-typed view”，接著在“Model
class”中選擇“Extshop.Models.T_Categories”，然後勾上“Create as a partial
view”，單擊“Add”按鈕完成操作。在“LeftList.cshtml”檔案中加入以下代碼：

 

 

@model IEnumerable<Extshop.Models.T_Categories></p><p>@foreach (var c in Model)<br />{</p><p> if (c.CategoryID.Length == (((string)ViewData["id"]).Length+3))<br /> {<br /> <span><a href="@Url.Action(" mce_href="http://mce_host/@Url.Action("List", "Catalog", new { id = c.CategoryID })" style="font-weight:bold;" mce_style="font-weight:bold;">@c.Titel</a></span><br /> }<br /> else<br /> {<br /> <span><a href="@Url.Action(" mce_href="http://mce_host/@Url.Action("List", "Catalog", new { id = c.CategoryID })">@c.Titel</a></span><br /> }<br />}<br />

 

     
代碼中，Model表示從控制器傳入的資料。Url.Action方法的作用是構造一個連結，第1個參數代表要執行的操作，第2個參數表示使用那個控制器，第3個參數表示要傳遞的參數。

      
現在為項目增加一個“HomeController.cs”，然後為Index操作增加一個視圖。最後修改“Index.cshtml”檔案代碼如下：

@{    ViewBag.Title = "Index";    PageData["id"] = "";}<h2></h2>

 

     因為是首頁，分類瀏覽的分類要列根類，所以在頁面中需要設定參數“PageData["id"]”為空白字串。

      最後選中“Extshop”，在右鍵菜單“調試”的子功能表中選擇“啟用新執行個體”，即可在瀏覽器中看到1所示的結果。