超级会员免费看
创建ASP.NET Web表单：从基础到数据绑定的全面指南
1. Web表单生命周期
Web表单的生命周期包含多个关键阶段，每个阶段都有其特定的功能和作用。以下是详细的阶段介绍：
1.
加载（Load）
：必要时调用
CreateChildControls()
方法来创建和初始化控件树中的服务器控件，恢复状态，表单控件包含客户端数据。可以使用
OnLoad()
方法处理
Load
事件来修改加载阶段。
2.
发送回发更改修改（Send Postback Change Modifications）
：如果当前状态与上一状态之间存在任何状态更改，则通过
RaisePostDataChangedEvent()
方法引发更改事件。
3.
处理回发事件（Handle Postback Events）
：处理导致回发的客户端事件。
4.
预渲染（PreRender）
：这是在渲染之前修改输出的最后机会，可以使用
OnPreRender()
方法。
5.
保存状态（Save State）
：在生命周期开始时，持久化视图状态从隐藏变量加载，现在将其保存回隐藏变量，作为字符串对象持久化，完成到客户端的往返。可以使用
SaveViewState()
方法进行重写。
6.
渲染（Render）
：生成要发送回客户端浏览器的输出。可以使用
Render
方法进行重写。必要时调用
CreateChildControls()
方法来创建和初始化控件树中的服务器控件。
7.
释放（Dispose）
：这是生命周期的最后阶段，提供了进行最终清理和释放昂贵资源（如数据库连接）引用的机会。可以使用
Dispose()
方法进行修改。
以下是Web表单生命周期的mermaid流程图：
graph LR
A[加载] --> B[发送回发更改修改]
B --> C[处理回发事件]
C --> D[预渲染]
D --> E[保存状态]
E --> F[渲染]
F --> G[释放]
2. 创建Web表单
2.1 启动项目
要创建一个简单的Web表单，可以按照以下步骤操作：
1. 启动Visual Studio .NET，选择
File
->
New Web Site
。
2. 在
New Web Site
对话框中，从模板中选择
ASP.NET Web Site
，选择
File System
作为位置（也可以使用HTTP或FTP远程创建网站），并选择
Visual C#
作为语言。
3. 为网站指定位置和名称，并选择.NET Framework。
Visual Studio会在指定目录中创建一个名为
ProgrammingCSharpWeb
的文件夹，并在该目录中创建以下文件和目录：
-
Default.aspx
页面（用于用户界面）
-
Default.aspx.cs
文件（用于代码）
-
web.config
文件（用于网站配置设置）
-
App_Data
目录（当前为空，但通常用于保存.mdb文件或其他特定数据文件）
2.2 重命名文件和类
可以将
Default.aspx
重命名为
HelloWeb.aspx
，具体步骤如下：
1. 关闭
Default.aspx
，然后在
Solution Explorer
中右键单击其名称，选择
Rename
，输入
HelloWeb.aspx
。
2. 要重命名类，右键单击
.aspx
页面，选择
View Code
，然后重命名类为
HelloWeb_aspx
。点击名称旁边的小线，打开智能标签，点击 “Rename ‘_Default’ to ‘HelloWeb_aspx’”，Visual Studio会确保将所有
Default_aspx
的出现替换为其真实名称。
2.3 添加文本到页面
在
HelloWeb.aspx
的HTML视图中，可以看到使用标准HTML表单标签在页面主体中指定了一个表单：
<form id="form1" runat="server">
runat="server"
属性是服务器端魔法的关键，任何包含此属性的标签都被视为由ASP.NET框架在服务器上执行的服务器端控件。可以通过切换到
Source
视图，直接向文件中添加脚本和HTML，例如：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HelloWeb.aspx.cs" Inherits="HelloWeb_aspx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Hello Web Page</title>
</head>
<body>
<form id="form1" runat="server">
Hello World! It is now <% = DateTime.Now.ToString( ) %>
<div>
</div>
</form>
</body>
</html>
<%
和
%>
标记的作用与经典ASP中相同，表示代码位于它们之间（在本例中为C#）。紧跟在开始标记后的
=
符号会使ASP.NET显示值，就像调用
Response.Write()
一样。也可以将该行写成：
Hello World! It is now
<% Response.Write(DateTime.Now.ToString( )); %>
按
F5
运行页面。
2.4 添加控件
可以通过以下三种方式向Web表单添加服务器端控件：
1.
编写HTML
：在HTML页面中编写HTML代码。例如，要使用按钮让用户从Northwind数据库中提供的三个托运人中选择一个，可以在HTML窗口的
<form>
元素中编写以下HTML：
<asp:RadioButton GroupName="Shipper" id="Speedy" text = "Speedy Express" Checked="True" runat="server">
</asp:RadioButton>
<asp:RadioButton GroupName="Shipper" id="United" text = "United Package" runat="server">
</asp:RadioButton>
<asp:RadioButton GroupName="Shipper" id="Federal" text = "Federal Shipping" runat="server">
</asp:RadioButton>
asp
标签声明了服务器端ASP.NET控件，当服务器处理页面时，这些控件会被替换为普通HTML。运行应用程序时，浏览器会显示一个按钮组中的三个单选按钮，选择一个会取消选择其他按钮。
2.
从工具箱拖动控件
：将控件从工具箱拖动到设计页面。
3.
在运行时以编程方式添加
：在代码中动态添加控件。
2.5 启用调试
按
F5
开始调试时，Visual Studio可能会注意到该应用程序的
Web.config
文件中未启用调试，并显示
Debugging Not Enabled
对话框。默认情况下，该对话框会修改（必要时创建）
Web.config
文件，点击
OK
即可为应用程序启用调试。
3. 服务器控件类型
Web表单提供了两种类型的服务器端控件：
| 控件类型 | 描述 | 示例 |
| ---- | ---- | ---- |
| 服务器端HTML控件 | HTML控件，标记有
runat=Server
属性 |
<input type="radio" runat="server">
|
| ASP.NET服务器控件（ASP控件或Web控件） | 设计用于增强和替换标准HTML控件，提供更一致的对象模型和更一致命名的属性 |
<asp:RadioButton>
|
ASP控件对应于前面的HTML服务器端控件的示例如下：
<asp:RadioButton>
<asp:CheckBox>
<asp:Button>
<asp:TextBox rows="1">
<asp:TextBox rows="5">
4. 数据绑定
4.1 动态创建和绑定控件
在前面的部分中，将单选按钮硬编码到表单中，这不是最佳方法，因为如果数据库中的托运人发生更改，需要重新连接控件。可以动态创建这些控件并将它们绑定到数据库中的数据，具体步骤如下：
1. 创建一个新页面：右键单击项目，选择
Add New Item
，将表单置于拆分视图中，从对话框中选择
Web Form
，命名为
DisplayShippers.aspx
。
2. 添加
RadioButtonList
控件：从工具箱中将
RadioButtonList
拖动到新表单上，可以拖到设计面板或
Source
视图中的
<div>
内。
3. 选择数据源：在设计面板中，点击新控件的智能标签，选择
Choose Data Source
，在
Choose a Data Source
对话框中，下拉 “Select a data source” 菜单，选择
<New Data Source>
，选择
Database
，分配一个ID，点击
OK
。
4. 配置数据源：在
Configure Data Source
对话框中，选择现有连接或创建新连接，填写服务器名称、登录方式和数据库名称（例如
Northwind
），点击
Test Connection
测试连接，一切正常后点击
OK
。
5. 选择表和列：在向导的下一页，选择要检索的表和列，例如选择
Shippers
表的
ShipperID
和
CompanyName
字段。
6. 测试查询：点击
Next
，测试查询以确保返回预期的值。
7. 绑定数据源：将刚刚创建的数据源附加到
RadioButtonList
，设置显示值和选择值的字段。
4.2 代码分析
运行应用程序时，浏览器中显示的是简单的HTML，例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Display Shippers
</title>
<style type="text/css">
.RadioButtonStyle
{
font-family: Verdana;
font-size: medium;
font-weight: normal;
font-style: normal;
border: medium groove #FF0000;
}
</style>
</head>
<body>
<form name="form1" method="post" action="DisplayShippers.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJMzU1NzcyMDk0D2QWAgIDD2QWAgIBDxAPFgIeC18hRGF0YUJvdW5kZ2QQFQMOU3BlZWR5
IEV4cHJlc3MOVW5pdGVkIFBhY2thZ2UQRmVkZXJhbCBTaGlwcGluZxUDATEBMgEzFCsDA2dnZ2RkZA9Nylp
g2lObPr0KzM1NvwXJoMBn" />
</div>
<div>
<table id="RadioButtonList1" border="0">
<tr>
<td><input id="RadioButtonList1_0" type="radio"
name="RadioButtonList1" value="1" />
<label for="RadioButtonList1_0">Speedy Express</label></td>
</tr>
<tr>
<td><input id="RadioButtonList1_1" type="radio"
name="RadioButtonList1" value="2" />
<label for="RadioButtonList1_1">United Package</label></td>
</tr>
<tr>
<td><input id="RadioButtonList1_2" type="radio"
name="RadioButtonList1" value="3" />
<label for="RadioButtonList1_2">Federal Shipping</label></td>
</tr>
</table>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWBQLIyMfLBQL444i9AQL544i9AQL644i9AQL3jKLTDcEXOHLsO/LFFixl7k4g2taGl6Qy" />
</div></form>
</body>
</html>
需要注意的是，HTML中没有
RadioButtonList
，而是有一个表格，其中包含标准HTML输入对象和标签，ASP.NET将开发人员控件转换为任何浏览器都能理解的HTML。同时，要注意安全问题，恶意用户可能会创建看起来像有效表单提交的消息，但设置了表单中未提供的字段值，可能会导致选择不可用的选项或发起SQL注入攻击，因此要特别小心在HTML中暴露重要数据（如主键），并确保从用户接收的数据不超出表单提供的范围。
4.3 添加控件和事件
通过添加更多控件，可以创建一个用户可以交互的完整表单，具体步骤如下：
1. 添加更多控件：添加更合适的问候语（“Welcome to NorthWind”）、一个文本框用于接受用户的姓名、两个新按钮（“Order” 和 “Cancel”）以及用于向用户提供反馈的文本。
2. 处理按钮点击事件：当用户点击 “Order” 按钮时，需要检查用户是否填写了姓名，并提供所选托运人的反馈。可以通过以下步骤实现：
- 切换到设计模式，双击 “Order” 按钮，Visual Studio会进入代码隐藏页面，并为按钮的
Click
事件创建事件处理程序。
- 添加事件处理代码，设置标签的文本以获取文本框中的文本以及
RadioButtonList
中的文本和值：
protected void btnOrder_Click(object sender, EventArgs e)
{
lblMsg.Text = "Thank you " + txtName.Text.Trim( ) +
". You chose " + rblShippers.SelectedItem.Text +
" whose ID is " + rblShippers.SelectedValue;
}
-
设置默认选择：运行程序时，会发现没有单选按钮被选中，因为绑定列表未指定默认选项。可以在Visual Studio创建的
Page_Load方法中添加一行代码来设置默认选择：
protected void Page_Load(object sender, EventArgs e)
{
rblShippers.SelectedIndex = 0;
}
但这样会导致每次页面加载时都会重置选择，因为每次页面加载时都会运行
OnLoad
事件处理程序并重新设置所选索引。为了解决这个问题，可以将设置包装在一个
if
语句中，检查页面是否是回发：
protected override void OnLoad(EventArgs e)
{
if (!IsPostBack)
{
rblShippers.SelectedIndex = 0;
}
}
这样，第一次页面加载时会设置单选按钮，而回发时不会重置选择，用户的选择会被保留。
4.4 完整代码示例
以下是
DisplayShippers.aspx
的完整HTML代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisplayShippers.aspx.cs" Inherits="DisplayShippers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Choose Shippers</title>
<style type="text/css">
.RadioButtonStyle
{
font-family: Verdana;
font-size: medium;
font-weight: normal;
font-style: normal;
border: medium groove #FF0000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table style="width: 300px; height: 33px">
<tr>
<td colspan="2" style="height: 20px">Welcome to NorthWind</td>
</tr>
<tr>
<td>Your name:</td>
<td><asp:TextBox ID="txtName" Runat=server></asp:TextBox></td>
</tr>
<tr>
<td>Shipper:</td>
<td>
<asp:RadioButtonList ID="rblShippers" runat="server"
DataSourceID="SqlDataSource1" DataTextField="CompanyName"
DataValueField="ShipperID">
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td><asp:Button ID="btnOrder" Runat=server Text="Order"
onclick="btnOrder_Click" /></td>
<td><asp:Button ID="btnCancel" Runat=server Text="Cancel" /></td>
</tr>
<tr>
<td colspan="2"><asp:Label id="lblMsg" runat=server></asp:Label></td>
</tr>
</table>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ShipperID], [CompanyName] FROM [Shippers]">
</asp:SqlDataSource>
</form>
</body>
</html>
以下是
DisplayShippers.aspx.cs
的完整代码：
using System;
public partial class DisplayShippers : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
rblShippers.SelectedIndex = 0;
}
}
protected void btnOrder_Click(object sender, EventArgs e)
{
lblMsg.Text = "Thank you " + txtName.Text.Trim( ) +
". You chose " + rblShippers.SelectedItem.Text +
" whose ID is " + rblShippers.SelectedValue;
}
}
通过以上步骤，可以创建一个功能完整的Web表单，并实现数据绑定和事件处理，为用户提供良好的交互体验。同时，要注意安全问题，确保应用程序的安全性。
创建ASP.NET Web表单：从基础到数据绑定的全面指南
5. 表单交互与用户反馈
5.1 表单功能概述
在前面创建的表单中，用户可以输入姓名并选择托运人，点击 “Order” 按钮后会得到相应的反馈。这个过程涉及到多个控件的协同工作以及事件的处理，下面详细分析其工作原理和实现细节。
5.2 事件处理机制
当用户点击 “Order” 按钮时，会触发
btnOrder_Click
事件处理程序。该程序会检查用户输入的姓名，并获取用户选择的托运人信息，然后将这些信息显示在标签上。以下是事件处理程序的代码：
protected void btnOrder_Click(object sender, EventArgs e)
{
lblMsg.Text = "Thank you " + txtName.Text.Trim( ) +
". You chose " + rblShippers.SelectedItem.Text +
" whose ID is " + rblShippers.SelectedValue;
}
在这个代码中，
txtName.Text.Trim()
用于获取用户输入的姓名并去除前后空格，
rblShippers.SelectedItem.Text
和
rblShippers.SelectedValue
分别用于获取用户选择的托运人的名称和ID。
5.3 默认选择问题及解决
在页面加载时，需要设置默认选择的托运人。最初在
Page_Load
方法中直接设置
rblShippers.SelectedIndex = 0
会导致每次页面加载时都会重置选择。为了解决这个问题，使用
IsPostBack
属性进行判断，只在页面首次加载时设置默认选择。以下是改进后的
Page_Load
方法：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
rblShippers.SelectedIndex = 0;
}
}
这个判断逻辑的流程图如下：
graph TD
A[页面加载] --> B{是否为回发?}
B -- 否 --> C[设置默认选择]
B -- 是 --> D[不设置默认选择]
5.4 用户体验优化
为了提高用户体验，可以在表单中添加更多的提示信息和验证功能。例如，可以在文本框旁边添加提示文字，提示用户输入姓名；在用户点击 “Order” 按钮时，验证用户是否输入了姓名，如果没有输入则给出相应的提示。以下是一个简单的验证示例：
protected void btnOrder_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(txtName.Text.Trim()))
{
lblMsg.Text = "Please enter your name.";
}
else
{
lblMsg.Text = "Thank you " + txtName.Text.Trim( ) +
". You chose " + rblShippers.SelectedItem.Text +
" whose ID is " + rblShippers.SelectedValue;
}
}
6. 数据绑定的优势与注意事项
6.1 数据绑定的优势
数据绑定是ASP.NET Web表单中的一个重要特性，它可以将控件与数据库中的数据进行关联，实现数据的动态显示和修改。通过数据绑定，可以避免硬编码控件的内容，提高代码的可维护性和灵活性。例如，在前面的示例中，通过将
RadioButtonList
绑定到
Shippers
表，可以根据数据库中的数据动态生成单选按钮，而不需要手动编写每个单选按钮的代码。
6.2 注意事项
在使用数据绑定时，需要注意以下几点：
-
安全性
：如前面所述，要注意防止恶意用户通过修改表单数据进行攻击，特别是要避免在HTML中暴露重要数据（如主键）。
-
性能
：数据绑定可能会影响页面的性能，特别是在处理大量数据时。因此，需要合理设计数据库查询和数据绑定方式，避免不必要的数据库访问。
-
数据更新
：当数据库中的数据发生变化时，需要及时更新绑定的控件。可以通过刷新页面或使用AJAX技术实现数据的实时更新。
6.3 数据绑定的优化建议
为了提高数据绑定的性能和安全性，可以采取以下优化建议：
| 优化方面 | 建议 |
| ---- | ---- |
| 数据库查询 | 使用索引优化查询，避免全表扫描；合理使用缓存，减少数据库访问次数。 |
| 数据绑定方式 | 选择合适的绑定方式，如使用
DataSourceID
进行声明式绑定或使用代码进行编程式绑定。 |
| 安全防护 | 对用户输入的数据进行验证和过滤，避免SQL注入攻击；在HTML中使用加密或隐藏重要数据。 |
7. 总结与展望
7.1 总结
通过本文的介绍，我们学习了如何创建ASP.NET Web表单，包括表单的生命周期、服务器控件的类型、数据绑定的方法以及如何添加控件和处理事件。通过实际的代码示例，展示了如何实现一个完整的用户交互表单，并解决了一些常见的问题，如默认选择问题和用户输入验证问题。同时，我们也强调了数据绑定的优势和注意事项，以及如何优化数据绑定的性能和安全性。
7.2 展望
随着Web技术的不断发展，ASP.NET Web表单也在不断演进。未来，我们可以期待更多的功能和特性，如更好的用户界面设计、更强大的数据处理能力和更高的安全性。同时，我们也可以结合其他技术，如AJAX、HTML5和CSS3，进一步提升Web表单的用户体验和性能。在实际开发中，需要不断学习和掌握新的技术，以满足用户不断增长的需求。
通过以上内容，我们可以创建一个功能完善、性能良好且安全可靠的ASP.NET Web表单应用程序。希望本文对您有所帮助，祝您在Web开发的道路上取得更好的成绩！
扫一扫
729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
