.Net Pet Shop 4 初探之三:使用者介面層布局

前言

介面布局就是UI層的設定,是網站風格的集中體現,通常包括主題,皮膚,主版頁面等元素及各種圖片,控制項,顏色的搭配等,甚至通過前台指令碼的處理,構成豐富多彩的頁面效果.

PetShop4也有其個性的使用者介面層(UI)

主版頁面

PetShop4中,所有的頁面都運用了主版頁面.Web項目下的MasterPage.master就是主版頁面的設計介面,開啟主版頁面,如所示,分析主版頁面的設計.

該主版頁面可以大致分為三部分:

• 上部:操作欄,包括搜尋,登入,登出,連結到購物意向欄,設定Profile,跟蹤導航條,顯示登入名稱等內容
  跟蹤導航條是一個自訂的控制項,開啟該自訂的控制項BreadCrumbControl.ascx檔案,介面上只有一個PlaceHolder點位控制項,PlaceHolder 控制項使您可以將空容器控制項放置到頁上，然後在運行時動態地將子項目添加到該容器中。
  在BreadCrumbControl.cs檔案中:

  HtmlAnchor lnkHome = new HtmlAnchor();
  lnkHome.InnerText = "Home";
  lnkHome.HRef = "~/Default.aspx";
  plhControl.Controls.Add(lnkHome);//將動態產生的控制項添加到
  plhControl.Controls.Add(GetDivider());//添加分隔字元

  這樣根據客戶進入的層次,跟蹤導航條上就自動增加相應的導航連結.

• 左邊:商品類別導航
• 右邊:內容面版,ContentPlaceControl控制項.

為子頁添加主版頁面有兩種方式:一是在建立新頁面時選中右下角的"選擇主版頁面"複選框,這樣就會彈出選擇視窗來確定要用的主版頁面.二是在已有的頁面上的源碼頁的第一行上添加MasterPageFile的路徑.

在子頁面中訪問主版頁面

在內容頁中編寫代碼來引用主版頁面中的屬性,方法.

只要在主版頁面上聲明為公用成員,則可以用"master.***"的方法來引用.但在引用前必須在內容頁中添加引用指令:

[%@ MasterType virtualpath="~/MasterPage.master"%]

對於主版頁面中的控制項,要使用"Master.FindControl()"方法.

對於在ContentPlaceControl控制項內的控制項,則要先用"Master.FindControl()"方法找到ContentPlaceControl控制項,再用"FindControl()"方法找到要引用的控制項.

皮膚(主題)

產生皮膚檔案的根目錄下都有一個App_Themes檔案夾,在PetShop4中,皮膚檔案為SkinFile.skin,部分代碼如下:

其中一個重要的屬性SkinID,用CssClass來調用CSS樣式,以設定元素的屬性.

要引用一個皮膚,必須:

• 引用皮膚的控制項必須和被引用控制項是同一類型
• 指明引用控制項的SkinID屬性為被引用控制項的SkinID屬性.

例如:

錯誤處理

當發生錯誤時,系統自動導航到指定的錯誤頁面上,顯示相應的錯誤資訊.

在Web.config檔案中,可以找到"customErrors"節點,其內容如下:

defaultRedirect指明了要導航到的頁面.

頁面驗證

指明UserProfile.aspx頁面不允許匿名訪問.系統中使用Membership類對使用者進行身分識別驗證.