ASP.NET 2.0 Web 开发
1.71/5 (4投票s)
桌面应用程序的网页开发。
引言
Web 开发人员发现，ASP.NET AJAX 技术可以创建更有效的桌面应用程序，因为它使用客户端脚本。AJAX 是 Asynchronous JavaScript and XML 的缩写。简单来说，AJAX 是一种数据传输方法，可以通过仅更新需要更新的部分页面来避免回发过程。这称为局部页面渲染。炫目的动画并非来自 AJAX，而是 DHTML 和 JavaScript 的输出。因此，如果您已经使用 ASP.NET 2.0 作为 Web 开发技术，您会发现这项技术与旨在将标记呈现内容与应用程序逻辑分离的服务器端脚本技术不同。本文并非旨在替代学习更新的 ASP.NET AJAX 技术的任何方法。本文将重点介绍使用托管代码形成桌面应用程序的服务器端脚本。该桌面应用程序将用于（可能在会议中心或类似场所）预订宴会厅。任何熟悉代码隐藏文件的人都可以跳过本文的这一部分，甚至整篇文章。作者认为，在 ASP.NET 2.0 中打下坚实的基础将能够转向客户端 ASP.NET AJAX 技术。
ASP.NET 2.0 是一种 Web 页面开发技术，它通过使用 Web 窗体简化了开发过程。ASP 页面上的控件会显示在客户端浏览器中，点击其中一个控件将导致服务器端进程通过其 ID 以编程方式引用该控件，从而执行事件处理程序。此过程会生成相应的 HTML 来流式传输并动态更改页面的内容。下面是一个基本示例
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="resultLabel" /><br />
<asp:Button runat="server" ID="triggerButton" Text="Click Me"
OnClick="triggerButton_Click" />
</div>
</form>
请注意 `Label` 控件和 `Button` 控件的 ID：分别为 `resultLabel` 和 `triggerButton`。 `runat="server"` 属性表示它们将在服务器端进行处理。现在，这是代码隐藏文件（使用 Visual Studio 2005）
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void triggerButton_Click(object sender, EventArgs e)
{
resultLabel.Text = "Button clicked!";
}
}
ASP.NET 中 Web 窗体的任何实例都是 `Page` 类的实例，该类派生自 `System.Web.UI` 命名空间。在使用 Visual Studio 2005（或 2008）时，您可以双击 `Button` 控件以显示代码隐藏文件并添加事件处理程序的代码。请注意，事件处理程序的代码涉及 `Label` 和 `Button` 控件的 ID。这些 ID 可以在任何 Visual Studio Web 开发 IDE 的属性管理器中设置。现在，考虑代码隐藏文件上方的 HTML。顶部的属性定义了对 C# Web 开发人员重要的页面特征。有一个 `Language` 属性指定您将通过 Web 页面使用 C#。其他三个属性 `AutoEventWireup`、`CodeFile` 和 `Inherits` 用于将 Web 窗体与代码隐藏文件（扩展名为 `.aspx.cs` 的文件）中的类关联起来。
回到设计视图，您可以看到已添加了控件。任何服务器控件都成为您在 Web 窗体中构建的对象模型的一部分。要使此应用程序执行某些操作，我们必须为点击 `Button` 添加事件处理程序。如果我们双击 `Button`，我们会自动获得一个事件处理方法，如下所示
void triggerButton_Click(object sender, EventArgs e)
{
...
}
这通过添加到 `Default.aspx` 页面源代码中的一些代码与 `Button` 进行了连接
<div>
<asp:Label runat="server" ID="resultLabel" /><br />
<asp:Button runat="server" ID="triggerButton"
Text="ClickMe" OnClick="triggerButton_Click" />
</div>
桌面应用程序
要创建桌面应用程序，我们需要创建一个 Web 应用程序框架，即宴会厅预订工具。此 Web 窗体包含用户名、事件名称、宴会厅和与会者等字段，以及一个用于选择日期的日历控件。我学到的一点是避免在页面上填充不必要的控件。这就是为什么表单的主体将被包含在 HTML 表格中。插入一个例如三列两行的表格，可以使 Web 开发人员拖放任何保存在 `images` 文件夹中的图片，该文件夹可以通过右键单击解决方案资源管理器并单击“添加新文件夹”来获得。带列的表格会以呈现内容格式化页面，并且还可以用于将控件保持在适当的数组中。因此，这是过程：使用 Visual Studio 2005（或者如果您使用 2008，请仔细检查代码隐藏文件的命名空间），转到“文件”，然后“添加新网站”。选择 C# 作为语言，以及 ASP.NET Web 站点模板。删除 `Default.aspx` 页面的内容，然后将此代码复制并粘贴到您的 `.aspx.cs` 页面中
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
calendar.SelectedDate = System.DateTime.Now;
}
}
protected void submitButton_Click(object sender, EventArgs e)
{
if (this.IsValid)
{
resultLabel.Text = roomList.SelectedItem.Text +
" has been booked on " +
calendar.SelectedDate.ToLongDateString() +
" by " + nameBox.Text + " for " +
eventBox.Text + " event. ";
foreach (ListItem attendee in attendeeList.Items)
{
if (attendee.Selected)
{
resultLabel.Text += attendee.Text + ", ";
}
}
resultLabel.Text += " and " + nameBox.Text +
" will be attending.";
}
}
}
当您检查 HTML 时，您会注意到表格被分为三列：第一列包含文本标签，第二列包含与这些文本标签对应的 UI 字段，第三列包含一个跨越四行的 `Calendar` 控件，用于日期选择。第五行包含一个跨越所有列的提交按钮。这是要复制粘贴的 `Default.aspx` 文件
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Banquet Room Reservations</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1 style="text-align: center;">
Enter details and set a day to initiate an event.
</h1>
</div>
<div style="text-align: center;">
<table style="text-align: left; border-color: #000000;
border-width: 2px; background-color: #fff99e;"
cellspacing="0" cellpadding="8" rules="none" width="540">
<tr>
<td valign="top">
Your Name:
</td>
<td valign="top">
<asp:TextBox ID="nameBox" runat="server" Width="160px" />
<asp:RequiredFieldValidator ID="validateName" runat="server"
ErrorMessage="You must enter a name."
ControlToValidate="nameBox" Display="None" />
</td>
<td valign="middle" rowspan="4">
<asp:Calendar ID="calendar" runat="server" BackColor="White" />
</td>
</tr>
<tr>
<td valign="top">
Event Name:
</td>
<td valign="top">
<asp:TextBox ID="eventBox" runat="server" Width="160px" />
<asp:RequiredFieldValidator ID="validateEvent" runat="server"
ErrorMessage="You must enter an event name."
ControlToValidate="eventBox" Display="None" />
</td>
</tr>
<tr>
<td valign="top">
Meeting Room:
</td>
<td valign="top">
<asp:DropDownList ID="roomList" runat="server" Width="160px">
<asp:ListItem Value="1">The Accounting Room</asp:ListItem>
<asp:ListItem Value="2">The IT Room</asp:ListItem>
<asp:ListItem Value="3">The Programmers
Room</asp:ListItem>
<asp:ListItem Value="4">The Investors
Room</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="validateRoom" runat="server"
ErrorMessage="You must select a room."
ControlToValidate="roomList" Display="None" />
</td>
</tr>
<tr>
<td valign="top">
Attendees:
</td>
<td valign="top">
<asp:ListBox ID="attendeeList" runat="server"
Width="160px" SelectionMode="Multiple"
Rows="6">
<asp:ListItem Value="1">Joe Hart</asp:ListItem>
<asp:ListItem Value="2">Mary DuPont</asp:ListItem>
<asp:ListItem Value="3">Stephen Golden</asp:ListItem>
<asp:ListItem Value="4">Andre the Giant</asp:ListItem>
<asp:ListItem Value="5">Ernest Hemingway</asp:ListItem>
<asp:ListItem Value="6">William Blake </asp:ListItem>
</asp:ListBox>
<asp:RequiredFieldValidator ID="validateAttendees" runat="server"
ErrorMessage="You must have at least one attendee."
ControlToValidate="attendeeList" Display="None" />
</td>
</tr>
<tr>
<td align="center" colspan="3">
<asp:Button ID="submitButton" runat="server"
Width="100%" Text="Submit meeting room request"
OnClick="submitButton_Click" />
</td>
</tr>
<tr>
<td align="center" colspan="3">
<asp:ValidationSummary ID="validationSummary" runat="server"
HeaderText="Before submitting your request:" />
</td>
</tr>
</table>
</div>
</form></body></html>
这是输出的副本
请注意，页面以表格形式排列着三列。学习控件及其放置位置有助于理解 Web 部件（Web Parts），这是通往 AJAX 的一条路径。