扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
简介
如果您跟我一样,就是说您也主要是开发桌面应用程序。但桌面开发人员有时也需要进行 Web 开发,这种情况是相当普遍的。本文的目的就是让 Visual Basic .NET 和 Visual Basic 6 开发人员快速掌握如何用 ASP.NET 2.0 构建 Web 应用程序。正因如此,本文尽力站在桌面开发人员的角度,重点介绍开发 Web 应用程序的不同之处。本文还假定您的主要目标是构建基于数据的 Web 页,而且您最关心的是让用户能够显示数据库中的信息。您的情况是这样吗?那就继续往下看吧。
快速入门
要执行本文所述的步骤,需要用到 Visual Studio 2005。还需要下载 Visual Studio 2005 Web 应用程序项目加载项。为了演练显示数据库中信息的操作,还需要 SQL Server 2005 Express Edition 和 Northwind 示例数据库。
利用 Visual Studio 2005 可构建功能完备的 ASP.NET Web 站点。不过,Visual Studio 2005 原本就附带了用于构建 Web 站点的无项目系统。对于从事桌面开发工作的人来说,这也使得构建 Web 站点的工作和体验与构建桌面应用程序产生了很大的不同。Visual Studio 2005 Web 应用程序项目加载项大大提高了 Web 站点构建与桌面应用程序构建之间的相似性。在本文的演练中,假定您已经安装了该加载项。
演练:创建简单的 Web 应用程序
1.如果您没有 Visual Studio 2005 Web 应用程序项目加载项,请下载并安装。
2.启动 Visual Studio 2005。
3.在“文件”菜单上,单击“新建”,然后单击“项目”。
4.在“项目类型”中,选择“Visual Basic”。
5.在“模板”中,选择“ASP.NET Web 应用程序”。
Visual Studio 将创建包含单个 Web 页的新 Web 应用程序。设计器将显示该页的标记代码。可在“源”视图中或使用 WYSIWYG 编辑器来编辑该页。
图 1. 新的 Web 应用程序 6.单击代码编辑器上的“设计”按钮,以切换到 WYSIWYG 视图。
乍看起来,构建 Web 应用程序似乎与构建桌面应用程序没什么区别。
7.单击设计图面,并输入“Enter your name:” .
8.将 Textbox 控件从工具箱拖动到设计图面中所述文本的后面。
9.单击鼠标将光标放到 Textbox 控件的后面,并按 ENTER 键以创建一个新行。
10.将 Button 控件从工具箱拖动到设计图面。
11.单击鼠标将光标放到 Button 控件的后面,并按 ENTER 键以创建另一个分行符。
12.将 Label 控件从工具箱拖动到设计图面中按钮的下方。
完成后的页面应如图 2 所示。
图 2. 带控件的 Web 应用程序页面布局
当您开始构建 Web 页时,应该很快就会发现一件事:您无法随心所欲地将控件任意放置。而桌面应用程序允许您将控件放置在所希望的任何像素位置。另一方面,Web 页是针对“流”而设计的。也就是说,页面布局的格式应动态设置。如果可用空间较多,浏览器就会使各行更长些,而如果可用空间较少,浏览器就会自动折行。
这还意味着,布置标签和文本框时要求将 Web 控件以表格形式放置,用以控制对齐。
演练:布置控件
1.选择该页的内容,按 DELETE 键删除所有内容。
2.在“布局”菜单上,单击“插入表”。
3.在“行”中,输入 2。
4.在“列”中,输入 2。
5.单击“确定”。
可以将控件直接键入或拖入表单元格中。注意,该表格可确保所有文本框的左边缘完全对齐。表格是控制 Web 页布局的主要机制。
6.通过键入表格单元内容或直接从工具箱拖动控件,创建图 3 所示的用户界面。
图 3. 使用表格控制布局的 Web 应用程序 事件驱动
ASP.NET 提供了一种与构建 Windows 窗体应用程序极为相似的编程模式。对于简单方案而言,应用程序的“Web”性质可以抛开不谈,您完全可以利用自己的桌面开发经验来快速入门。
演练:挂接事件处理程序
1.双击设计图面上的 Button 控件为其 Click 事件生成代码。
2.输入以下代码。
Label1.Text = "欢迎使用 " & TextBox1.Text
3.按 F5“运行”该 Web 应用程序。
4.在“User Name”文本框输入您的名字。
5.单击“Button”按钮。您会看见类似图 4 的内容。
图 4. 测试事件处理程序
这似乎很符合逻辑,但重要的是要了解这里究竟发生了什么情况。代码在 Web 服务器上运行以生成 HTML 页,HTML 页被发送到浏览器并进行显示。如果这是一个 Windows 应用程序,那么包含控件的“窗体”仍会继续运行,而且它可以包含变量等内容。但是,对于 Web 应用程序,当您看见浏览器中的用户界面时,服务器上的 page 类已被卸载。
管理状态
假定要构建一个在每两次用户交互之间必须关闭再重启的桌面应用程序。换句话说,应用程序先创建一个用户可以看见的窗体,而后终止。当用户单击窗体上的某个按钮时,应用程序会默默地重启、处理输入、生成新的“窗体”位图,然后关闭。这样的应用程序非常“健忘”。关闭时不保存和启动时不加载的所有数据都会丢失。窗体级变量实际没什么用处了,因为这些变量的值将会在关闭和启动之间丢失。听起来很奇怪,但实际上这就是 Web 应用程序的工作方式。下列演练将说明这一行为方式。
1.在 Visual Studio 2005 的“解决方案资源管理器”中,右键单击“Default.aspx”,然后单击“查看代码”。
2.在 Inherits System.Web.UI.Page 后面的一行中输入下列代码。
Public previousUser As String
这是一个页面级别的变量,用于存储先前输入的用户名。3.按如下所示修改 Button1_Click 事件处理程序的代码。
Label1.Text = "您以前叫 " & previousUser & ",现在叫 " & TextBox1.Text
previousUser = TextBox1.Text
如果运行该应用程序,请输入名称 Fred,单击按钮,然后输入名称 Jim 并再次单击按钮,此时应当看到消息:您以前叫 Fred,现在叫 Jim。在桌面应用程序中,此代码会如此工作。但您会发现结果并不是您想像的那样。
4.按 F5 运行该应用程序。
5.输入 Fred 并单击按钮。
6.输入 Jim 并单击按钮。
注意,previousUser 的值始终都不会显示出来。它总是说:您以前叫 ,现在叫 Jim。究竟出了什么问题?
问题在于,每次单击按钮时,page 类都会被破坏然后重新创建。也就是说这一过程是:将 previousUser 创建并初始化为一个空字符串,然后为其分配文本框中的值,页面处理完成,破坏 page 类,丢弃 previousUser 变量。当再次单击按钮时,再重复这一过程。
页面不能用来存储站点需要在几次用户交互之间记住的任何信息。而 ASP.NET 通过“Session”变量来提供这种存储功能。
7.按如下所示修改 Button1_Click 事件处理程序的代码。
Label1.Text = "您以前叫 " & Session("previousUser") & ",现在叫 " & TextBox1.Text
Session("previousUser") = TextBox1.Text
8.按 F5 运行该应用程序。
9.输入 Fred 并单击按钮。
10.输入 Jim 并单击按钮。
现在,一切就如您所愿了(请参见图 5)。通过使用 Session 变量,站点可以跨越用户交互记住有用信息。
图 5. 使用 Session 变量管理状态
管理状态是 Web 开发和桌面开发之间最大的区别。如果您需要 Web 站点来跨越用户交互记住任何信息(通常要这样做),就不能使用简单的变量来存储该信息。而是必须使用像 Session 之类的变量来明确地指示 Web 服务器记住某个值。
以数据为中心的站点
大多数 Web 站点主要作为用户界面运行于数据库信息之上。ASP.NET 2.0 可以有效地简化这些类型的站点。下一个演练会让您对此有个大致的了解。注意,构建完全以数据为中心的站点是一个很大的课题,本文无法对其进行详尽的介绍。尽管如此,其他资源部分会指引您到多个位置获得更多信息。
要执行下列演练,将需要下载并安装 SQL Express 和 Northwind 示例数据库。其链接可在其他资源部分找到。
1.在“解决方案资源管理器”的“项目”菜单上,单击“添加新项”。
2.在“模板”中,选择“WebForm”,然后单击“添加”。
3.单击代码编辑器窗口底部的“设计”选项卡。
4.从工具箱的“数据”部分,将 GridView 控件拖动到设计器上。
5.从“GridView 任务”智能标记中,单击“选择数据源”,然后单击“<新建数据源>”。
6.在“选择数据源类型”对话框中,选择“数据库”并单击“确定”。
7.单击“新建连接”。
8.如果安装了 SQL Server,在“服务器名称”中,输入 localhost。如果安装了 SQL Express,则输入 .\sqlexpress。
9.在“选择或输入数据库”中,输入 Northwind。
10.单击“测试连接”,以确保可以连接数据库。
11.单击“确定”。
12.单击“下一步”。
连接字符串等信息并未硬编码到应用程序中,而是存放在 Web app.config 文件中,在这里无需更改源代码即可轻松地更改这些信息。此时程序会提示您输入此文件名以便获得连接字符串。
13.在“保存连接字符串”对话框中,单击“下一步”。然后,程序会提示您输入要显示的数据源。可以输入专门的 SQL,使用存储的过程,或选择特定的表格或视图。
14.在“名称”下拉列表中,单击“顺序”。
15.在“列”中,选择 *。
16.单击“下一步”。
17.单击“测试查询”,以确保与数据库之间的通信能正常运行。
18.单击“完成”。
注意 GridView 控件显示设计时的数据库列。您也可以完全控制网格的呈现方式。对 Web 站点采用一致观感的标准 Web 方法是通过称为“级联样式表”的技术。但一种更为简单的方法是:自动套用网格格式,这与在 Microsoft Office 中拾取自动格式的方法非常相似。
19.右键单击 GridView 控件,再单击“自动套用格式”。
20.选择一种格式,如“专业”。
GridView 控件还支持许多高级功能,如排序和分页(无需任何编码)。
21.右键单击 GridView 控件,再单击“属性”。
22.在“属性面板”中,将 AllowPaging 属性设置为 True。
23.将 AllowSorting 属性设置为 True。
24.按 F5 运行该 Web 应用程序。
25.应用程序应如图 6 所示。