第1章ASP.NET开发和运行环境
本章要点
(1) 静态网页和动态网页。
(2) ASP.NET开发环境。
(3) ASP.NET程序开发的方式。
(4) ASP.NET程序的运行。
(5) 本地网页上传到云。
1.1Web应用程序的工作原理
1. 服务器端和客户端
Web是基于客户端/服务器的一种体系结构。通常将提供服务的一方称为服务器,接受服务的一方称为客户端。如当用户浏览某门户网站时,该门户网站就是服务器,用户使用的计算机或者手机等智能设备就是客户端。只要在计算机上安装有提供服务的软件,这台计算机就变成一台服务器,如在计算机上装上SQL Server数据库管理系统,该计算机就是一台数据库服务器。Web服务器(或WWW服务器)指的是装有能够接受和响应来自客户端计算机请求的特定软件的计算机,如Apache服务器、IIS(Internet Information Server)服务器等。在一台计算机上装上客户端软件,该计算机就成为客户端。在因特网中客户端软件一般是指浏览器软件,如微软的IE、Mozilla Firefox、Google的Chrome等。
服务器与客户端的通信过程整体可以分为以下几个过程,如图11所示。
图11服务器与客户端通信过程示意图
(1) 用户在客户端浏览器输入要请求的URL,并按Enter键发送这个请求。
(2) 服务器根据请求的URL判断客户端的请求是静态网页还是动态网页。如果请求的是静态网页,服务器找到该网页,原样送回到浏览器; 如果请求的是动态网页,服务器就会编译、执行用户请求的文件,生成标准的HTML文件,然后将这个HTML送回到客户端。
(3) 静态网页的文件由客户端上的浏览器负��解释,将解释后的结果显示在用户浏览器上。
2. 超文本传送协议(HTTP)
HTTP(HyperText Transfer Protocol )是一种以TCP/IP通信协议为基础的应用协议,它提供了WWW服务器和客户端浏览器之间传递信息的一种机制。HTTP会话包括以下几个过程。
(1) 客户端与服务器建立连接。
(2) 客户端向服务器发出请求。
(3) 如果请求被接受,则服务器将响应结果送回至客户端。
(4) 客户端与服务器断开连接。
3. URL
因特网上每个网页都具有一个**的名称标识,通常称为URL(Uniform Resource Locator,统一资源定位符)地址,这种地址可以是本地磁盘、局域网上某台计算机,也可以是因特网上某个网站,其基本格式如下。
protocol://hostname[:port]/path/
protocol: 指定的传送协议,通常为HTTP或HTTPS。
hostname: 存放提供服务资源的主机名或者IP地址。
port: 端口号,省略时取默认值。各种传送协议都有默认的端口号,HTTP默认端口号是80。
path(路径): 表示主机上的一个目录或者文件名,如果省略文件名,对IIS服务器会查找index.html、index.htm、index.aspx、default.html、default.html、default.aspx(查找顺序可在IIS中指定)。
4. HTML
HTML(HyperText Markup Language)是超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素,其语言结构分为head和body两部分。HTML控制文字、图片等在浏览器显示的大小、格式等,浏览器能够解释HTML。
1.2静态网页和动态网页
1. 静态网页
静态网页主要是由HTML构成。虽然有的静态网页中包含有用JavaScript或VBScript编写的程序代码(一般称为脚本),但这些脚本(Script)是随着HTML一起从服务器传送到客户端的,其运行是在客户端上运行的,这种脚本语言称为客户端脚本。静态网页一经制成,内容一般不会发生改变,如果要修改其内容,一般需要修改源代码,然后重新上传到服务器。下面是一段用HTML编写的网页代码:
<html>
<head>
<title>my first web</title>
<style>
.headerH1{font-size:15pt;color:rgb(255,0,0)}
</style>
<script language="javascript">
function sayHello()
{
alert('你好')
}
</script>
</head>
<body>
<span class="headerH1">ASP.NET网络数据库</span>
<p onclick="sayHello()">click me</p>
</body>
</html>
在记事本中书写这些HTML,保存为扩展名是.htm或者.html的静态网页。双击该文件,在Google Chrome浏览器中打开后效果如图12所示。这些代码包含了普通网页HTML的主要结构。在<head>标记中放置了<title>标记,定义网页标题,<style>标记定义了CSS(Cascading Style Sheets,层叠样式表)控制“ASP.NET网络数据库”文字的大小和颜色,<script>标记标识一段JavaScript脚本代码。
图12用Chrome浏览普通网页的结果
静态网页是保存在服务器上的文件,文件间基本上是独立存在的。静态网页没有数据库支持,内容相对稳定,Web服务器查找方便,访问效率较高。静态网页工作过程如下。
(1) 用户通过客户端的浏览器输入要访问的网页(扩展名一般是.htm或.html),发出WWW请求。
(2) 服务器收到静态网页的请求。
(3) 服务器从硬盘上指定的位置找到相应的HTML文件,发送给客户端。
(4) 客户端的浏览器收到请求的文件,并且解释这些HTML代码,显示出来。
需要注意的是,静态网页中并非全是HTML,在静态网页中也可以有JavaScript或者VBScript编写的程序代码,如上面的HTML代码中<script>标记中的代码,当单击click me时会弹出一个确认框。静态网页中的代码不是在服务器上运行,而是当客户端发出URL请求时,服务器将代码随着HTML一起发送到客户端,然后在客户端运行。由于这种网页的行为是在客户端进行的,是在客户端的“动”,而网页本身是静态的,故这类网页仍然是静态网页。静态网页中的程序代码可通过IE浏览器中“查看”→“源”菜单命令查看。
2. 动态网页
动态网页是执行时用户可以根据输入所允许的各种信息,实现人机交互,能够根据不同的时间和地点、不同的访问者显示不同的内容,显示的内容一般来自数据库。动态网页中不仅包含HTML标记,还有各种相关的程序代码。动态网页工作过程如下。
(1) 用户通过客户端的浏览器输入要访问的网址,发出WWW请求。
(2) 服务器收到动态网页的请求。
(3) 服务器从硬盘上指定的位置找到相应的文件,并且运行这些动态网页生成标准的HTML。
(4) 服务器将生成的HTML代码返回给客户端。
(5) 客户端浏览器收到这些HTML,解释这些HTML代码,并显示在计算机屏幕上。
与静态网页相比,动态网页的服务器不仅要找到这些网页,而且还要在服务器上运行这些文件,生成HTML。这样动态网页是不能在客户端通过“查看”→“源”菜单命令查看到“源代码”的,看到的是服务器运行源代码后的结果。
1.3动态网页开发技术
动态网页是在静态网页的基础上发展起来的。**个真正使服务器能够根据执行时的具体情况生成动态HTML页面的技术是CGI(Common Gateway Interface,通用网关接口)技术,文件的扩展名为.cgi。
1994年出现了PHP(PHP Hypertext Preprocessor,超文本预处理程序)语言,它将HTML代码和PHP指令合成为完整的服务器端动态页面,文件扩展名为.php。
1996年微软借鉴PHP思想,在其Web服务器IIS 3.0中引入了ASP(Active Server Pages,活跃服务器页面),迅速成为Windows系统下Web服务器端的主流开发技术,文件扩展名为.asp。
1997年Servlet技术问世,1998年JSP(Java Server Pages)技术诞生。Servlet和JSP的组合让Java***同时具有了类似CGI程序集中处理功能和类似PHP的HTML嵌入功能,文件扩展名都为.jsp。
2000年微软推出了基于.NET Framework的ASP.NET 1.0版本,以后新的版本不断推出,ASP.NET可在服务器上生成功能强大的Web应用程序,文件扩展名为.aspx。
由于Visual Studio自带服务器环境,不安装IIS也可以在Visual Studio中调试ASP.NET程序,但如果要为客户端提供服务,如在校园网或者企业内部网上访问服务器上的网页程序,服务器上就必须安装并配置IIS。
1.4IIS的安装和配置
1. 安装IIS
ASP.NET编写的动态网页,服务器端需要安装IIS。Windows默认情况下是不安装IIS的,如果要安装IIS,需要Windows操作系统是专业版或者旗舰版。安装方法(以Windows 7为例): 控制面板→程序→打开或关闭Windows功能,如图13所示。
图13IIS的安装
在图13中,打开“Internet信息服务”,选中“Web管理工具”复选框,以便兼容IIS 6。在“万维网服务”中打开“常见HTTP功能”,选中“静态内容”复选框。打开“应用程序开发功能”,选中ASP.NET复选框,如果要兼容ASP,选中ASP。
2. 配置IIS
右击桌面上的“计算机”,在弹出的快捷菜单中选择“管理”→“服务和应用程序”命令,在弹出的对话框中选择“Internet信息服务”→“连接”→“网站”命令,右击Default Web Site,在弹出的快捷菜单中选择“添加应用程序”命令,弹出如图14所示对话框。
图14中选项说明如下。
图14添加应用程序
“别名”: 输入一个有意义且好记的名字,这个“别名”在运行程序时要使用,这里输入的是example。
“物理路径”: 存放网站应用程序的文件夹,可以在计算机的某盘上建立一个文件夹,将网站上的内容都放在该文件夹下。
3. 在本地计算机上运行网页程序
动态网页的程序不能双击运行。如果编程环境采用的是Visual Studio(VS),大多数程序可以在VS环境中直接运行,但有些程序只能在浏览器中以IIS的方式运行: 打开浏览器,在地址栏中输入“localhost:端口号/别名/网页名称”即可。
默认情况下的端口号是80,可以省略不写,本书调试时由于80端口号已经分配给PHP程序,分配给ASP.NET网站的端口号是81,如果要运行网站根文件夹下的webform1.aspx程序,在地址栏中输入localhost:81/example/webform1.aspx即可。
1.5将本地站点上传到云
应用程序在当地计算机上调试完毕,需要发布到网上,让其他人通过Internet可以访问你的应用程序,*简单的方法是租用云服务。下面以租用阿里云为例,说明网站上传的过程。
登录https://www.aliyun.com/网站,网上提供的云服务器ECS(Elastic Computer Service)是一种可伸缩性的计算服务,根据个人需要,上面有不同的产品和价格,本书租用的是1核2G,1M固定带宽,40G高速云盘。租用ECS后,相当于租用了一个远程虚拟的计算机。在租ECS时,可以选择操作系统,对ASP.NET而言,需要选择Windows Server作为服务器。阿里云提供了公网IP(如47.104.91.99)和私有IP(如172.31.70.48)。公网IP用于外部访问时使用,如通过Internet访问数据库,连接数据库的字符串的IP应该使用公网IP。如果将网页传到云上,在云上虚拟的计算机上调试网页程序,或者登录云上的SQL Server数据库,需要使用私有IP。用户还需要在云上配置ASP.NET的环境,包括SQL Server数据库、IIS等。云上有镜像市场,上面有相应的环境。在购买ECS后,一般可以免费得到ASP.NET的运行环境。当地计算机登录云的操作步骤如下。
在计算机“开始”→“搜索程序和文件”的文本框中输入命令: mstsc,按Enter键后如图15所示。
在图15中输入远程计算机的IP地址,即阿里云分配的公网IP,单击“选项”按钮,弹出“本地资源”对话框,单击“详细设置”按钮,弹出图16所示的“本地设备和资源”的设置对话框。如果要上传的网站在当地计算机的D盘,就选中D盘,这样当进入云计算机后,就在云上看到当地计算机D盘上的内容,可以直接将D盘上要发布的网站的内容方便地复制到云盘上。
图15连接远程计算机
图16“本地设备和资源”的配置
图16设置完成后,单击“确定”按钮返回后,再单击“连接”按钮,输入登录的密码(在申请云时设置的),即可登录到云计算机。系统已经自动配置好IIS,安装了SQL Server。双击SQL Server,登录到界面中,服务器可以输入虚拟机的名称,也可以输入公网IP(或者私有IP),登录到云上的SQL Server。
在云计算机上,单击“计算机”,可以看到云盘C和当地计算机的盘符“D:”,将D盘中的指定文件复制到C盘,按照配置当地计算机上IIS的方法配置云上的IIS。需要注意的是网页程序中连接数据库字符串为:
"server=47.104.91.99;database=数据库名;UID=用户名;pwd=密码";
如果直接在云计算机上调试网页程序,连接数据库和字符串中的IP地址可以是私有IP,也可以公网IP; 如果要通过Internet访问数据库,就要将字符串中的IP地址改为公网IP。
说明: 通过C#访问阿里云上的MySQL,需要在云服务器管理控制台下的“云服务器ECS”→“网络和**”→“**组”下,配置运行实例的“**规则”,在“入方向”增加一条新规则,“协议类型”选择MySQL(3306),“授权对象”填写为0.0.0.0/0,否则不能访问阿里云的数据库。
1.6ASP.NET程序开发环境和开发模式
ASP.NET开发环境*常用的是Visual Studio。Visual Studio(VS)是微软推出的配合.NET的IDE开发环境,其本身包含有.NET Framework和ASP.NET程序开发的服务器。在编写程序时,其能够通过智能代码提示,给出目前可用的属性、方法和参数。通过该环境可以开发基于Windows的应用程序,也可以开发ASP.NET网页程序。其支持的语言有Visual Basic、C#、C ,本书使用的是C#。
打开Visual Studio软件,在“新建项目”对话框中选择Web→“ASP.NET空Web应用程序”选项,在“名称”文本框中输入aspExample,在“位置”下拉列表框中选择D:\aspExample,选中“为解决方案创建目录”复选框,如图17所示。单击“确定”按钮后,Visual Studio自动在D盘上建立的文件夹为D:\aspExample\aspExample\aspExample,在D:\aspExample\aspExample下生成两个解决方案的文件aspExample.sln和aspExample.v11.suo。在以后的操作中单击aspExample.sln就可进入当前项目。网页代码放在D:\aspExample\aspExample\aspExample中。选中项目aspExample后右击“添加”,在弹出的快捷菜单中选择“新建文件夹”命令,建立本书各章节的文件夹chapter1、chapter2……各章节的示例放在相应的章节中。
图17“新建项目”对话框
ASP.NET网络程序开发,有以下几种模式。
1.6.1Web窗体拖曳控件的方式
开发人员在Visual Studio提供的可视化设计器中拖曳控件,然后编写代码响应事件。在此种模式下,开发B/S程序与C/S一样,这大大降低了程序开发的难度。但由于此种方式下控件中封装了许多内容,***很难了解背后的HTML是如何运行的,CSS、JavaScript、jQuery、Ajax控制页面相对不灵活,程序不易于后期维护,不方便深度开发。目前窗体控件模式的开发正在退出微软.NET程序开发的舞台。
例11在Visual Studio中使用窗体拖曳控件的方式,设计完成图18所示的表单,程序运行后,输出填写的内容。
图18Web窗体拖曳控件方式设计的表单
在“解决方案资源管理器”中,右击chapter1,在弹出的快捷菜单中选择“添加”→“Web窗体”命令,在弹出的对话框中的“指定项名称”中输入1_1.aspx,单击“确定”按钮。
说明: VS将同时生成1_1.aspx、1_1.aspx.cs、1_1.aspx.desigers.cs这3个文件。1_1.aspx存储的是页面设计时各个控件的代码,处理代码一般放在.cs文件中; 1_1.aspx.cs是采用代码隐藏页模型设计网页时的代码隐藏文件,存储的是程序代码,一般存放与数据库连接和数据库相关的查询、更新、删除等操作代码,还有各个按钮单击后发生的动作代码等; 1_1.aspx.desigers.cs通常存放的是一些页面控件中的配置信息,就是注册控件页面,是窗体设计器生成的代码文件,作用是对窗体上的控件初始化。
打开“工具箱”,选中HTML下的Table,拖放到1_1页面。默认情况下table显示为3行3列。
说明: 在VS中网页有“设计”“拆分”“源”3种视图。“设计”: 以所见即所得的方式显示网页各元素的布局; “拆分”: 同时显示布局和代码; “源”: 显示HTML代码。“设计”视图下网页中元素改变时,“源”视图下的代码会自动地改变; “源”视图下直接改变代码,“设计”视图下网页的元素也会自动改变。
在网页设计中,可用于页面布局的有标记<table>和DIV CSS,本示例使用的是标记<table>。
在1_1.aspx的“设计”视图下,通过菜单中的“表”→“修改”→“合并单元格”命令,再执行“表”→“插入”命令,增加行,使表变为5行2列(第1行列合并)。
将标记、文本框、RadioButtonList、命令按钮等分别放在表格的各单元格中,设置“学号”“姓名”对应的文本框的ID分别为txtStudent_no、txtStudent_name; 命令按钮的Text属性分别设置为“提交”“重置”; “性别”对应选项的ID属性设置为RdoGender,单击RdoGender后面的设置属性按钮,将“性别”的itsms设置为图19所示。
图19设置RadioButtonList的itsms属性
切换到页面的“源”视图,看到HTML标记。在<head>标记中加入以下CSS:
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.tableStyle
{
width:300pt;
border:1pt;
}
.headerStyle
{
text-align:center;
font-size:20pt;
}
.cellStyle
{
width:150pt;
}
.auto-style1
{
width: 150pt;
height: 36px;
}
</style>
</head>
说明:
① HTML在第3章将有简单的介绍。
② CSS用于控制网页显示格式,如字体大小、颜色、位置等。网页中使用CSS有引用外部CSS文件、<head>中加入<style>标记、在HTML的开始标记中使用style属性设置,CSS的用法见第3章。
在HTML标记中,通过class属性应用中设置的CSS,<form></form>间的HTML修改如下。
<form id="form1" runat="server">
<div>
<table border="1" class="tableStyle">
<tr>
<td colspan="2" class="headerStyle">
<asp:Label ID="Label1" runat="server" style="text-align: center" Text="学生基本情况"></asp:Label>
</td>
</tr>
<tr>
<td class="cellStyle">学号</td>
<td class="cellStyle">
<asp:TextBox ID="txtStudent_no" runat="server" Width="270px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="cellStyle">姓名</td>
<td class="cellStyle">