项目 6 动态网页设计

项目6 动态网页设计 • 知识技能目标 • 了解常用动态网页设计技术 • 掌握.net页面连接与访问数据库的基本方法本单元理论授课6学时，上机操作6学时。 / 45

任务1 动态网页技术 一、任务分析张先生的网站除了展示企业形象和宣传产品外，因为还具有简单的商品管理和客户管理的功能，也就是说具有访问后台数据库的能力，实际上是一个动态网站。另外，张先生还要求为他的网站设置一个网站计数器，从而随时掌握网站访问情况。下面我们就为张先生的网站设计添加这些功能。 / 45

二、相关知识 （一）动态网页技术简介　　所谓“动态”，并不是指放在网页中的动画，动态网页应具备以下几个特点：  交互性：即网页显示内容会根据用户的要求和选择而动态改变和响应，将网页作为客户端输入界面，这是Web发展的大势所趋。  自动更新：可自动生成相应页面，从而大大节省工作量。  因时因人而变：不同时间、不同人访问时可以产生不同的页面输出。（二）常用动态网页开发技术常用动态网页技术有CGI、JSP、ASP / ASP.NET、PHP等，它们的特点如下： 1．CGI 　　在早期，动态网页技术主要采用CGI技术，即Common Gateway Interface（公用网关接口）。可以使用不同的语言编写CGI程序，如VB、Delphi或C/C++等。将已经写好的CGI程序放在Web服务器上运行，再将其运行结果通过Web服务器传输到客户端的浏览器上。通过CGI建立前台Web页面与后台脚本程序之间的联系，并且可以利用脚本程序来处理访问者输入的信息并据此作出响应。这样的编程方式比较困难且效率低下，因为每一次修改都必须重新将CGI程序编译成可执行文件，所以目前已经较少使用。 / 45

2．ASP • ASP是微软提出的动态网页构架。ASP更精确地说是一个中间件，这个中间件将Web上的请求转入到一个解释器中，在这个解释器中将所有的ASP脚本进行分析并执行，而这时可以在这个中间件中去创建一个新的COM对象，对这个对象中的属性和方法进行操作和调用，同时再通过这些COM组件再完成更多的工作。ASP的强大不在于它的VBScript，而在于它后台的COM组件，这些组件扩充了ASP的能力。ASP的主要优点如下： • 简单易学。ASP后台主要使用VBScript，很少有人不会，开发基础广泛 • 安装使用方便。装好系统后只要安装IIS，ASP就可以使用了。 • 开发工具强大而多样。现在已经有许多可视化的开发工具。当然也可以用Dreamweaver、ASP Studio，甚至使用记事本来编辑ASP程序。 • 效率高。在较低的访问量下，ASP能体现出一定的效率。 / 45

ASP主要缺点如下： • Windows本身的所有问题都会一成不变的累加到ASP的身上。安全性、稳定性、跨平台性等问题都会因为与NT的捆绑而显现出来。 • ASP由于使用了COM组件会变的十分强大，但是由于Windows NT系统最初的设计问题也会引发大量的安全性问题。只要在这样的组件或是操作中稍不注意，外部攻击就可以取得相当高的权限而导致网站瘫痪或者数据丢失。 • ASP是一种脚本语言，除了大量使用组件外，没有办法提高其工作效率。 • 无法实现跨操作系统的应用。关于这一点微软的理由之一是“只有这样才能发挥ASP最佳的能力”。其实正是Windows限制了ASP，ASP的概念本来就是为系统运行于一个多样化环境而设计的。 • 还无法完全实现一些企业级的功能：如完全的集群、负载均衡等。 / 45

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具有了公认的安全性能。 / 45

PHP的缺点如下： • 数据库支持的极大变化。由于PHP的所有扩展接口都是独立团队开发的，同时在开发时为了形成相应数据的个性化操作，所以PHP虽然支持许多数据库，可是针对每种数据库的开发语言都完全不同。 • 安装复杂。由于PHP的每一种扩充模块并不是完全由PHP本身来完成，需要许多外部的应用库，如图形需要gd库，LDAP需要LDAP库，……，这样在安装完成相应的应用后，再联编进PHP中来。 • 缺少企业级的支持。没有组件的支持，那么所有的扩充就只能依靠PHP开发组所给出的接口。缺少正规的商业支持，这也是自由软件一向的缺点。 • 无法实现商品化应用的开发。由于PHP没有任何编绎性的开发工作，所有的开发都是基于脚本技术来完成的，所有的源代码都无法编译，所以完成的应用只能是自己或是内部使用，无法实现商品化。 / 45

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文件，以及对应的版本文件。 / 45

（三）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代码即时编译为本地汇编代码再执行。 / 45

下面介绍几个关于VS.NET的基本概念。 1．.NET框架框架（Framework）一词有几种含义，在这里，它指的是创建和运行应用程序的基础。拥有这样的基础使得创建应用程序变得更容易。虽然VB足够灵活，可以提供这些不同的可扩展性机制，但这种灵活性仍然需要你学习几种复杂的API体系结构。你需要了解Win32如何工作，如何在VB中调用它们，还需要了解如何在VB中使用各种COM组件。最后，当你使用Win32 API、ADO（也可能使用许多其他COM组件）创建自己的VB应用程序时，你需要管理这些应用程序的部署以及它们的相关性。公共框架背后的想法就是要解决以上这些问题，并使得用户创建健壮的应用程序变得更加容易，而无须学习多种不同的API体系结构，并且无须部署和处理多种对象库的版本问题。 / 45

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创建的应用程序。 / 45

4．跟踪与事件记录 当创建一个健壮的应用程序的时候，你必须密切注意诊断和故障排除机制。这包括编写处理打开输出目标（事件记录或文件）的跟踪组件，编写跟踪消息和关闭输出目标。然后通过自己的代码调用关于这个组件的方法，将文本传递给记录。你将所有的时间和精力花在了创建跟踪和记录子系统上，这最终并不会对解决商务问题有所贡献，但这是创建应用程序所必需的。 .NET Framework包括类和其他数据类型，通过向你提供记录基础设施，使得记录跟踪消息变得很容易。 5．多线程应用程序 .NET Framework一个很重要的特性是可以在不使用第三方工具的情况下，使用VB创建多线程程序。.NET Framework的多线程支持是由System.Threading名称空间中的类和接口提供的，因此所有的.NET语言都能够以相同的方式创建和处理线程。 / 45

（四）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页面，送到客户端浏览器显示。 / 45

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

4．ASP的包含文件 可以使用#include语句将其他文件插入到当前的ASP文件中。格式如下： #include virtual | file =”文件名” (1) 使用virtual关键字（虚拟目录）用法：#include virtual =”/Myapp/文件名” (2) 使用file关键字（相对路径）用法：#include file =”Myapp/文件名” 如果要包含的文件在当前网页目录的Myapp子目录中，可以使用以上格式。通常，被包含的文件并不要求特定的扩展名，但习惯上使用.inc扩展名。ASP程序中可多次包含同一文件，被包含的文件也可以包含其他文件，只要不导致循环包含。如A包含B，则B不能再包含A，另外，文件也不能包含自身。 / 45

（五）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。 / 45

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> / 45

<% ‘第一种方法 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> 运行时文本框输入“计算机”，并选中 “乒乓球”项，其运行结果如上。 / 45

例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 istr istr=Request.Form("text1") if Request.Form("hobby1")<>"0" then istr=istr & Request.Form("hobby1") end if if Request.Form("hobby2")<>"0" then istr=istr & Request.Form("hobby2") end if Response.Write "你的输入和选择是：" & istr %> </body></html> 在文本框输入“aaa”，并选择“乒乓球”，提交后显示结果如上。 / 45

(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 / 45

用GET方式传递的数据要用Request对象的QueryString集合来获得。例如：用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对象常用的集合，可用来记录客户端用户帐号、密码等信息，以便再次访问时不用再输入这些信息。 / 45

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

例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> 运行时在文本框中输入“张三”，点“提交”钮，显示结果如上。 / 45

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") / 45

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 / 45

有关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语言基础（略） / 45

三、任务实施 【任务场景】为张先生的网页添加站点计数器。【操作环境】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，内容如下： / 45

<% 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=nothing end if %> 注：如果首页本身就是一个asp页面，则步骤2、3、4可省略，只要将步骤5中的代码插入到站点计数器显示位置即可。 / 45

任务2 Web数据库访问技术 一、任务分析使用VB .NET为张先生的网页添加客户管理页面。为便于讲解，这里使用 Access数据库。二、相关知识（一）Access数据库基础知识（二）VB.NET连接Access数据库的基本方法 / 45

三、任务实施 【任务场景】为张先生的网页添加管理用户（或商品）数据表的功能。【操作环境】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、手工往表中输入若干条记录 / 45

（三）用户管理页面设计(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被读到页面后再组合成实际的连接串。 / 45

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类型）。再对“分页”、“格式”、“边框”三个卡片分别进行相关设置。 / 45

其中第1个模板列(用户名)是一个标签，HTML代码如下：其中第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代码相应位置。 / 45

第3个模板列(权限)平时为标签，编辑时为下拉列表框，HTML代码如下：第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代码相应位置。 / 45

5、后台代码设计 (1) 双击页面空白处，在页面代码最前面加入下列代码以导入类名空间： Imports System.Data.OleDb (2) 从配置文件中读取并生成数据库连接串在页面装载(Page_Load)代码前面加入以下代码： Dim connstr As String = System.Configuration.ConfigurationSettings.AppSettings("data") '读取键值 Dim connstr1 As String = System.Configuration.ConfigurationSettings.AppSettings("data1") Dim connstr2 As String = System.Configuration.ConfigurationSettings.AppSettings("data2") Dim connstr3 As String = connstr + System.Web.HttpContext.Current.Server.MapPath(connstr1) + connstr2 Dim connection As New OleDbConnection(connstr3) '建立连接 / 45

(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 / 45

(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过程 / 45

　(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 / 45

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 / 45

(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 / 45

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.Count End If / 45

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 If end sub / 45

(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;}") Next End Sub / 45

(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) 完成，运行测试。 / 45

四、课堂实践 例6．23 对上面的DataGrid控件进一步设置其外观，如表格线的线形、颜色，单元格内部填充色及字体、字号、颜色等属性，以美化表格的显示外观。动态网页设计小结本章首先介绍了常用的动态页面技术，然后重点讲解了Visual Basic .NET的基础知识，包括Visual Basic .NET的基本语法知识和Visual Basic .NET的Web服务器常用控件，例如按钮控件（有文本和图形两种形式）、文本控件（包括标签和文本框）、选择控件（有单选钮和复选框两种）、列表选择控件（有列表框和下拉列表框两种，前者运行时占用区域大但可多选；后者平时占用界面区域小但只能单选）、超链接控件和图片控件等的使用方法，并介绍了利用可视化方法设计使用这些控件设计Web界面，进而快速创建Web应用程序。单元二还简要介绍了VS.NET连接SQL Server数据库并通过DataGrid网格控件显示表中数据记录的方法。 / 45

项目 6 动态网页设计

项目 6 动态网页设计

Presentation Transcript