反覆項目 #2 – 美化應用程式外觀 (VB)

發行項
09/30/2024

由 Microsoft 提供

下載程式碼

在這個反覆項目中，我們修改預設 ASP.NET MVC 檢視主版頁面和串聯樣式表，以改善應用程式的外觀。

建置連絡人管理 ASP.NET MVC 應用程式 (VB)

在此系列教學課程中，我們會從頭到尾建置整個連絡人管理應用程式。 Contact Manager 應用程式可讓您儲存連絡人資訊 (姓名、電話號碼和電子郵件地址) 以取得人員名單。

我們會透過多個反覆項目建置應用程式。每次反覆運算時，我們會逐步改善應用程式。這種多次反覆運算方法的目標是，讓您能夠瞭解每次變更的原因。

反覆項目 #1 – 建立應用程式在第一個反覆項目中，我們以最簡單的方式建立 Contact Manager。我們新增對基本資料庫作業的支援：建立、讀取、更新和刪除 (CRUD)。
反覆項目 #2 – 美化應用程式外觀。在這個反覆項目中，我們修改預設 ASP.NET MVC 檢視主版頁面和串聯樣式表，以改善應用程式的外觀。
反覆項目 #3 – 新增表單驗證。在第三個反覆項目中，我們新增基本表單驗證。我們要防止人員提交未完成表單必填欄位的表單。我們也驗證電子郵件地址和電話號碼。
反覆項目 #4 – 讓應用程式鬆散耦合。在這個第四個反覆項目中，我們利用好幾種軟體設計模式，更輕鬆地維護和修改 Contact Manager 應用程式。例如，我們將應用程式重構為使用存放庫模式和相依性插入模式。
反覆項目 #5 – 建立單元測試。在第五個反覆項目中，我們會藉由新增單元測試，更容易維護和修改應用程式。我們會模擬資料模型類別，並為控制器和驗證邏輯建置單元測試。
反覆項目 #6 – 使用測試導向的開發。在這第六個反覆項目中，我們會先撰寫單元測試，再針對單元測試撰寫程式碼，藉此將新功能新增至應用程式。在此反覆項目中，我們會新增連絡人群組。
反覆項目 #7 – 新增 Ajax 功能性。在第七個反覆項目中，我們會藉由新增對 Ajax 的支援來改善應用程式的回應性和效能。

此反覆項目

此反覆項目的目標是改善 Contact Manager 應用程式的外觀。目前，Contact Manager 使用預設 ASP.NET MVC 檢視主版頁面和階層式樣式表 (請參閱圖 1)。這些看起來並不糟糕，但我不希望 Contact Manager 看起來就像所有其他 ASP.NET MVC 網站。我想用自訂檔案取代這些檔案。

圖 01：ASP.NET MVC 應用程式的預設外觀 (按一下以檢視完整大小的圖片)

在此反覆項目中，我討論兩種方法來改善應用程式的視覺設計。首先，我示範如何利用 ASP.NET MVC 設計資源庫來下載免費的 ASP.NET MVC 設計範本。 ASP.NET MVC 設計資源庫可讓您建立專業 Web 應用程式，而不需要進行任何工作。

我決定不使用 Contact Manager 應用程式的 ASP.NET MVC 設計資源庫的範本。而是採用一家專業設計公司建立的自訂設計。在本教學課程的第二部分中，我會說明如何與專業設計公司合作，以建立最終 ASP.NET MVC 設計。

圖 02：ASP.NET MVC 設計資源庫 (按一下以檢視完整大小的圖片)

當我撰寫本教學課程時，資源庫中最受歡迎的設計是由 David Hauser 命名為 October 的設計。您可以完成下列步驟，將此設計用於 ASP.NET MVC 專案：

按一下 [下載] 按鈕，將 October.zip 檔案下載到您的電腦。
以滑鼠右鍵按鍵按兩一下載 October.zip 檔案，然後按一下 [解除鎖定] 按鈕 (請參閱圖 3)。
將檔案解壓縮到名為 October 的資料夾。
從 October 資料夾中包含的 DesignTemplate 資料夾中選擇所有檔案，以滑鼠右鍵按一下這些檔案，然後選取功能表選項 [複製]。
以滑鼠右鍵按一下 Visual Studio 方案總管視窗中的 ContactManager 專案節點，然後選取功能表選項 [貼上] (請參閱圖 4)。
選取 Visual Studio 功能表選項 [編輯]、[尋找和取代]、[快速取代]，並將 [MyProjectName] 替換為 ContactManager (請參閱圖 5)。

圖 03：解除鎖定從 Web 下載的檔案 (按一下以檢視完整大小的圖片)

圖 04：方案總管中的覆寫檔案 (按一下以檢視完整大小的圖片)

圖 05：將 [ProjectName] 取代為 ContactManager (按一下以檢視完整大小的圖片)

完成這些步驟之後，您的 Web 應用程式將會使用新的設計。圖 6 中的頁面說明 Contact Manager 應用程式與 October 設計的外觀。

圖 06：ContactManager 與 October 範本 (按一下以檢視完整大小的圖片)

建立自訂 ASP.NET MVC 設計

ASP.NET MVC 設計資源庫有各種不同的設計樣式選項。資源庫為您提供了一種輕鬆的方式來自訂 ASP.NET MVC 應用程式的外觀。當然，資源庫擁有完全免費的強大優勢。

不過，您可能需要為您的網站建立完全獨特的設計。在此情況下，與網站設計公司合作是合理的。我決定針對 Contact Manager 應用程式的設計採取這種方法。

我從反覆項目 #1 壓縮 Contact Manager，並將專案傳送給設計公司。他們沒有 Visual Studio (很可惜！)，但這並不構成問題。他們可以從 https://www.asp.net 網站免費下載 Microsoft Visual Web Developer，並在 Visual Web Developer 中開啟 Contact Manager 應用程式。在幾天內，他們在圖 7 中製作了設計。

圖 07：ASP.NET MVC Contact Manager 設計(按一下以檢視完整大小的圖片)

新的設計包含兩個主要檔案：新的階層式樣式表檔案和新的檢視主版頁面檔案。檢視主版頁面包含 ASP.NET MVC 應用程式中檢視的版面配置和共用內容。例如，檢視主版頁面包含圖 7 中顯示的頁首、導覽索引標籤和頁尾。我使用設計公司的新 Site.Master 檔案，在 Views\Shared 資料夾中覆寫現有的 Site.Master 檢視主版頁面，

設計公司還建立了新的階層式樣式表和一組影像。我將這些新檔案放在 [內容] 資料夾中，並覆寫現有的 Site.css 檔案。您應該將所有靜態內容放在 Content 資料夾中。

請注意，Contact Manager 的新設計包含編輯和刪除連絡人的影像。 [編輯] 和 [刪除] 影像會出現在 HTML 連絡人資料表中的每個連絡人旁邊。

最初，這些連結是使用 HTML.ActionLink() 協助程式轉譯的，如下所示：

<td>
    <%= Html.ActionLink("Edit", "Edit", new { id=item.Id  }) %> |
    <%= Html.ActionLink("Delete", "Delete", new { id=item.Id  }) %> 
</td>

Html.ActionLink() 方法不支援影像 (基於安全性考慮，HTML 方法會將連結文字編碼)。因此，我以 Url.Action() 的呼叫取代了對 Html.ActionLink() 的呼叫，如下：

<td class="actions edit">
    <a href='<%= Url.Action("Edit", new {id=item.Id}) %>'><img src="../../Content/Edit.png" alt="Edit" /></a>
</td>
<td class="actions delete">
    <a href='<%= Url.Action("Delete", new {id=item.Id}) %>'><img src="../../Content/Delete.png" alt="Delete" /></a>
</td>

Html.ActionLink() 方法會轉譯整個 HTML 超連結。另一方面，Url.Action() 方法只會轉譯沒有標籤的<> URL。

此外，請注意，新的設計同時包含已選取和未選取的索引標籤。例如，在圖 8 中，已選取 [建立新連絡人] 索引標籤，而且未選取 [我的連絡人] 索引標籤。

圖 08：已選取和未選取的索引標籤 (按一下以檢視完整大小的圖片)

為了支援轉譯已選取和未選取的索引標籤，我建立了名為 MenuItemHelper 的自訂 HTML 協助程式。這個協助程式方法會根據目前控制器和動作是否對應至傳遞給協助程式的控制器和動作名稱，轉譯 <li> 標籤或 <li class="selected"> 標籤。 MenuItemHelper 的程式碼包含在清單 1 中。

清單 1 - Helpers\MenuItemHelper.vb

Public Module MenuItemHelper

   <System.Runtime.CompilerServices.Extension> _
   Function MenuItem(ByVal helper As HtmlHelper, ByVal linkText As String, ByVal actionName As String, ByVal controllerName As String) As String
        Dim currentControllerName As String = helper.ViewContext.RouteData.Values("controller")
        Dim currentActionName As String = helper.ViewContext.RouteData.Values("action")

        Dim builder = New TagBuilder("li")

        ' Add selected class
        If currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) AndAlso currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase) Then
            builder.AddCssClass("selected")
        End If

        ' Add link
        builder.InnerHtml = helper.ActionLink(linkText, actionName, controllerName)

        ' Render Tag Builder
        Return builder.ToString(TagRenderMode.Normal)
   End Function

End Module

MenuItemHelper 會在內部使用 TagBuilder 類別來建置 <li> HTML 標籤。 TagBuilder 類別是一個非常實用的公用程式類別，每當您需要建置新的 HTML 標籤時，就可以使用。它包含新增屬性、新增 CSS 類別、產生識別碼，以及修改標籤內部 HTML 的方法。

摘要

在此反覆項目中，我們已改善 ASP.NET MVC 應用程式的視覺設計。首先，您已認識 ASP.NET MVC 設計資源庫。您已瞭解如何從 ASP.NET MVC 設計資源庫下載免費設計範本，用於 ASP.NET MVC 應用程式。

接下來，我們討論了如何修改預設階層式樣式表檔案和主要檢視頁面檔案，以建立自訂設計。為了支援新的設計，我們必須對 Contact Manager 應用程式進行一些次要變更。例如，我們新增了名為 MenuItemHelper 的新 HTML 協助程式，以顯示已選取和未選取的索引標籤。

在下一個反覆項目中，我們會處理非常重要的驗證主題。我們會將驗證碼新增至應用程式，讓使用者無法在不提供所需值 (例如人員的名字和姓氏) 的情況下建立新連絡人。

上一個下一個

共用方式為

反覆項目 #2 – 美化應用程式外觀 (VB)

建置連絡人管理 ASP.NET MVC 應用程式 (VB)

此反覆項目

建立自訂 ASP.NET MVC 設計

摘要

意見反應

其他資源