项目 6 动态网页设计

/ 451

项项目目66 动动态态网网页页设设计计

项目项目 6 6 动态网页设计动态网页设计

知识技能目标

了解常用动态网页设计技术

掌握 .net 页面连接与访问数据库的基本方法

本单元理论授课 6 学时，上机操作 6 学时。

/ 452


课次 20 课时 2 教具投影仪备注课题任务 1 动态网页技术目的掌握 ASP 及其内置对象的使用重点 ASP 常用内置对象的使用

难点无

任务任务 1 1 动态网页技术动态网页技术

一、任务分析

张先生的网站除了展示企业形象和宣传产品外，因为还具有简单的商品管理

和客户管理的功能，也就是说具有访问后台数据库的能力，实际上是一个动态

网站。另外，张先生还要求为他的网站设置一个网站计数器，从而随时掌握网

站访问情况。下面我们就为张先生的网站设计添加这些功能。

/ 453


二、相关知识（一）动态网页技术简介　　所谓“动态”，并不是指放在网页中的动画，动态网页应具备以下几个特点：交互性：即网页显示内容会根据用户的要求和选择而动态改变和响应，将网页作为客户端输入界面，这是 Web 发展的大势所趋。自动更新：可自动生成相应页面，从而大大节省工作量。因时因人而变：不同时间、不同人访问时可以产生不同的页面输出。

（二）常用动态网页开发技术常用动态网页技术有 CGI 、 JSP 、 ASP / ASP.NET 、 PHP 等，它们的特点如下：　　 1 ． CGI 　　在早期，动态网页技术主要采用 CGI 技术，即 Common Gateway Interface （公用网关接口）。可以使用不同的语言编写 CGI 程序，如 VB 、 Delphi 或C/C++ 等。将已经写好的 CGI 程序放在 Web 服务器上运行，再将其运行结果通过 Web 服务器传输到客户端的浏览器上。通过 CGI建立前台 Web 页面与后台脚本程序之间的联系，并且可以利用脚本程序来处理访问者输入的信息并据此作出响应。这样的编程方式比较困难且效率低下，因为每一次修改都必须重新将 CGI 程序编译成可执行文件，所以目前已经较少使用。

/ 454


2 ． ASP

　　 ASP 是微软提出的动态网页构架。 ASP 更精确地说是一个中间件，这个中

间件将 Web 上的请求转入到一个解释器中，在这个解释器中将所有的 ASP脚本

进行分析并执行，而这时可以在这个中间件中去创建一个新的 COM对象，对这

个对象中的属性和方法进行操作和调用，同时再通过这些 COM组件再完成更多

的工作。 ASP 的强大不在于它的 VBScript ，而在于它后台的 COM组件，这些

组件扩充了 ASP 的能力。 ASP 的主要优点如下：

简单易学。 ASP 后台主要使用 VBScript ，很少有人不会，开发基础广

泛

安装使用方便。装好系统后只要安装 IIS ， ASP 就可以使用了。

开发工具强大而多样。现在已经有许多可视化的开发工具。当然也可以

用 Dreamweaver 、 ASP Studio ，甚至使用记事本来编辑 ASP 程序。

效率高。在较低的访问量下， ASP 能体现出一定的效率。

/ 455


ASP 主要缺点如下：

Windows本身的所有问题都会一成不变的累加到 ASP 的身上。安全性、

稳定性、跨平台性等问题都会因为与 NT 的捆绑而显现出来。

ASP由于使用了 COM组件会变的十分强大，但是由于Windows NT系

统最初的设计问题也会引发大量的安全性问题。只要在这样的组件或是操作

中稍不注意，外部攻击就可以取得相当高的权限而导致网站瘫痪或者数据丢

失。

ASP 是一种脚本语言，除了大量使用组件外，没有办法提高其工作效率。

无法实现跨操作系统的应用。关于这一点微软的理由之一是“只有这样

才能发挥 ASP最佳的能力”。其实正是 Windows 限制了 ASP ， ASP 的概

念本来就是为系统运行于一个多样化环境而设计的。

还无法完全实现一些企业级的功能：如完全的集群、负载均衡等。

/ 456


3． PHP　　 PHP （ Hypertext Preprocessor ）是一种 HTML内嵌式的语言（类似于IIS 上的 ASP ）。而 PHP独特的语法混合了 C 、 Java 、 Perl 以及 PHP 的新语法，它可以比 CGI 或者 Perl 更快速的执行动态网页。 PHP 能够支持诸多数据库，如MS SQL Server 、MySql 、 Sybase 、 Oracle 等，它与 HTML语言具有非常好的兼容性。 PHP提供了标准的数据库接口，数据库连接方便，兼容性好，扩展性强，可以进行面向对象编程。 PHP 的优点如下：

是一种能快速学习、跨平台、有良好数据库交互能力的开发语言。它语法简单、书写容易，同时 Internet 上也有大量的代码可以共享。与 Apache 及其它扩展库结合紧密。 PHP 与 Apache 可以以静态编绎的方式结合起来，而与其它的扩展库也可以用这样的方式结合（ Windows 平台除外）。这种方式的最大的好处就是最大利用了 CPU时间和内存，同时极为有效的利用了 Apache 的高性能的吞吐能力。良好的安全性。由于 PHP 本身的代码开放所以它的代码在许多工程师手中进行了检测，同时它与 Apache 编绎在一起的方式也可以让它具有灵活的安全设定。到现在为止， PHP 具有了公认的安全性能。

/ 457


PHP 的缺点如下：

数据库支持的极大变化。由于 PHP 的所有扩展接口都是独立团队开发的，

同时在开发时为了形成相应数据的个性化操作，所以 PHP虽然支持许多数

据库，可是针对每种数据库的开发语言都完全不同。

安装复杂。由于 PHP 的每一种扩充模块并不是完全由 PHP 本身来完成，

需要许多外部的应用库，如图形需要 gd库， LDAP需要 LDAP 库，……，

这样在安装完成相应的应用后，再联编进 PHP 中来。

缺少企业级的支持。没有组件的支持，那么所有的扩充就只能依靠 PHP

开发组所给出的接口。缺少正规的商业支持，这也是自由软件一向的缺点。

无法实现商品化应用的开发。由于 PHP没有任何编绎性的开发工作，所

有的开发都是基于脚本技术来完成的，所有的源代码都无法编译，所以完成

的应用只能是自己或是内部使用，无法实现商品化。

/ 458


4． JSP JSP 页面由 HTML代码和嵌入其中的 Java代码所组成。服务器在页面被客户端请求以后对这些 Java代码进行处理，然后将生成的 HTML页面返回给客户端的浏览器。 Java Servlet 是 JSP 的技术基础，而且大型的 Web 应用程序的开发需要 Java Servlet 和 JSP配合才能完成。 JSP 具备了 Java 技术的简单易用、面向对象、与平台无关、安全可靠、面向Internet 等所有特点。 JSP 技术的主要优点如下：

多平台支持。基本上可以在所有平台上的任意环境中开发、部署和扩展。强大的可伸缩性。从只有一个小的 Jar文件就可以运行 Servlet/JSP ，到由多台服务器进行集群和负载均衡、多台 Application进行事务处理、消息处理等， Java都显示了巨大的生命力。多样化和功能强大的开发工具支持。 Java 已经有了许多非常优秀的开发工具（如MyEclips），并且其中许多可以运行于多种平台之下。

　　 JSP 技术缺点如下：与 ASP 一样， Java 的一些优势也是它的问题：为了跨平台的功能和极大的伸缩能力，从而大大增加了产品的复杂性。Java 的运行速度是用 class常驻内存来完成的，所以它在一些情况下相当耗费内存。它还需要硬盘空间来储存一系列的 .java文件和 .class 文件，以及对应的版本文件。

/ 459


（三） Visual Studio.NET 简介

Visual Studio.NET （简称 VS.NET ）是微软设计的独立于操作系统的开发平

台，可以将它看成一套虚拟机，无论机器运行什么操作系统，只要安装了 .NET

框架，便可以运行 .NET 可执行程序，享受基于 .NET 的各类服务。可以从以下

三个方面来理解 .NET ：

1 ．统一了编程语言

无论用 C#，还是 C++ ，或是 VB 编写，最终都被编译为 .NET 中间语言 IL。

2 ．扩展了可执行文件的格式

可执行文件中不再保存机器码，而是 IL指令和元数据，部分结构也被改变用

于保存 .NET 的相关信息。

3．改变了程序的运行方式

Windows不再直接负责程序的运行，而由 .NET框架进行管理。框架中的 JIT

引擎负责在运行时将 IL 代码即时编译为本地汇编代码再执行。

/ 4510


下面介绍几个关于 VS.NET 的基本概念。

1 ． .NET框架

框架（ Framework）一词有几种含义，在这里，它指的是创建和运行应用程

序的基础。拥有这样的基础使得创建应用程序变得更容易。

虽然 VB足够灵活，可以提供这些不同的可扩展性机制，但这种灵活性仍然需

要你学习几种复杂的 API体系结构。你需要了解 Win32 如何工作，如何在 VB

中调用它们，还需要了解如何在 VB 中使用各种 COM组件。

最后，当你使用 Win32 API 、 ADO（也可能使用许多其他 COM组件）创建

自己的 VB 应用程序时，你需要管理这些应用程序的部署以及它们的相关性。

公共框架背后的想法就是要解决以上这些问题，并使得用户创建健壮的应用程

序变得更加容易，而无须学习多种不同的 API体系结构，并且无须部署和处理多

种对象库的版本问题。

/ 4511


2 ．什么是 .NET Framework

.NET Framework指的是构成Microsoft .NET平台开发基础的一组技术，其

中的关键技术是运行时（ Runtime ）和类库。

运行时负责管理代码，在执行时向它们提供服务，这与 VB 6.0 运行时的作用

类似。 .NET 程序设计语言通过一组公共的统一类来利用各种服务和特性。

由于 .NET Framework，部署 VB .NET 应用程序变得更容易了。与 VB 6.0

应用程序不同，你无须配置各种相关性，如单独的数据访问库、 XML语法分析

器和网络 API ，因为所有这些功能都是 .NET Framework的组成部分。

3． .NET Framework与 Visual Basic .NET

作为一个 VB 开发人员，你从 .NET Framework获得的最重要的益处是，可

以使用一致的程序设计模型既直接又容易地访问 .NET平台。这意味着，你可以

使用 VB .NET创建很难或不可能使用 VB 6.0创建的应用程序。

/ 4512


4．跟踪与事件记录当创建一个健壮的应用程序的时候，你必须密切注意诊断和故障排除机制。这包括编写处理打开输出目标（事件记录或文件）的跟踪组件，编写跟踪消息和关闭输出目标。然后通过自己的代码调用关于这个组件的方法，将文本传递给记录。你将所有的时间和精力花在了创建跟踪和记录子系统上，这最终并不会对解决商务问题有所贡献，但这是创建应用程序所必需的。 .NET Framework包括类和其他数据类型，通过向你提供记录基础设施，使得记录跟踪消息变得很容易。

5．多线程应用程序 .NET Framework一个很重要的特性是可以在不使用第三方工具的情况下，使用 VB创建多线程程序。 .NET Framework的多线程支持是由 System.Threading名称空间中的类和接口提供的，因此所有的 .NET 语言都能够以相同的方式创建和处理线程。

/ 4513


（四） ASP 及其内置对象 1. ASP概述 ASP 是 Active Server Page 的缩写，利用 ASP 可以开发动态、交互、高效的Web 服务器端应用程序，并且能够实现复杂的 Web 应用系统，包括电子商务系统。

2 ． ASP 的处理流程任何一个 Web 服务器，只要安装有 ASP 解释程序，就支持 ASP 程序。 ASP页面是以 .asp 为扩展名的文本文件。当浏览器向服务器请求 .asp文件时， Web 服务器调用 ASP 解释程序，执行所有需要在服务器端运行的脚本命令，并将执行结果传送给客户端浏览器。显然，在 Web 服务器端运行的脚本大大提高了程序的安全性，也不必担心浏览器能否支持此脚本。

3． ASP脚本 ASP 程序是由 HTML标记和脚本语言组合而成的。只要 Web 服务器上安装了相应语言的脚本引擎，就可以用任何脚本语言来编写 ASP 程序中的脚本部分。常用的脚本语言有 VBScript 和 JavaScript ，这两种脚本既可运行在服务器端，也可以运行在客户端。服务器端脚本执行完后，由Web 服务器生成相应的HTML页面，送到客户端浏览器显示。

/ 4514


在 ASP 页面中，服务器端脚本要用分隔符“ <%” 和“%>”括起来，或在<script>标记中加“ runat=server”属性表示脚本要在服务器端执行。例如： <script language=”VBScript” runat=”server”>脚本代码 </script>

客户端脚本由浏览器处理，将脚本嵌入在 <script>与 </script>之间即可。例如： <script language=“VBScript”>脚本代码 </script>

例 6.1 ASP 动态页面示例。运行结果如下。<%@language=VBScript%><html><head><title>VBScript脚本 </title></head><body><Script Language="VBScript"> Dim ctime ctime=now() document.write ctime&"是客户端的时间 "</script><br><%=(now())%>是服务器时间</body></html>

/ 4515


4． ASP 的包含文件可以使用 #include 语句将其他文件插入到当前的 ASP文件中。格式如下： #include virtual | file =”文件名”

(1) 使用 virtual 关键字（虚拟目录）用法： #include virtual =”/Myapp/文件名”

(2) 使用 file 关键字（相对路径）用法： #include file =”Myapp/文件名”

如果要包含的文件在当前网页目录的Myapp子目录中，可以使用以上格式。通常，被包含的文件并不要求特定的扩展名，但习惯上使用 .inc扩展名。 ASP 程序中可多次包含同一文件，被包含的文件也可以包含其他文件，只要不导致循环包含。如 A包含 B ，则 B 不能再包含 A ，另外，文件也不能包含自身。

/ 4516


（五） ASP 的内建对象在网络程序的访问过程中，浏览者常需要与服务器交换数据。 ASP 通过其提供的一些内建对象，使用户更容易收集与存储通过浏览器发送给服务器或服务器响应浏览器的信息。 ASP提供的内建对象有 Request 、 Response 、 Application 、 Session 、Server 和 Error 。例如接受客户端提交的数据通过 Request 对象实现；将服务器端数据发给客户端用 Response 对象；同一站点各客户的会话通过 Application 对象实现；同一客户各页面间则用 Session 传递数据。 1. 基本概念 ASP 是在服务器上运行 Active X脚本和 Active X组件的服务器端脚本环境。 Active X组件包含了执行一组任务的代码，程序员可以直接使用这些组件，而不必自己去创建执行这些任务的代码。组件是包含在动态链接库（ .dll ）或可执行文件（ .exe ）中的可执行代码，它可以提供一个或多个对象以及对象的方法和属性。要使用组件提供的对象，应先创建对象的实例并为这个实例命名。使用 Server.CreateObject 方法可以创建对象的实例，例如： Set db=Server.CreateObject(“ADODB.Connection”) 该句创建了访问数据库的对象实例 db 。

/ 4517


2. Request 对象使用 Request 对象可以访问基于 HTTP 传递的所有信息。例如， value=Request.Form(Name)，用于从 HTML表单中取得用 POST 方法传递的变量 Name 的数据。实际上，根据用户不同的提交方式，数据被分别存放到了 Request 对象的 QueryString、 Form 、 Cookies、 ClientCertificate 和 ServerVariables 等 5个数据集合中。 HTML表单提交时数据通过浏览器传递给服务器的 Request 对象，传递的方式有两种： POST 方法和 GET 方法。 GET 方法传递过来的数据保存在 QueryString 集合中， POST 方法传递过来的数据保存在 Form集合中。 (1) Form集合例 6.2 Request 对象的 Form集合应用示例。（ ex6-2.asp ）<html><head><title>Request 对象的 Form集合应用示例 </title></head><body>请填写你的爱好 <P><form method="POST" action=""><input type="text" name="hobby" size="20"><br><input type="checkbox" name="hobby" value=" 足球 ">足球<input type="checkbox" name="hobby" value=" 乒乓球 ">乒乓球 <P><input type="submit" name="B1" value="提交 "><input type="reset" name="B2" value="重填 "><P></form>

/ 4518


<%‘第一种方法 Response.Write "<br>直接显示 hobby集合中的所有的数据 <br>" Response.Write Request.Form("hobby")&"<br>"‘第二种方法 Response.Write "<br>用 for Each…next 分行显示数据 <br>" For Each i In Request.Form("hobby") Response.Write i&"<br>" next‘第三种方法 Response.Write "<br>用 for … next 分行显示数据 <br>" For i=1 to Request.Form("hobby").Count Response.Write Request.Form("hobby")(i)&"<br>" next%></body></html> 运行时文本框输入“计算机”，并选中 “乒乓球”项，其运行结果如上。

/ 4519


例 6.3 将例 6.2 的代码修改如下，分别获取表单中各控件的值：<html><head><title>Request 对象的 Form集合应用示例 </title></head><body>请填写你的爱好 <P><form method="POST" action=""><input type="text" name="text1" size="20"><br><input type="checkbox" name="hobby1" value=" 足球 ">足球<input type="checkbox" name="hobby2" value=" 乒乓球 ">乒乓球 <P><input type="submit" name="B1" value="提交 "><input type="reset" name="B2" value="重填 "><P></form><%dim istristr=Request.Form("text1")if Request.Form("hobby1")<>"0" then istr=istr & Request.Form("hobby1")end ifif Request.Form("hobby2")<>"0" then istr=istr & Request.Form("hobby2")end ifResponse.Write " 你的输入和选择是： " & istr%></body></html> 在文本框输入“ aaa” ，并选择“乒乓球”，提交后显示结果如上。

/ 4520


(2) Response 对象的 QueryString数据集除了 POST 方式外，还可以用三种 GET 方式向服务器（页面）传递参数（下面的 name 、 pwd、 sex分别是页面中表单内的控件）： a) 直接在浏览器地址栏中输入链接，包含“ ?” 及其后的参数，例如： http://www.ebook.com/log.asp?name＝ ljm&pwd=nihao&sex=Female

b) 在页面中使用超链接，例如： <A href=www.ebook.com/log.asp?name＝ ljm&pwd=nihao&sex=Female></A>

c) 在页面的表单中输入，例如： <form mthod="GET" action="log.asp"> <input type="text" name="name"> <input type="password" name="pwd"> <select name="sex"> <option>Male</option> <option>Female</option> </select> </form>

运行方式 a)或 b)或 c ）下输入 ljm 、 nihao, 选 Female 并提交时，都会在浏览器地址栏显示： http://www.ebook.com/log.asp?name=ljm&pwd=nihao&sex=Female

/ 4521


用 GET 方式传递的数据要用 Request 对象的 QueryString 集合来获得。例

如：

<%

dim n,p,s

n=Request.QueryString("name")

p=Request.QueryString("pwd")

s=Request.QueryString("sex")

Response.Write " 你的输入和选择是： " & n & p & s

%>

GET 方法仅适合于提交较少的数据且安全性要求不高的场合。

(3) Cookie集合

Cookie集合是 Request 和 Response 对象常用的集合，可用来记录客户端用

户帐号、密码等信息，以便再次访问时不用再输入这些信息。

/ 4522


Cookie 是文本文件，是服务器在客户端写入的小文件，在 Win2000/XP 下被存放在“ C:\Document and Settings\用户名 \Cookie”子目录中。当再次访问站点时，站点页面会在客户端查找这些 Cookie 标记，每个 Web 站点都有自己的标记。用户可以禁用这些 Cookie ，在 IE浏览器中，使用【工具】菜单 \ 【 Internet 选项】 \【隐私】卡片 \【高级】按钮，点选“覆盖自动 Cookie处理”。如下。

/ 4523


例 6.4 Cookie集合应用示例（ ex7_21.asp ）。 <% Response.Cookies("nike").Expires="2008-10-20" '指定 Cookie 的过期日期 Response.Cookies("nike")=Request.Form("name") '将用户名写入 Cookie 中 Response.Write " 欢迎 "&Request.Cookies("nike")&" 光临网上书店！ " %> <html><head><title>Cookie集合应用示例</title></head> <body> <form method="POST" action="ex7_21.asp"> <P><input type="text" name="name" size="20"> <input type="submit" value="提交 " name="B1"> <input type="reset" value="重写 " name="B2"> </form> </body></html>

运行时在文本框中输入“张三”，点“提交”钮，显示结果如上。

/ 4524


3. Response 对象 Request 对象用来将服务器的数据发送到浏览器，包括直接将服务器端的数据用超文本的格式发送到浏览器上、重定向浏览器到另一个 URL、设置浏览器端Cookie 的值等。例如“ Response.Cookies(cookie键值 )＝值”将设置 Cookie 的值，若指定的 Cookie 不存在，则创建它；若存在，则用新值替代旧值。可用 Response 的 Expires 属性设置浏览器缓冲区内存储的页面保持的时间，如： Response.Expires＝ n(分钟 )，这对于安全性要求较高的页面是有用的。Response 对象还有两个常用的方法 Write 和 Redirect 。 (1) Write 方法用来显示输出，内容包括文本串、 HTML标记和脚本，例如： Response.Write("<script>alert('密码错误 !')</script>") Response.Write(" 欢迎再次光临本站！ ")

(2) Response 的 Redirect 方法可以重定向到一个 URL 地址，例如： Response.Redirect("lx.asp")

/ 4525


4. Session 对象浏览Web 站点时，使用 Session 对象可以为用户保存指定的信息。用户在 Web 应用程序的网页之间跳转时，存储在 Session 对象中的信息不会丢失，而是在整个用户会话中一直存在，所以常用 Session 在各页面间传递数据。例如，在登录页面输入用户名，再转到 index.asp 页面： Session("用户名 ") = "XXX" ‘XXX代表输入或选择的用户名 Response.Redirect("index.asp") ‘链接到 index.asp 页面，并传递 Session("用户名 ")的值

而在 index.asp 页面初始化时可执行如下判断： If Session("用户名 ") = "系统管理员 " Then … else Response.Redirect("qxerr.asp") ‘链接到非法用户显示页面 End If

/ 4526


有关 Session 对象的其他说明：

(1) Session 对象的 TimeOut属性用来指定应用程序 Session 对象的超时时

限（分钟），默认为 20 分钟。如： <% Session.TimeOut=5 %>

(2) Session 对象的 Abandon 方法用来删除所有存储在 Session 对象中的值

并释放这些对象的源。如： <% Session.Abandon %>

会话超时时服务器也会删除 Session 对象中的值。

(3) Session 和 Cookie 的区别是 Session 数据存储在服务器端而 Cookie 数

据存储在客户端（磁盘文件），因而 Session 的安全性较高。但 Session只能

在一个对话期的相应页面间共享信息，而 Cookie却不受此限制。

（六） Visual Basic .NET 语言基础（略）

/ 4527


三、任务实施【任务场景】为张先生的网页添加站点计数器。【操作环境】Windows XP 、 Dreamweaver 或记事本、 IIS 、 Access2003。【操作步骤】步骤 1 在首页所在目录中建立一个名为 counter.mdb 的 Access数据库，密码为 xxx，其中有一个名为 counter 的表，表中有一个名为 count 的数字型字段，表中只有一条记录，初值为 1；步骤 2 在首页中显示站点计数的位置插入一个浮动框架，框架名称为 aa ，代码如下：<iframe name="aa" allowTransparency="true" width="178" height="36" scrolling="no" frameborder="0"> </iframe> 步骤 3 在首页中 <head>标记中插入以下代码：<script language="JavaScript">function NewWindow1(){ var my=open("count.asp","aa","toolbar=no,menubar=no")}</script> 步骤 4 在首页的 <body>标记中加入以下代码：onLoad="NewWindow1()" 步骤 5 在首页所在目录中建立文件 count.asp ，内容如下：

/ 4528


<%If Not IsPostBack Then db=Server.MapPath("counter.mdb") Set connObj=Server.CreateObject("ADODB.Connection") connObj.Open "DBQ="&db&";DefaultDir=;DRIVER={Microsoft Access Driver (*.mdb)};UID=;PWD=xxx;" set rsObj=Server.CreateObject("ADODB.Recordset") rsObj.Open "select * from counter",connObj,1,3 rsObj("count")=rsObj("count")+1 response.write " 您是本站第 "&trim(rsObj("count"))&" 位访客！ " rsObj.Update rsObj.Close set rsObj=nothing connObj.Close set connObj=nothingend if%>注：如果首页本身就是一个 asp 页面，则步骤 2 、 3、 4可省略，只要将步骤5中的代码插入到站点计数器显示位置即可。

/ 4529


课次 21 课时 2 教具投影仪备注课题任务 2 Web 数据库访问技术目的掌握使用 VB.NET进行数据库操作的基本技术重点 VB.NET 数据库访问技术

难点无

任务任务 2 Web2 Web 数据库访问技术数据库访问技术

一、任务分析

使用 VB .NET 为张先生的网页添加客户管理页面。为便于讲解，这里使用 Ac

cess数据库。

二、相关知识

（一） Access数据库基础知识

（二） VB.NET 连接 Access数据库的基本方法

/ 4530


三、任务实施【任务场景】为张先生的网页添加管理用户（或商品）数据表的功能。【操作环境】Windows XP 、 VS.NET 、 IIS 、 SQL Server 。【操作步骤】（一）建立工作目录，例 d:\abc ，并使 IIS 主目录指向该工作目录；（二）建立数据库及表，并将数据库文件拷入工作目录，如果是新建数据库，按以下操作进行： 1 、启动 Access，新建数据库 yhgl.mdb ，存放到工作目录，密码设为 xxx。数据库中有两个表，结构如下： (1) 用户表 (user1) 用户名 (char,10)，密码 (char,8)，权限 (char,1)， id(自动编号 )

(2) 权限表 (qx)　　权限 (char,1)， id(自动编号 )

2 、手工往表中输入若干条记录

/ 4531


（三）用户管理页面设计 (yhgl.aspx) 该页面 (效果见前页图片 )具有对 user1表进行查询、添加、删除和修改(只允许修改密码和权限 )记录等功能。 1、启动 vs.net，新建 Visual Basic项目，模板为 ASP.NET Web应用程序，位置为 http://localhost，即 IIS主目录 d:\abc，确定后系统会自动在工作目录下建立一个 bin子目录和若干系统文件 ,并且创建一个名为WebForm1.aspx的Web窗体页面，在右侧的 " ”解决方案资源管理器中

“ ”右键单击此页面选择重命名将其改名为 yhgl.aspx ；右键单击此页面选“ ”择将其设为起始页。

2 、设置数据库连接串在配置文件Web.config中<configuration>后面加入如下的内容： <appSettings> <add key="data" value="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="/> <add key="data1" value="yhgl.mdb"/> <add key="data2" value=";jet oledb:database password=xxx"/> </appSettings> 注：加入上面代码能使各页面从配置文件中通过 key定义的各键值得到数据库连接串。这里的三个键值 data、 data1、 data2被读到页面后再组合成实际的连接串。

/ 4532


3、为页面添加两个数据集对象　在页面窗口左侧“工具箱”的“数据”栏中向页面拖入两个非类型化数据集(DataSet)对象 ,分别重命名为 ds1 和 ds2 。

注：如未显示出“工具箱”或“属性”面板，可在“视图”菜单中进行打开。

4、前台界面设计　 (1) 从左侧工具箱往页面中加入 1 个 DataGrid控件（ DataSource属性设为 ds1 ， DataMember属性设为 user1, DataKeyField属性为用户名） (2) 加入 4个 Label控件（ Text属性分别为用户数、用户名、密码、权限） (3) 加入 2 个 TextBox控件 (4) 加入 1 个 DropDownList控件（ DataSource属性设为 ds2 ， DataMember属性设为 qx, DataValueField属性为权限） (5) 加入 1 个 Button控件（ Text属性为“添加此记录”）。 (6) 右击 DataGrid控件，选择“属性生成器”，在“列”卡片中取消“在运行时自动创建”复选框，为 DataGrid控件添加 3个模板列（页眉文本分别为用户名、密码、权限）和 2 个按钮列（“编辑 \更新 \取消”和“删除”， PushButton类型）。再对“分页”、“格式”、“边框”三个卡片分别进行相关设置。

/ 4533


其中第 1个模板列 (用户名 )是一个标签，HTML代码如下：<asp:TemplateColumn HeaderText="用户名 "><ItemStyle Width="120px"></ItemStyle><ItemTemplate><asp:label id="Label7" runat="server" text='<%# DataBinder.Eval(Container,"DataItem.用户名 ") %>'></asp:label></ItemTemplate></asp:TemplateColumn> 将此代码粘贴到页面的HTML代码相应位置。

第 2个模板列 (密码 )平时为标签，编辑时为文本框，HTML代码如下：<asp:TemplateColumn HeaderText="密码 "><ItemStyle Width="280px"></ItemStyle><ItemTemplate><asp:label id="Label5" runat="server" text='<%# DataBinder.Eval(Container,"DataItem.密码 ") %>'></asp:label></ItemTemplate><EditItemTemplate><asp:TextBox id="Textbox3" runat="server" Width="276" Text='<%# DataBinder.Eval(Container,"DataItem.密码 ") %>'></asp:TextBox></EditItemTemplate></asp:TemplateColumn> 将此代码粘贴到页面的HTML代码相应位置。

/ 4534


第 3个模板列 (权限 )平时为标签，编辑时为下拉列表框，HTML代码如

下：

<asp:TemplateColumn HeaderText="权限 ">

<ItemStyle Width="120px"></ItemStyle>

<ItemTemplate>

<asp:label id="xb0" runat="server" text='<%#

DataBinder.Eval(Container,"DataItem.权限 ") %>'>

</asp:label>

</ItemTemplate>

<EditItemTemplate>

<asp:DropDownList id="xb1" runat="server" width="112"

DataSource ="<%# ds2 %>" DataMember="qx"

DataTextField="权限 " DataValueField="权限 ">

</asp:DropDownList>

</EditItemTemplate>

</asp:TemplateColumn>

将此代码粘贴到页面的HTML代码相应位置。

/ 4535


5、后台代码设计 (1) 双击页面空白处，在页面代码最前面加入下列代码以导入类名空间： Imports System.Data.OleDb

(2) 从配置文件中读取并生成数据库连接串在页面装载 (Page_Load)代码前面加入以下代码： Dim connstr As String =

System.Configuration.ConfigurationSettings.AppSettings("da

ta") '读取键值 Dim connstr1 As String =


ta1")

Dim connstr2 As String =


ta2")

Dim connstr3 As String = connstr +

System.Web.HttpContext.Current.Server.MapPath(connstr1)

+ connstr2

Dim connection As New OleDbConnection(connstr3) '建立连接

/ 4536


(3) 在页面装载 (Page_Load)时执行以下代码：

If Not IsPostBack Then

Dim adp1 As New Data.OleDb.OleDbDataAdapter("select

* from user1", connection) '建立查询适配器

Dim adp2 As New Data.OleDb.OleDbDataAdapter("select

* from qx", connection) '建立查询适配器

connection.Open() '打开数据连接

adp1.Fill(ds1, "user1") '查询命令执行的结果填充到数据集 ds1中

DataGrid1.DataBind() '数据绑定

adp2.Fill(ds2, "qx") '查询命令执行的结果填充到数据集 ds2中

DropDownList1.DataBind()

Label1.Text = "用户数： " &

ds1.Tables("user1").Rows.Count

End If

/ 4537


(4) 增加翻页功能第 1步：在代码中添加以下过程 (DataGrid页号变化时触发 )

Sub Grid_Change(ByVal sender As Object, ByVal e As

DataGridPageChangedEventArgs)

DataGrid1.CurrentPageIndex = e.NewPageIndex

DataGrid1.EditItemIndex = -1 '取消编辑状态 Dim adp As New Data.OleDb.OleDbDataAdapter("select *

from user1", connection)

connection.Open() '打开数据连接 adp.Fill(ds1, "user1") '命令执行的结果填充到数据集 ds1中 DataGrid1.DataBind()

End Sub

第 2步：在HTML代码中<asp: DataGrid>标记行尾部（尖括号内）加入 OnPageIndexChanged="grid_change" ，以使点击页码按钮时

能调用 grid_change过程

/ 4538


(5) “ ”为添加此记录按钮设置点击事件代码： DataGrid1.EditItemIndex = -1 '取消编辑状态 Dim x, y, z As String

x = TextBox2.Text

y = DropDownList1.SelectedValue.Trim

If TextBox1.Text = "" Then

Response.Write("<script language='javascript'>alert('用户名不能空白 !')</script>")

Dim adp As New Data.OleDb.OleDbDataAdapter("select *

from user1", connection) '建立查询适配器 connection.Open() '打开数据连接 adp.Fill(ds1, "user1") '命令执行的结果填充到数据集 ds1中 TextBox2.Text = x

DropDownList1.Items.FindByText(y).Selected = True

Label1.Text = "用户数： " & ds1.Tables("user1").Rows.Count

Else

/ 4539


Dim sqlstr As String = "insert into user1 values ('" + TextBox1.Text + "','" + TextBox2.Text + "','" + DropDownList1.SelectedValue + "',1)" Dim cmd As New Data.OleDb.OleDbCommand(sqlstr, connection) Dim adp As New Data.OleDb.OleDbDataAdapter("select * from user1", connection) '建立查询适配器 Dim adp1 As New Data.OleDb.OleDbDataAdapter("select * from user1 where 用户名='" + TextBox1.Text + "'", connection) '建立查询适配器 connection.Open() '打开数据连接 adp1.Fill(ds1, "user1") '把对 user1查询的结果埴充到数据集 ds1中 If ds1.Tables("user1").Rows.Count = 0 Then '如果表中无此用户 cmd.ExecuteNonQuery() '执行 insert into命令 ,添加用户 adp.Fill(ds1, "user1") '把对 user1查询的结果埴充到数据集 ds1中 DataGrid1.DataBind() Label1.Text = "用户数： " & ds1.Tables("user1").Rows.Count TextBox2.Text = "" Else Response.Write("<script language='javascript'>alert('此用户名已被使用 ,请另输一个 !')</script>") End If TextBox1.Text = ""End If

/ 4540


(6) “ ” “ ”为编辑和删除按钮添加事件代码Sub Grid_ItemCommand(ByVal source As System.Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) If e.CommandName = "Edit" Then DataGrid1.EditItemIndex = e.Item.ItemIndex Dim adp1 As New Data.OleDb.OleDbDataAdapter("select * from user1", connection) '建立查询适配器 Dim adp2 As New Data.OleDb.OleDbDataAdapter("select * from qx", connection) '建立查询适配器 connection.Open() '打开数据连接 adp1.Fill(ds1, "user1") '命令执行的结果填充到数据集 ds1中 adp2.Fill(ds2, "qx") '命令执行的结果填充到数据集 ds2中 DataGrid1.DataBind() End If If e.CommandName = "Cancel" Then DataGrid1.EditItemIndex = -1 '取消编辑状态 Dim adp As New Data.OleDb.OleDbDataAdapter("select * from user1", connection) connection.Open() adp.Fill(ds1, "user1") ‘查询命令执行的结果填充到数据集 ds1中 DataGrid1.DataBind() End If

/ 4541


If e.CommandName = "Delete" Then DataGrid1.EditItemIndex = -1 '取消编辑状态 Dim adp As New Data.OleDb.OleDbDataAdapter("select * from user1", connection) Dim cmd As New Data.OleDb.OleDbCommand("delete from user1 where 用户名='" + DataGrid1.DataKeys(e.Item.ItemIndex) + "'", connection) ‘建立删除命令 connection.Open() cmd.ExecuteNonQuery() '执行删除命令 adp.Fill(ds1, "user1") If Int(ds1.Tables("user1").Rows.Count / 10) = ds1.Tables("user1").Rows.Count / 10 Then If DataGrid1.CurrentPageIndex > 0 Then DataGrid1.CurrentPageIndex = DataGrid1.CurrentPageIndex - 1 End If End If DataGrid1.DataBind() Label1.Text = "用户数： " & ds1.Tables("user1").Rows.CountEnd If

/ 4542


If e.CommandName = "Update" Then Dim xm As TextBox Dim xxb As DropDownList Dim xxb2 As String Dim adp As New Data.OleDb.OleDbDataAdapter("select * from user1", connection) connection.Open() adp.Fill(ds1, "user1") xm = e.Item.FindControl("TextBox3") xxb = e.Item.FindControl("xb1") xxb2 = xxb.SelectedValue Dim sqlstr As String = "update user1 set 密码='" + xm.Text.Trim + "',权限='" + xxb2 + "' where 用户名='" + DataGrid1.DataKeys (e.Item.ItemIndex) + "'" Dim cmd As New Data.OleDb.OleDbCommand(sqlstr, connection) Try cmd.ExecuteNonQuery() '执行更新命令 Catch ex As Exception Console.WriteLine("操作提示： " + ex.Message) End Try connection.Close() Response.Redirect("yhgl.aspx") End Ifend sub

/ 4543


(7) 在HTML代码<asp: DataGrid> 标记行尾部（尖括号内）加上OnItemCommand= "Grid_ItemCommand" ,

“ ” “ ”以便点击编辑和删除按钮时能转到Grid_ItemCommand过程。

(8) “ ” “ ”添加以下过程，为删除按钮添加操作确认提示。设删除按钮在DataGrid的第 5列 (最左列为 1)。Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI. WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound Dim strState As String Dim DL1 As DropDownList Dim item As ListItem For Each link As System.Web.UI.WebControls.Button In e.Item.Cells(4).Controls link.Attributes.Add("onClick", "if (!window.confirm('您真的要删除这条记录吗？ ')){return false;}") NextEnd Sub

/ 4544


(9) 在上面的DataGrid1_ItemDataBound过程中加入以下代码 ,使得“ ” “ ”点击编辑时权限下拉列表框中选中该行权限的当前值

If e.Item.ItemType = ListItemType.EditItem Then strState = e.Item.DataItem.Row("权限 ").ToString() DL1 = e.Item.FindControl("xb1") '这里的 xb1应与模板中的控件名称一致 DL1.DataSource = "ds2" DL1.DataTextField = "权限 " DL1.DataBind() DL1.Items.FindByText(strState).Selected = True End If

(10) 完成，运行测试。

/ 4545


四、课堂实践例 6 ． 23 对上面的 DataGrid控件进一步设置其外观，如表格线的线形、颜色，单元格内部填充色及字体、字号、颜色等属性，以美化表格的显示外观。

动态网页设计小结

本章首先介绍了常用的动态页面技术，然后重点讲解了 Visual Basic .NET的基础知识，包括 Visual Basic .NET 的基本语法知识和 Visual Basic .NET 的Web 服务器常用控件，例如按钮控件（有文本和图形两种形式）、文本控件（包括标签和文本框）、选择控件（有单选钮和复选框两种）、列表选择控件（有列表框和下拉列表框两种，前者运行时占用区域大但可多选；后者平时占用界面区域小但只能单选）、超链接控件和图片控件等的使用方法，并介绍了利用可视化方法设计使用这些控件设计 Web 界面，进而快速创建Web 应用程序。单元二还简要介绍了 VS.NET 连接 SQL Server 数据库并通过 DataGrid网格控件显示表中数据记录的方法。

Documents

项目 6 动态网页设计