ASP.NET Web窗体可以让web应用创建动态内容。静态网页的知识和HTML、CSS一模一样，区别在于ASP.NET网页包括了ASP.NET可以识别并处理的服务器端的内容。对于静态页面(.html)，服务器响应一个web请求，再把对应页面回传给浏览器。对于ASP.NET页面(.aspx文件)，.aspx文件是在web服务器上运行的一个程序。页面运行的时候，它可以完成任何的web请求，比如计算数值、读写数据库或者调用其他程序。当生成结果时，.aspx会动态地将之转换成网页语言来显示(比如html的元素<p><div>等等)，最后回传到浏览器。
一. 修改UI
1.1 熟悉页面
个人认为，对于UI界面的操作，是初次上手去了解一个web项目的相当好的切入点。在wingtip项目根目录下打开Default.aspx，可以看到一个相当简练的程序内容。对于.aspx我把它分成两部分：1)经典html元素 2)ASP元素。二者混合起来就成了一份.aspx文件。
首行内容：
<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>
"<%@ % >"，这是典型的ASP指令形式，其中包含 page、language、masterpagefile等选项。<%: Page.Title%>会解析成为html页面标签所显示的title属性内容。这些指令和选项用来告诉ASP.NET如何处理一个页面，但是指令本身不会作为浏览器显示的内容的一部分。在后续文章中会陆续提到不同指令，此处不展开也没必要单独详细说明。
html与asp的融合=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>
1.2 @Page指令
这是一个aspx页面最常使用的指令，允许配置多个选项：
1.编程语言(language)，如：c#；
2.服务器代码直接在当前页面编写(single-file page)或是在单独的类文件中编写(code-behind page)；
3.是否关联有MasterPage，决定当前页面是否为内容页；
4.调试与跟踪选项；
1.3 关于母版页
母版页是种一致性布局，也就是在不同页面切换时，保持不变的那部分样式布局。当用户请求一个页面时，asp.net会把母版页和内容页的内容融合，最终输出到浏览器，呈现给用户。比如要显示一个公司商标，那么就把它添加在母版页，这样切换到任何一个页面都会显示这个商标。
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 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>© <%: DateTime.Now.Year %> - Wingtip Toys</p>
</footer>
</div>
</form>
</body>
</html>
母版页是以.master为后缀的asp.net文件，其中预定义了括静态文本(text)、 HTML 元素(html elements)和服务器控件(server control)。母版页可以使用任何html和asp.net元素。此外，母版页有一个或多个ContenePlaceHolder控件，这些控件表示可以由内容页(content pages)替换的区域。
1.4 添加新的一页(.aspx) 
选择包含母版页的web窗体，新窗体就创建完成了。
1.5 修改默认导航选项
在下图所示的母版页中，上方导航栏分别链接至Home、About、Contact、Products：
新的导航链接如何添加？代码如下:
<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> <!--此处为新添加ProductList链接-->
</ul>
1.6 增加类别的导航链接
现在要给页面增加一个根据类别导航的文字链接。这里使用到了一个asp.net控件，ListView。
在Site.Master添加如下代码:
<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，但是根据产品类别的不同，ListView控件都传递(query-string value)不同的类别ID，这样就实现了不同类别的产品显示。
通过在ListView控件中设置ItemType属性，ItemTemplate节点中的数据就可以通过data-binding方式来显示。(也就是绑定Category类中的字段，依次显示)。
二 . 服务器
2.1 Web服务器控件
服务器控件(server controls)使用ASP.NET的专有语法。控件的标记名称以asp:前缀开头，asp.net通过这种方法识别和处理这些控件。此外，控件中还包括runat="server"和ID等属性。在asp.net中，有许多服务器控件来渲染html页面。
2.2 服务器代码
asp.net web应用程序包含在处理页面时在服务器上运行的代码。服务器代码可以实现很多操作，比如向ListView控件中添加数据。
asp.net支持两种服务器代码的编写模式：1)single-file模式 2)code-behind模式。在code-behind模式中，codebghind属性指明了后台单独类文件的名称，inherits属性指明了前端页面在与后台交互时，所使用的类的名称。
三. 关于数据库的一些东西
3.1 将数据控件链接到数据库
当我们在前端页面和后台程序中把数据控件都做好了，数据从哪来？这是很自然的一个思路，那么我们接下来需要把控件和数据库相连接。
首先，在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; //添加linq
using WingtipToys.Models; //添加models(上一章创建好的)
接着，添加GetCategories()方法:
protected void Page_Load(object sender, EventArgs e)
{ } //添加GetCategories()方法
public IQueryable<Category> GetCategories()
{
var _db = new WingtipToys.Models.ProductContext();
IQueryable<Category> query = _db.Categories;
return query;
}
(注:此处方法的返回类型是一个接口IQueryable，c#的知识点，再学习)
ListView控件中的"SelectMethod"属性设置为GetCategories()方法，在页面周期运行的适当时间，页面会调用该方法，然后在数据区域绑定返回的数据。
3.2 操作数据库
在web.config文件中，对数据库的连接进行配置。
<connectionStrings>
<add name="DefaultConnection"
connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-WingtipToys-20120302100502;Integrated Security=True"
providerName="System.Data.SqlClient" />
<add name="WingtipToys"
connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\wingtiptoys.mdf;Integrated Security=True"
providerName="System.Data.SqlClient " />
</connectionStrings>
你可以看到AttachDbFilename连接字符串中的值，指向Web应用程序项目的DataDirectory。 |DataDirectory|是保留的值，表示工程目录下的App_Data文件夹。
早前我们创建了ProductDataBaseinitializer类，并且在global.asax.cs中的Application_Start()方法里调用了这个类，那么在程序第一次运行时，就会生成数据库的内容，因为在global.asax.cs中的Application_Start()方法是在程序启动时调用的。调用以后，程序会创建一个名为wingtiptoys.mdf的数据库文件，存储在App_Data文件夹中。
四. 总结
这一章捋了捋UI界面、导航操作、数据库。最具有asp.net风格的代码编写应该是在处理导航的那一部分，用到了数据控件(Data Control，也叫服务器控件Server Control)，通过这类控件程序可以跟后台进行数据、方法的交互，最终在浏览器给用户呈现一个完整的页面。