UI 和导航

作者 :Erik Reitan

下载 Wingtip Toys 示例项目 (C#) 下载电子书 (PDF)

本教程系列将介绍如何使用 ASP.NET 4.5 和 Microsoft Visual Studio Express 2013 for Web 生成 ASP.NET Web Forms应用程序。 包含 C# 源代码的Visual Studio 2013项目随本教程系列一起提供。

在本教程中,你将修改默认 Web 应用程序的 UI 以支持 Wingtip Toys Store Front 应用程序的功能。 此外,你将添加简单和数据绑定导航。 本教程基于上一教程“创建数据访问层”,是 Wingtip Toys 系列教程的一部分。

学习内容:

  • 如何更改 UI 以支持 Wingtip Toys 商店前端应用程序的功能。
  • 如何配置 HTML5 元素以包含页面导航。
  • 如何创建数据驱动控件以导航到特定产品数据。
  • 如何首先显示使用 Entity Framework Code 创建的数据库中的数据。

ASP.NET Web Forms允许为 Web 应用程序创建动态内容。 每个 ASP.NET 网页都以类似于静态 HTML 网页的方式创建, (不包含基于服务器的处理) 的页面,但 ASP.NET 网页包含额外的元素,ASP.NET 识别和处理页面运行时生成 HTML。

使用静态 HTML 页 (.htm.html文件) ,服务器通过读取文件并将其按原样发送到浏览器来实现 Web 请求。 相反,当有人请求 ASP.NET 网页 (.aspx 文件) 时,页面将在 Web 服务器上作为程序运行。 当页面正在运行时,它可以执行网站所需的任何任务,包括计算值、读取或写入数据库信息或调用其他程序。 作为其输出,页面动态生成标记 (,例如 HTML) 中的元素,并将此动态输出发送到浏览器。

修改 UI

你将通过修改 Default.aspx 页面继续学习本教程系列。 你将修改已由用于创建应用程序的默认模板建立的 UI。 创建任何Web Forms应用程序时,你所做的修改类型是典型的。 你将通过更改标题、替换某些内容以及删除不需要的默认内容来执行此操作。

  1. 打开或切换到 “默认.aspx ”页。

  2. 如果页面显示在 “设计 ”视图中,请切换到 “源 ”视图。

  3. @Page 指令中的页面顶部,将 Title 属性更改为“欢迎”,如下面黄色突出显示。

    <%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>
    
  4. 此外,在 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>
    
  5. 通过从“文件”菜单中选择“保存默认值”,保存默认值.aspx.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 指令,它允许你为页面指定许多配置选项,包括以下内容:

  1. 页面中代码的服务器编程语言,例如 C# 。
  2. 页面是直接在页面中具有服务器代码的页面,这称为单文件页,还是它是一个在单独的类文件中具有代码的页面,这称为代码隐藏页。
  3. 页面是否具有关联的母版页,因此应被视为内容页。
  4. 调试和跟踪选项。

如果未在页面中包括 @Page 指令,或者该指令不包含特定设置,则会从 Web.config 配置文件或 Machine.config 配置文件继承设置。 Machine.config文件为计算机上运行的所有应用程序提供其他配置设置。

备注

Machine.config还提供所有可能的配置设置的详细信息。

Web 服务器控件

在大多数 ASP.NET Web Forms应用程序中,你将添加允许用户与页面交互的控件,例如按钮、文本框、列表等。 这些 Web 服务器控件类似于 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 窗体中,母版页允许你在应用程序中创建一致的页面布局。 可以使用单个母版页定义应用程序中所有页(或一组页)的外观和标准行为。 然后,可以创建包含要显示的内容的单个内容页面,如上所述。 当用户请求内容页时,ASP.NET 会将内容页与母版页合并,以生成将母版面布局与内容页中的内容相结合的输出。

新网站需要一个徽标才能在每个页面上显示。 若要添加此徽标,可以修改母版页上的 HTML。

  1. 解决方案资源管理器中,查找并打开 Site.Master 页。

  2. 如果页面位于 “设计 ”视图中,请切换到 “源 ”视图。

  3. 通过 修改或添加 突出显示为黄色的标记来更新母版页:

    <%@ 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 元素,例如htmlhead,和form。 例如,在上面添加的母版页上,对布局使用 HTML tableimg 公司徽标、静态文本和服务器控件的元素来处理网站的常见成员身份。 可以将任何 HTML 和任何 ASP.NET 元素用作母版页的一部分。

除了所有页面上显示的静态文本和控件外,母版页还包括一个或多个 ContentPlaceHolder 控件。 这些占位符控件定义将显示可替换内容的区域。 反过来,可以使用内容服务器控件在内容页中定义可替换的内容,例如 Default.aspx

添加图像文件

上面引用的徽标图像以及所有产品图像都必须添加到 Web 应用程序,以便在项目显示在浏览器中时看到它们。

从 MSDN 示例网站下载:

入门 ASP.NET 4.5 Web Forms和Visual Studio 2013 - Wingtip Toys (C#)

下载内容包括 WingtipToys-Assets 文件夹中用于创建示例应用程序的资源。

  1. 如果尚未这样做,请使用上述链接从 MSDN 示例站点下载压缩的示例文件。

  2. 下载后,打开.zip文件,并将内容复制到计算机上的本地文件夹。

  3. 查找并打开 WingtipToys-Assets 文件夹。

  4. 通过拖放,将目录文件夹从本地文件夹复制到 Visual Studio 解决方案资源管理器中的 Web 应用程序项目的根目录。

    UI 和导航 - 复制文件

  5. 接下来,右键单击解决方案资源管理器中的 WingtipToys 项目并选择“添加新>文件夹”,创建名为 Images 的新文件夹

  6. 文件资源管理器wingtipToys-Assets 文件夹中的logo.jpg文件复制到 Visual Studio 解决方案资源管理器 Web 应用程序项目的 Images 文件夹。

  7. 单击解决方案资源管理器顶部的“显示所有文件”选项,更新文件列表(如果未看到新文件)。

    解决方案资源管理器现在显示更新的项目文件。

    “解决方案资源管理器”窗口的屏幕截图,其中打开了“图像”文件夹,其中包含名为logo.jpg的已更新项目文件。

添加页面

在将导航添加到 Web 应用程序之前,首先将添加两个新页面,然后导航到该页面。 本教程系列的后面部分,你将在这些新页面上显示产品和产品详细信息。

  1. 解决方案资源管理器中,右键单击 WingtipToys,单击“添加”,然后单击“新建项”。
    随即出现“添加新项”对话框。

  2. 选择左侧的 Visual C# ->Web 模板组。 然后,从中间列表中选择 包含母版页的 Web 窗体 ,并将其命名为 ProductList.aspx

    UI 和导航 - 添加新项对话框

  3. 选择 Site.Master 以将母版页附加到新创建的 .aspx 页。

    UI 和导航 - 选择母版页

  4. 按照以下步骤添加名为 ProductDetails 的其他页面.aspx

更新 Bootstrap

Visual Studio 2013项目模板使用 Bootstrap、Twitter 创建的布局和主题框架。 Bootstrap 使用 CSS3 提供响应式设计,这意味着布局可以动态适应不同的浏览器窗口大小。 还可以使用 Bootstrap 主题功能轻松影响应用程序外观的变化。 默认情况下,Visual Studio 2013中的 ASP.NET Web 应用程序模板包括 Bootstrap 作为 NuGet 包。

在本教程中,你将通过替换 Bootstrap CSS 文件来更改 Wingtip Toys 应用程序的外观。

  1. 解决方案资源管理器中,打开“内容”文件夹。

  2. 右键单击 启动.css 文件并将其重命名为 bootstrap-original.css

  3. bootstrap.min.css 重命名为 bootstrap-original.min.css

  4. 解决方案资源管理器中,右键单击“内容”文件夹,然后在文件资源管理器中选择“打开文件夹”。
    将显示文件资源管理器。 将下载的引导 CSS 文件保存到此位置。

  5. 在浏览器中转到 https://bootswatch.com/3/

  6. 滚动浏览器窗口,直到看到 Cerulean 主题。

    UI 和导航 - Cerulean 主题

  7. bootstrap.css 文件和 bootstrap.min.css 文件下载到 Content 文件夹。 使用之前打开的文件资源管理器窗口中显示的内容文件夹的路径。

  8. 解决方案资源管理器顶部的 Visual Studio 中,选择“显示所有文件”选项以在“内容”文件夹中显示新文件。

    “解决方案资源管理器”窗口的屏幕截图,其中打开了“内容”文件夹,其中显示所有文件。

    你将在 “内容” 文件夹中看到两个新的 CSS 文件,但请注意,每个文件名旁边的图标灰显。这意味着文件尚未添加到项目中。

  9. 右键单击引导.css和 bootstrap.min.css 文件,然后选择“包含在项目中”。
    本教程稍后运行 Wingtip Toys 应用程序时,将显示新的 UI。

注意

ASP.NET Web 应用程序模板使用项目根目录处 的Bundle.config 文件来存储 Bootstrap CSS 文件的路径。

修改默认导航

可以通过更改 Site.Master 页中的无序导航列表元素来修改应用程序中每个页面的默认导航。

  1. 解决方案资源管理器中,找到并打开 Site.Master 页。

  2. 将黄色突出显示的其他导航链接添加到如下所示的无序列表:

    <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 所示,你修改了包含带有链接href属性的定位标记<a>的每个行项<li>。 每个 href 指向 Web 应用程序中的页面。 在浏览器中,当用户单击其中一个链接 ((如 产品) ),他们将导航到产品列表等 (中包含的 href 页面 .aspx) 。 本教程结束时将运行应用程序。

备注

平铺 (~) 字符用于指定 href 路径从项目的根目录开始。

添加数据控件以显示导航数据

接下来,添加一个控件以显示数据库中的所有类别。 每个类别将充当 ProductList.aspx 页面的链接。 当用户在浏览器中单击类别链接时,他们将导航到产品页面,并仅查看与所选类别关联的产品。

你将使用 ListView 控件显示数据库中包含的所有类别。 若要向母版页添加 ListView 控件,请执行以下操作:

  1. 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属性,数据绑定表达式Item在节点中ItemTemplate可用,并且控件将变为强类型。 可以使用 IntelliSense 选择对象的详细信息 Item ,例如指定 CategoryName。 此代码包含在标记数据绑定表达式的容器 <%#: %> 中。 通过将 (:) 添加到前缀末尾 <%# ,数据绑定表达式的结果将进行 HTML 编码。 当结果为 HTML 编码时,应用程序会更好地防范跨站点脚本注入 (XSS) 和 HTML 注入攻击。

注意

提示

通过键入开发期间添加代码时,可以确定找到对象的有效成员,因为强类型数据控件基于 IntelliSense 显示可用成员。 在键入代码(如属性、方法和对象)时,IntelliSense 提供上下文适当的代码选择。

在下一步中,你将实现 GetCategories 检索数据的方法。

将数据控件链接到数据库

在数据控件中显示数据之前,需要将数据控件链接到数据库。 若要创建链接,可以修改 Site.Master .cs 文件后面的代码。

  1. 解决方案资源管理器中,右键单击“Site.Master”页,然后单击“查看代码”。 Site.Master.cs 文件在编辑器中打开。

  2. 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;
    
  3. 在事件处理程序后面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”) 的控件 (使用模型绑定来选择数据。 在控件的ListViewSelectMethod标记中,将控件的属性设置为GetCategories方法,如下所示。 控件 ListView 在页面生命周期中的适当时间调用 GetCategories 该方法,并自动绑定返回的数据。 在下一教程中,你将了解有关绑定数据的详细信息。

运行应用程序和创建数据库

在本教程系列前面,你创建了一个名为“ProductDatabaseInitializer” (的初始值设定项类) 并在 global.asax.cs 文件中指定了此类。 当应用程序首次运行时,Entity Framework 将生成数据库,因为 Application_Startglobal.asax 中包含的方法.cs文件将调用初始值设定项类。 初始值设定项类将使用前面在本教程系列中添加的模型类 (CategoryProduct) 来创建数据库。

  1. 解决方案资源管理器中,右键单击“默认.aspx”页,然后选择“设为起始页”。
  2. 在 Visual Studio 中按 F5
    在第一次运行时设置所有内容需要一点时间。
    UI 和导航 - 浏览器 Windows
    运行应用程序时,将编译应用程序,并将在 App_Data 文件夹中创建名为 wingtiptoys 的数据库.mdf。 在浏览器中,你将看到类别导航菜单。 此菜单是通过从数据库中检索类别生成的。 在下一教程中,你将实现导航。
  3. 关闭浏览器以停止正在运行的应用程序。

查看数据库

打开 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数据库文件。

  1. 展开 App_Data 文件夹。 如果 App_Data 文件夹不可见,请参阅上面的说明。

  2. 如果 wingtiptoys.mdf数据库文件不可见,请选择“刷新”图标,然后选择解决方案资源管理器窗口顶部的“显示所有文件”图标。

  3. 右键单击 wingtiptoys.mdf 数据库文件,然后选择“ 打开”。
    将显示服务器资源管理器

    UI 和导航 - 服务器资源管理器

  4. 展开 “表” 文件夹。

  5. 右键单击 “产品”表,然后选择“ 显示表数据”。
    将显示 “产品 ”表。

    UI 和导航 - 产品表

  6. 此视图允许你手动查看和修改 Products 表中的数据。

  7. 关闭 “产品 ”表窗口。

  8. 服务器资源管理器中,再次右键单击 “产品 ”表,然后选择“ 打开表定义”。
    将显示 Products 表的数据设计。

    UI 和导航 - 产品设计

  9. T-SQL 选项卡中,会看到用于创建表的 SQL DDL 语句。 还可以使用“ 设计 ”选项卡中的 UI 修改架构。

  10. 服务器资源管理器中,右键单击 WingtipToys 数据库,然后选择“ 关闭连接”。
    通过从 Visual Studio 分离数据库,数据库架构将能够稍后在本教程系列中修改。

  11. 返回 解决方案资源管理器by 选择服务器资源管理器窗口底部的“解决方案资源管理器”选项卡。

总结

在系列教程中,你添加了一些基本的 UI、图形、页面和导航。 此外,还运行了 Web 应用程序,该应用程序从上一教程中添加的数据类创建了数据库。 还通过直接查看数据库来查看数据库的 Products 表的内容。 在下一教程中,你将显示数据库中的数据项和详细信息。

其他资源

编程 ASP.NET 网页简介
ASP.NET Web 服务器控件概述
CSS 教程