用户界面和导航3
在本教程中，您将修改 UI 的默认 Web 应用程序以支持翼尖玩具商店前端应用程序的功能。而且，您将添加简单数据绑定导航。本教程的依据前面的教程"创建数据访问层"，并是翼尖玩具教程系列的一部分。
您将了解 ︰
- 如何更改用户界面以支持翼尖玩具商店前端应用程序的功能。
- 如何配置 HTML5 元素来包含页面导航。
- 如何创建数据驱动的控件导航到特定产品的数据。
- 如何显示使用实体框架代码第一次创建数据库中的数据。
ASP.NET Web 窗体允许您创建 Web 应用程序的动态内容。每个 ASP.NET Web 页面创建的方式类似于静态 HTML Web 页 （不包含基于服务器的处理），但 ASP.NET Web 页包含 ASP.NET 识别和处理生成 HTML 页面运行时的额外元素。
与静态 HTML 的网页 （.htm或.html文件），服务器满足Web请求通过读取该文件并将其作为发送-在浏览器中。与此相反的是，当有人请求 ASP.NET 网页 （.aspx文件），该页面作为程序运行在 Web 服务器上。当页面运行时，它可以执行任何任务，您的 Web 站点需要，包括计算值、 读写数据库信息或者调用其他程序。作为其输出，该页面动态生成标记 （如在 HTML 元素），并将此动态输出发送到浏览器。
修改用户界面
你会继续这个系列教程通过修改Default.aspx页面。您将修改用户界面中，已经建立了由用于创建应用程序的默认模板。在创建任何 Web 窗体应用程序时，你会做的修改的类型是典型的。你会通过更改标题、 替换一些内容，并删除不需要的默认内容。
- 打开或切换到Default.aspx页。
- 如果页面出现在设计视图中，切换到源视图。
- 在页面顶部的
@Page指令中，更改Title属性为"欢迎"中黄色下面, 突出显示。<%@ 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="Home Page" 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>
在示例中，您已设置@Page指令的Title属性。当 HTML 显示在浏览器中，服务器代码<%: Page.Title %>解析为Title属性中包含的内容。
示例页包括构成一个 ASP.NET Web 页面的基本元素。该页面包含静态文本，因为你可能在一个 HTML 页面，以及特定于 ASP.NET 的元素。Default.aspx页面中包含的内容将结合母版页内容，将在本教程后面解释。
@Page 指令
ASP.NET Web 窗体通常包含允许您指定页的页属性和配置信息的指令。指令用于由 ASP.NET 作为指示如何处理页面，但他们不会作为发送到浏览器的标记的一部分呈现。
最常用的指令为@Page ，指令该指令允许您指定多个配置选项页，包括以下内容 ︰
- 服务器编程语言中的网页，如 C# 代码。
- 页面是否包含服务器代码直接在页面中，称为单文件页，网页，或是否它是一个单独的类文件，称为代码隐藏页中的代码页。
- 页面是否具有关联的母版页，因此应视为内容的网页。
- 调试和跟踪选项。
如果你不在页中，包括@Page指令或指令不包含特定的设置，从Web.config配置文件或从Machine.config配置文件将继承的设置。Machine.config文件提供额外的配置设置在一台机器上运行的所有应用程序。
注意
Machine.config还提供有关所有可能的配置设置的详细信息。
Web 服务器控件
在大多数 ASP.NET Web 窗体应用程序，您将添加允许用户与页面按钮、 文本框、 列表等交互的控件。这些 Web 服务器控件是类似于 HTML 按钮和输入的元素。但是，他们在处理在服务器上，允许您使用服务器代码来设置它们的属性。这些控件还引发事件，您可以在服务器代码中处理。
服务器控件使用 ASP.NET 承认在页运行时的特殊语法。ASP.NET 服务器控件的标记名称开头asp:前缀。这允许 ASP.NET 识别处理这些服务器控件。前缀可能是不同的如果该控件不是.NET 框架的一部分。除了asp:前缀，ASP.NET 服务器控件还包括runat="server"属性，您可以使用引用服务器代码中的控件的ID 。
页运行时，ASP.NET 服务器控件用于标识和运行的代码，是与这些控件关联。它在浏览器中显示时，许多控件呈现到页面一些 HTML 或其他标记。
服务器代码
大多数 ASP.NET Web 窗体应用程序中包括的页进行处理时，在服务器运行的代码。如上文所述，可以使用服务器代码来做各种各样的事情，例如将数据添加到 ListView 控件。ASP.NET 支持许多种语言运行在服务器上，包括 C#、 Visual Basic、 J# 和其他人。
ASP.NET 支持两种模型编写 Web 页的服务器代码。在单文件模型中，页的代码是在一个脚本元素的开始标记包括在哪里runat="server"属性。或者，您可以在一个单独的类文件，称为代码隐藏模型创建页面的代码。在这种情况下，ASP.NET Web 窗体页通常不包含服务器代码。相反， @Page 指令包括信息链接.aspx页与其关联的代码隐藏文件。
@Page指令中所载的CodeBehind属性指定单独的类文件的名称和Inherits属性指定对应于页的代码隐藏文件中的类的名称。
更新母版页
在 ASP.NET Web 窗体，母版页使您可以在您的应用程序中创建一致的布局的页面。单个母版页应用程序中定义的外观和感觉与你想要的页面 （或一组页面） 所有的标准行为。然后，你可以创建各个内容页，其中包含您想要显示，如上文所述的内容。当用户请求内容页时，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 http://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