UI 和導覽

發行項
07/13/2023

本教學課程系列將教導您使用 ASP.NET 4.5 和 Microsoft Visual Studio Express 2013 for Web 建置 ASP.NET Web Forms應用程式的基本概念。具有C# 原始程式碼的Visual Studio 2013專案隨附于本教學課程系列。

在本教學課程中，您將修改預設 Web 應用程式的 UI，以支援 Wingtip Toys 商店前端應用程式的功能。此外，您也會新增簡單和資料系結導覽。本教學課程是以上一個教學課程「建立資料存取層」為基礎，並屬於 Wingtip Toys 教學課程系列。

您將學到什麼：

如何變更 UI 以支援 Wingtip Toys 商店前端應用程式的功能。
如何設定 HTML5 元素以包含頁面流覽。
如何建立資料驅動控制項以巡覽至特定產品資料。
如何從使用 Entity Framework Code First 建立的資料庫顯示資料。

ASP.NET Web Forms可讓您為 Web 應用程式建立動態內容。每個 ASP.NET 網頁的建立方式與靜態 HTML 網頁類似， (不包含伺服器型處理) 的頁面，但 ASP.NET 網頁包含額外的元素，ASP.NET 辨識及處理頁面執行時產生 HTML。

使用靜態 HTML 頁面 (.htm 或 .html檔案) ，伺服器會讀取檔案並依原狀傳送至瀏覽器來完成 Web 要求。相反地，當有人要求 ASP.NET 網頁 (.aspx 檔案) 時，頁面會在網頁伺服器上以程式的形式執行。當頁面執行時，它可以執行您的網站所需的任何工作，包括計算值、讀取或寫入資料庫資訊，或呼叫其他程式。作為其輸出，頁面會動態產生標記 (，例如 HTML) 中的元素，並將此動態輸出傳送至瀏覽器。

修改 UI

您將修改 Default.aspx 頁面，繼續進行本教學課程系列。您將修改預設範本用來建立應用程式的 UI。建立任何Web Form應用程式時，您將會執行的修改類型很常見。您將藉由變更標題、取代某些內容，以及移除不需要的預設內容來完成此動作。

開啟或切換至 Default.aspx 頁面。
如果頁面出現在 [設計 視圖] 中，請切換至 [來源 ] 檢視。

在指示詞頁面 @Page 頂端，將 Title 屬性變更為「Welcome」，如下方黃色所示。

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

此外，在 Default.aspx 頁面上，取代標籤中包含的 <asp:Content> 所有預設內容，讓標記如下所示。

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <h1><%: Title %>.</h1>
        <h2>Wingtip Toys can help you find the perfect gift.</h2>
        <p class="lead">We're all about transportation toys. You can order 
                any of our toys today. Each toy listing has detailed 
                information to help you choose the right toy.</p>
</asp:Content>

從 [檔案] 功能表中選取 [儲存 Default.aspx]，以儲存Default.aspx頁面。

產生的 Default.aspx 頁面會顯示如下：

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <h1><%: Title %>.</h1>
        <h2>Wingtip Toys can help you find the perfect gift.</h2>
        <p class="lead">We're all about transportation toys. You can order 
                any of our toys today. Each toy listing has detailed 
                information to help you choose the right toy.</p>
</asp:Content>

在此範例中，您已設定 Title 指示詞的 @Page 屬性。當 HTML 顯示在瀏覽器中時，伺服器程式碼 <%: Page.Title %> 會解析為屬性中包含的 Title 內容。

範例頁面包含構成 ASP.NET 網頁的基本元素。此頁面包含您在 HTML 頁面中可能擁有的靜態文字，以及 ASP.NET 特有的元素。 Default.aspx頁面中所包含的內容將會與主版頁面內容整合，本教學課程稍後將加以說明。

@Page 指導

ASP.NET Web Forms通常包含指示詞，可讓您指定頁面的頁面屬性和組態資訊。指示詞是由 ASP.NET 用來做為如何處理頁面的指示，但不會轉譯為傳送至瀏覽器之標記的一部分。

最常使用的指示詞是 @Page 指示詞，可讓您指定頁面的許多組態選項，包括下列專案：

頁面中程式碼的伺服器程式設計語言，例如 C# 。
頁面是否為頁面，其中直接在頁面中具有伺服器程式碼的頁面，這稱為單一檔案頁面，或者它是否為在個別類別檔案中具有程式碼的頁面，這稱為程式碼後置頁面。
頁面是否有相關聯的主版頁面，因此應該視為內容頁面。
偵錯和追蹤選項。

如果您未在頁面中包含 @Page 指示詞，或指示詞不包含特定設定，則會從 Web.config組 態檔或 Machine.config 組態檔繼承設定。 Machine.config檔案會為電腦上執行的所有應用程式提供額外的組態設定。

注意

Machine.config也會提供所有可能組態設定的詳細資料。

Web 服務器控制項

在大部分 ASP.NET Web Forms應用程式中，您將新增控制項，讓使用者能夠與頁面互動，例如按鈕、文字方塊、清單等等。這些網頁伺服器控制項類似于 HTML 按鈕和輸入元素。不過，它們會在伺服器上處理，可讓您使用伺服器程式碼來設定其屬性。這些控制項也會引發您可以在伺服器程式碼中處理的事件。

伺服器控制項會使用特殊語法，ASP.NET 在頁面執行時辨識。 ASP.NET 伺服器控制項的標記名稱會以前置 asp: 詞開頭。這可讓 ASP.NET 辨識及處理這些伺服器控制項。如果控制項不是.NET Framework的一部分，前置詞可能會不同。除了 asp: 前置詞之外，ASP.NET 伺服器控制項也包含 runat="server" 屬性，以及 ID 可用來在伺服器程式碼中參考控制項的。

當頁面執行時，ASP.NET 識別伺服器控制項，並執行與這些控制項相關聯的程式碼。許多控制項會在瀏覽器中顯示時，將某些 HTML 或其他標記轉譯成頁面。

伺服器程式碼

大部分 ASP.NET Web Forms應用程式都包含在處理頁面時于伺服器上執行的程式碼。如上所述，伺服器程式碼可以用來執行各種動作，例如將資料新增至 ListView 控制項。 ASP.NET 支援在伺服器上執行的許多語言，包括 C#、Visual Basic、J# 和其他語言。

ASP.NET 支援兩個模型來撰寫網頁的伺服器程式碼。在單一檔案模型中，頁面的程式碼位於腳本元素中，其中開頭標記包含 runat="server" 屬性。或者，您可以在另一個類別檔案中建立頁面的程式碼，這稱為程式碼後置模型。在此情況下，ASP.NET Web Forms頁面通常不包含任何伺服器程式碼。相反地 @Page ，指示詞會包含將 .aspx 頁面與其相關聯程式碼後置檔案連結的資訊。

CodeBehind指示詞中包含的 @Page 屬性會指定個別類別檔案的名稱，而 Inherits 屬性會指定對應至頁面之程式碼後置檔案中的類別名稱。

更新主版頁面

在 ASP.NET Web Forms 中，主要頁面可用來建立應用程式中頁面的一致性版面配置。單一主要頁面可為應用程式中的所有頁面 (或頁面群組) 定義您想要的外觀與風格及標準行為。接著，您可以建立包含您想要顯示之內容的個別內容頁面，如上所述。當使用者要求內容頁面時，ASP.NET 會將這些頁面與主要頁面合併，以產生結合主要頁面之配置與內容頁面之內容的輸出。

新網站需要單一標誌才能顯示在每一頁上。若要新增此標誌，您可以在主版頁面上修改 HTML。

在 [方案總管] 中，尋找並開啟 Site.Master 頁面。
如果頁面位於 [設計 視圖] 中，請切換至 [來源 檢視]。

修改 或新增 以黃色醒目提示的標記來更新主版頁面：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WingtipToys.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Wingtip Toys</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/">Wingtip Toys</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Register">Register</a></li>
                                <li><a runat="server" href="~/Account/Login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>
        <div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image  ID="Image1" runat="server" ImageUrl="~/Images/logo.jpg" BorderStyle="None" />
            </a>  
            <br />  
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - Wingtip Toys</p>
            </footer>
        </div>
    </form>
</body>
</html>

此 HTML 會從 Web 應用程式的Images 資料夾顯示名為logo.jpg的影像，您稍後會新增此影像。當使用主版頁面的頁面顯示在瀏覽器中時，將會顯示標誌。如果使用者按一下標誌，使用者將會流覽回 Default.aspx 頁面。 HTML 錨點標籤 <a> 會包裝圖像伺服器控制項，並允許影像包含在連結中。 href錨點標籤的屬性會將網站的根「 ~/ 」指定為連結位置。根據預設，當使用者流覽至網站的根目錄時，會顯示 Default.aspx 頁面。影像<asp:Image> 伺服器控制項包含加法屬性，例如 BorderStyle ，會在瀏覽器中顯示時轉譯為 HTML。

主版頁面

主版頁面是副檔名為 .master (的 ASP.NET 檔案，例如 Site.Master) 預先定義的版面配置，其中包含靜態文字、HTML 元素和伺服器控制項。主版頁面是由特殊 @Master 指示詞所識別，取代 @Page 用於一般 .aspx 頁面的指示詞。

除了 @Master 指示詞之外，主版頁面也包含頁面的所有最上層 HTML 元素，例如 html 、 head 和 form 。例如，在上面新增的主版頁面上，您會使用 HTML table 做為版面配置、公司標誌、 img 靜態文字和伺服器控制項的元素，以處理網站的通用成員資格。您可以使用任何 HTML 和任何 ASP.NET 元素作為主版頁面的一部分。

除了出現在所有頁面上的靜態文字和控制項之外，主版頁面也包含一或多個 ContentPlaceHolder 控制項。這些預留位置控制項會定義會出現可取代內容的區域。接著，可取代的內容會定義在內容頁面中，例如使用內容伺服器控制項的Default.aspx。

新增影像檔

上述參考的標誌影像以及所有產品影像都必須新增至 Web 應用程式，以便在瀏覽器中顯示專案時看到它們。

從 MSDN 範例網站下載：

消費者入門搭配 ASP.NET 4.5 Web Form 和 Visual Studio 2013 - Wingtip Toys (C#)

下載包含 WingtipToys-Assets 資料夾中用來建立範例應用程式的資源。

如果您尚未這麼做，請從 MSDN 範例網站使用上述連結下載壓縮的範例檔案。
下載之後，開啟.zip檔案，並將內容複寫到您電腦上的本機資料夾。
尋找並開啟 WingtipToys-Assets 資料夾。
藉由拖放，將目錄資料夾從本機資料夾複製到 Visual Studio方案總管中的 Web 應用程式專案的根目錄。
接下來，以滑鼠右鍵按一下方案總管中的WingtipToys專案，然後選取 [新增資料夾 > ]，以建立名為Images的新資料夾。
將logo.jpg檔案從檔案總管的 WingtipToys-Assets資料夾複製到 Visual Studio方案總管Web 應用程式專案的Images資料夾。
如果您看不到新檔案，請按一下方案總管頂端的 [顯示所有檔案] 選項來更新檔案清單。

方案總管現在會顯示更新的專案檔。

新增頁面

將流覽新增至 Web 應用程式之前，您必須先新增兩個新頁面，以流覽至該頁面。稍後在本教學課程系列中，您將在這些新頁面上顯示產品和產品詳細資料。

在方案總管中，以滑鼠右鍵按一下WingtipToys，按一下 [新增]，然後按一下 [新增專案]。
[ 加入新項目 ] 對話方塊隨即出現。
選取左側的Visual C# - >Web範本群組。然後，從中間清單中選取 [具有主版頁面的 Web 表單 ]，並將其命名為 ProductList.aspx。
選取 [Site.Master ]，將主版頁面附加至新建立的 .aspx 頁面。
遵循下列相同步驟，新增名為 ProductDetails.aspx 的其他頁面。

更新啟動程式

Visual Studio 2013專案範本會使用Bootstrap、Twitter 所建立的配置和主題架構。 Bootstrap 會使用 CSS3 來提供回應式設計，這表示版面配置可以動態適應不同的瀏覽器視窗大小。您也可以使用 Bootstrap 的主題功能，輕鬆地影響應用程式的外觀和風格變更。根據預設，Visual Studio 2013中的 ASP.NET Web 應用程式範本會包含 Bootstrap 作為 NuGet 套件。

在本教學課程中，您將藉由取代 Bootstrap CSS 檔案來變更 Wingtip Toys 應用程式的外觀和風格。

在方案總管中，開啟[內容]資料夾。
以滑鼠右鍵按一下 bootstrap.css 檔案，並將其重新命名為 bootstrap-original.css。
將 bootstrap.min.css 重新命名為 bootstrap-original.min.css。
在方案總管中，以滑鼠右鍵按一下[內容]資料夾，然後選取[檔案總管中的 [開啟資料夾]。
隨即會顯示檔案總管。您會將下載的啟動程式 CSS 檔案儲存到此位置。
在瀏覽器中，前往 https://bootswatch.com/3/。
捲動瀏覽器視窗，直到您看到 Cerulean 主題為止。
將 bootstrap.css 檔案和 bootstrap.min.css 檔案下載到 Content 資料夾。使用您先前開啟之檔案總管視窗中所顯示之內容資料夾的路徑。
在方案總管頂端的Visual Studio中，選取 [顯示所有檔案] 選項，以顯示 [內容] 資料夾中的新檔案。

您會在 [內容 ] 資料夾中看到兩個新的 CSS 檔案，但請注意每個檔案名旁的圖示呈現灰色。這表示檔案尚未新增至專案。
以滑鼠右鍵按一下 bootstrap.css 和 bootstrap.min.css 檔案，然後選取 [ 包含在專案中]。
當您在本教學課程稍後執行 Wingtip Toys 應用程式時，將會顯示新的 UI。

注意

ASP.NET Web 應用程式範本會使用專案根目錄的 Bundle.config 檔案來儲存 Bootstrap CSS 檔案的路徑。

變更 Site.Master 頁面中未排序的導覽清單元素，即可修改應用程式中每個頁面的預設流覽。

在方案總管中，找出並開啟Site.Master頁面。

將醒目提示的其他導覽連結新增至未排序清單，如下所示：

<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/About">About</a></li>
    <li><a runat="server" href="~/Contact">Contact</a></li>
    <li><a runat="server" href="~/ProductList">Products</a></li>
</ul>

如您在上述 HTML 中所見，您已修改每一行專案 <li> ，其中包含具有連結 href 屬性的錨點標記 <a> 。每個 href 都指向 Web 應用程式中的頁面。在瀏覽器中，當使用者按一下其中一個連結 (例如 Products) 時，他們會流覽至 (中包含的 href 頁面，例如 ProductList.aspx) 。您將在本教學課程結束時執行應用程式。

注意

磚 () ~ 字元是用來指定 href 路徑從專案的根目錄開始。

接下來，您將新增控制項以顯示資料庫中的所有類別。每個類別都會作為 ProductList.aspx 頁面的連結。當使用者按一下瀏覽器中的類別連結時，他們會流覽至產品頁面，並只查看與所選類別相關聯的產品。

您將使用 ListView 控制項來顯示資料庫中所包含的所有類別。若要將 ListView 控制項新增至主版頁面：

在Site.Master頁面中，在包含 id="TitleContent" 您稍早新增的 <div> 元素後面新增下列反白 <div> 顯示的專案：

<div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image  ID="Image1" runat="server" ImageUrl="~/img/logo.jpg" BorderStyle="None" />
            </a>  
            <br />  
        </div>
        <div id="CategoryMenu" style="text-align: center">       
            <asp:ListView ID="categoryList"  
                ItemType="WingtipToys.Models.Category" 
                runat="server"
                SelectMethod="GetCategories" >
                <ItemTemplate>
                    <b style="font-size: large; font-style: normal">
                        <a href="/ProductList.aspx?id=<%#: Item.CategoryID %>">
                        <%#: Item.CategoryName %>
                        </a>
                    </b>
                </ItemTemplate>
                <ItemSeparatorTemplate>  |  </ItemSeparatorTemplate>
            </asp:ListView>
        </div>

此程式碼會顯示資料庫中的所有類別。 ListView控制項會將每個類別名稱顯示為連結文字，並包含ProductList.aspx頁面的連結，其中包含類別的查詢字串值 ID 。藉由在ListView控制項中設定 ItemType 屬性，即可在節點內 ItemTemplate 使用資料系結運算式 Item ，而且控制項會變成強型別。您可以使用 IntelliSense 來選取物件的詳細資料 Item ，例如指定 CategoryName 。此程式碼包含在標記資料系結運算式的容器 <%#: %> 內。藉由將 (：) 新增至前置詞的 <%# 結尾，資料系結運算式的結果會以 HTML 編碼。當結果為 HTML 編碼時，您的應用程式會更妥善地受到保護，以防止跨網站腳本插入 (XSS) 和 HTML 插入式攻擊。

注意

秘訣

當您在開發期間輸入程式碼時，可以確定找到物件的有效成員，因為強型別的資料控制項會根據 IntelliSense 顯示可用的成員。當您輸入程式碼時，IntelliSense 會提供內容適當的程式碼選擇，例如屬性、方法和物件。

在下一個步驟中，您將實作 GetCategories 方法來擷取資料。

將資料控制項連結至資料庫

您必須先將資料控制項連結到資料庫，才能在資料控制項中顯示資料。若要建立連結，您可以修改 Site.Master.cs 檔案背後的程式碼。

在方案總管中，以滑鼠右鍵按一下[Site.Master]頁面，然後按一下 [檢視程式碼]。 Site.Master.cs檔案會在編輯器中開啟。

在 Site.Master.cs 檔案的開頭附近，新增兩個額外的命名空間，讓所有包含的命名空間都如下所示：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Linq;
using WingtipToys.Models;

在事件處理常式之後 Page_Load 新增反白 GetCategories 顯示的方法，如下所示：

protected void Page_Load(object sender, EventArgs e)
{

}

public IQueryable<Category> GetCategories()
{
  var _db = new WingtipToys.Models.ProductContext();
  IQueryable<Category> query = _db.Categories;
  return query;
}

在瀏覽器中載入任何使用主版頁面的頁面時，就會執行上述程式碼。 ListView您稍早在本教學課程中新增的控制項 (名為「categoryList」) 會使用模型系結來選取資料。在控制項的標記中 ListView ，將控制項的 SelectMethod 屬性設定為 GetCategories 方法，如下所示。 ListView控制項會在頁面生命週期的適當時間呼叫 GetCategories 方法，並自動系結傳回的資料。您將在下一個教學課程中深入瞭解系結資料。

執行應用程式並建立資料庫

稍早在本教學課程系列中，您已建立名為「ProductDatabaseInitializer」 (初始化運算式類別) ，並在 global.asax.cs 檔案中指定此類別。 Entity Framework 會在第一次執行應用程式時產生資料庫，因為 Application_Startglobal.asax.cs 檔案中包含的方法會呼叫初始化運算式類別。初始化運算式類別會使用您稍早在本教學課程系列中新增的模型類別 (Category 和 Product) 來建立資料庫。

在方案總管中，以滑鼠右鍵按一下Default.aspx頁面，然後選取 [設定為起始頁]。
在 Visual Studio 中，按 F5。
在第一次執行期間設定所有專案需要一些時間。

當您執行應用程式時，將會編譯應用程式，並將名為 wingtiptoys.mdf 的資料庫建立于 App_Data 資料夾中。在瀏覽器中，您會看到類別導覽功能表。從資料庫擷取類別來產生此功能表。在下一個教學課程中，您將實作導覽。
關閉瀏覽器以停止執行中的應用程式。

檢閱資料庫

開啟 Web.config 檔案，並查看連接字串區段。您可以看到 AttachDbFilename 連接字串中的值指向 DataDirectory Web 應用程式專案的。此值 |DataDirectory| 是代表專案中 App_Data 資料夾的保留值。此資料夾是從實體類別建立的資料庫所在的位置。

<connectionStrings>
    <add name="DefaultConnection" 
         connectionString="Data Source=(LocalDb)\MSSQLLocalDB;Initial Catalog=aspnet-WingtipToys-20120302100502;Integrated Security=True"
         providerName="System.Data.SqlClient" />
    <add name="WingtipToys" 
         connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\wingtiptoys.mdf;Integrated Security=True"
         providerName="System.Data.SqlClient " />
  </connectionStrings>

注意

如果看不到App_Data資料夾，或資料夾是空的，請選取 [重新整理] 圖示，然後選取方案總管視窗頂端的 [顯示所有檔案] 圖示。可能需要展開方案總管視窗的寬度，才能顯示所有可用的圖示。

現在，您可以使用 [伺服器總管] 視窗來檢查wingtiptoys.mdf資料庫檔案中包含的資料。

展開 App_Data 資料夾。如果看不到 App_Data 資料夾，請參閱上述附注。
如果看不到 wingtiptoys.mdf資料庫檔案，請選取 [重新整理] 圖示，然後選取方案總管視窗頂端的 [顯示所有檔案] 圖示。
以滑鼠右鍵按一下 wingtiptoys.mdf 資料庫檔案，然後選取 [ 開啟]。
[伺服器 總管] 隨即顯示。
展開 [資料表] 資料夾。
以滑鼠右鍵按一下 Products資料表，然後選取 [顯示資料表資料]。
[產品]資料表隨即顯示。
此檢視可讓您手動查看和修改 Products 資料表中的資料。
關閉 [產品 ] 資料表視窗。
在 [伺服器總管]中，再次以滑鼠右鍵按一下 Products 資料表，然後選取 [ 開啟資料表定義]。
[產品] 資料表的資料設計隨即顯示。
在 [T-SQL ] 索引標籤中，您會看到用來建立資料表的 SQL DDL 語句。您也可以使用 [ 設計 ] 索引標籤中的 UI 來修改架構。
在 [伺服器總管] 中，以滑鼠右鍵按一下 WingtipToys 資料庫，然後選取 [ 關閉連線]。
藉由從 Visual Studio 中斷連結資料庫，資料庫架構將可在本教學課程系列稍後修改。
返回方案總管，方法是選取[伺服器總管] 視窗底部的[方案總管] 索引標籤。

總結

在本系列教學課程中，您已新增一些基本的 UI、圖形、頁面和流覽。此外，您執行了 Web 應用程式，此應用程式會從您在上一個教學課程中新增的資料類別建立資料庫。您也可以直接檢視資料庫，以檢視資料庫的 Products 資料表內容。在下一個教學課程中，您將顯示資料庫中的資料項目和詳細資料。

其他資源

程式設計 ASP.NET Web Pages簡介
 ASP.NET 網頁伺服器控制項概觀
 CSS 教學課程

上一個下一個

UI 和瀏覽

您將學到什麼：

修改 UI

@Page 指導

Web 服務器控制項

伺服器程式碼

更新主版頁面

主版頁面

新增影像檔

從 MSDN 範例網站下載：

新增頁面

更新啟動程式

修改預設導覽

新增資料控制項以顯示導覽資料

將資料控制項連結至資料庫

執行應用程式並建立資料庫

檢閱資料庫

總結

其他資源

意見反應

意見反應

其他資源