当前位置：首页 > news >正文

【.NET全栈】第16章 Web开发

news 文章来源：https://blog.csdn.net/qq_38628970/article/details/140003358 2024/10/6 1:04:27

文章目录

前言
16.1 HTML概述
- 16.1.1 HTML的基本概念
- 16.1.2 HTML语言的基本元素
- 16.1.3 格式设置
- 16.1.4 超级链接
- 16.1.5 图像
- 16.1.6 表格
- 16.1.7 框架
- 16.1.8 表单
16.2 ASP.NET Web Forms的组织
- 16.2.1 认识ASP.NET
- 16.2.2 Web Forms的组织
16.3 Web服务器控件
- 16.3.1 使用Label和TextBox控件
- 16.3.2 使用Button控件
- 16.3.3 其他控件介绍
16.4 数据验证控件
- 16.4.1 数据验证机制介绍
- 16.4.2 验证输入控件RequiredFieldValidator
- 16.4.3 比较验证控件CompareValidator
- 16.4.4 范围验证控件RangeValidator
- 16.4.5 正则表达式验证控件RegularExpressionValidator
- 16.4.6 用户自定义验证控件CustomValidator
- 16.4.7 汇总显示验证控件ValidatorSummary
- 16.4.8 数据验证控件综合使用
16.5 小结

前言

ASP.NET(Active Server Page.NET)提供了强大的Web开发功能，C#是ASP.NET技术支持的语言之一。
C#不仅提供了强大的窗体应用程序和命令行应用程序的开发支持，还支持B/S模式的Web应用开发。

ASP.NET是.NET Framework的一部分，在通过HTTP请求建立文档时，它可以在Web服务器上动态创建文档。
该文档主要是指HTML文档，所以了解HTML语法也是十分重要的。

本章主要内容如下：

HTML文件的组成
ASP.NET的开发环境和配置
常用的Web服务器控件
数据验证控件的使用

16.1 HTML概述

Web开发的基础知识，HTML语言。

这些都是网页编程的基础。

HMTL的应用就是对网页内容的排版。

16.1.1 HTML的基本概念

HTML–Hypertext Markup Language。
超文本标记语言。
用于制作网页。
之所以“超”，是不仅限于文本内容，可以加入图片、声音、动画、影视等多种内容。

优点：在浏览器运行时，有统一规则和标准。

第一个HTML程序：

新建记事本文件，文件名后缀修改为.html：
在这里插入图片描述

加入HTML代码：

<HTML><HEAD>
<TITLE></TITLE>
</HEAD><BODY><CENTER>
<H>HELLO C#</H>
<BR>
<HR>
<FONT SIZE=7 COLOR=RED>MY FIRST WEB</FONT>
</CENTER></BODY></HTML>

双击使用浏览器打开运行：
在这里插入图片描述

16.1.2 HTML语言的基本元素

<HTML></HTML>
标记一个文档的开始、结束。
<HEAD></HEAD>
标记文档的开头部分。
该标记中可以使用<title></title>和<script></script>
<BODY></BODY>
文档头部内容结束后，开始的文档的内容主体部分。
<BODY>有以下属性：
Bgcolor:设置主体背景颜色。
Text:设置文本颜色。
Link:设置链接颜色。
Vlink:设置已使用链接颜色。
Alink:设置正在被击中的链接的颜色。
<TITLE></TITLE>
放在Head中使用。用来修改浏览器窗口标题栏信息。

使用上面的HTML语言的基本元素，继续使用记事本创建一个：简单文档.html文件
在这里插入图片描述

<HTML><HEAD>
<TITLE>简单文档</TITLE>
</HEAD><BODY bgcolor = "green" text = "white">
<p>简单的一个文档</p>
</BODY></HTML>

在浏览器中打开的结果：
在这里插入图片描述

16.1.3 格式设置

HTML语言中用来设置文字样式的标记。

<p></p>标记一个段落。
可以用align属性说明对齐方式：left/cemter/right
<br>回车
在段落中小回车，在段落间大回车。

范例：

<HTML>
<HEAD>
<TITLE>区别</TITLE>
</HEAD><BODY bgcolor = "LightBlue", text = "DarkOrange" >
<p>这是一个段落</p><br>
<p>这是另一个段落</p>
<br>
<br>
<br>
<p>第三个段落<br></p>
<p>第四个段落</p>
<br>
<br>
<br>
<p>第五个段落第六个段落<br>第七个段落</p></BODY></HTML>

在这里插入图片描述

<div><div>文档分节，或格式化表。
用法与<p></p>类似。
<span></span> 在行内控制特定内容的显示。
将要设置格式的文字使用此标记包围，然后设置格式。

范例：

<HTML>
<HEAD>
<TITLE>区别</TITLE>
</HEAD><BODY bgcolor = "LightBlue", text = "DarkOrange" ><div>故事的小黄花，在出生那年就飘着<div>
<div>童年的荡秋千，随记忆一直晃到现在<div>
<div>吹着前奏，<span style= "font-size:40px">望着天空</span>我想起花瓣试着飘落</div></BODY></HTML>

结果

16.1.4 超级链接

<a href=链接目标的位置>链接的名字</a> 超链接用来实现页面的联系和转换。

链接到同一站点内的文档

<a href=myhtml.htm></a>

链接到其他站点内的文档

<a href=http://www.myweb.edu.cn>示例</a>

E-mail链接代码如下

<a href=mailto:mymail@126.com>示例</a>

页面内部链接。首先给页面中需要链接的地方命名

<a name=myword></a>

在页面调用的地方设置指向已经命名的链接

<a href=#mywork>转到</a>

当点击“转到”这个链接时，就从当前页的当前位置转到标记名为myword的位置。

范例

<HTML><HEAD>
</HEAD><BODY bgcolor = "LightGreen", text = "White">
<a href=myhtml.htm>本站页面链接示例</a>
<a href=http://www.web.edu.cn>外部站页面链接</a>
<a href=mailto:mymail:mymail@126.com></a><a name=myword></a>
<center>第二章 HTML<br><br><hr></center><br><br>
2.1 基本结构<br><br><br><br>
2.2 标记格式<br><br><br><br>
</hr>
<br><br><br><br><br><br>
<a href=#myword>转到</a>
</BODY></HTML>

浏览器显示结果
在这里插入图片描述

16.1.5 图像

<img> 标记显示网页中图像。

一些属性：

属性	说明
src	图形文件路径、图形文件名。图与当前HTML文档在同一目录：`<src = "pic.gif">`。图在HTML文档文件夹的子文件夹：`<src = "images/pic.gif">`。图在HTML文档所在文件夹的上层目录：`<src = "../web/pic.gif">`
alt	图片没完全加载时，鼠标放在图片上显示的文字
Height,Width	图像的宽度和高度，像素为单位。可以先建小图，在浏览器上按照比例放大
border	边框线宽度，0表示无边框

示例：

<HTML><HEAD>
<title>图片显示</title>
</HEAD><BODY><img src="picEarth.gif" alt="地球" style="width:300px;height:auto;"></BODY></HTML>

运行结果
在这里插入图片描述

16.1.6 表格

表格对网页意义重大，因为能够对页面排版。

<table></table> 创建一个表格。
其属性：

属性	说明
bgcolor	表格背景色
border	边框宽度，默认0
bordercolor	边框颜色
bordercolorlight	边框亮部分颜色
bordercolordark	边框暗部分颜色
cellsapcing	表格单元格之间空隙大小
cellpadding	表格单元格边框与其中内容的间距大小
width	表格宽度

<tr></tr> 表格的一行
属性：

属性	说明
align	单元格中文字的水平对齐方式
valign	单元格中文字的垂直对齐方式

<td></td> 标记表格中除标题外所有文字的格式
属性：

属性	说明
colspan	可以设置跨多列的单元格
rowspan	可以设置跨多行的单元格

<th></th> 标记表格标题单元格的文字格式，通常是黑体居中
示例代码：

<HTML><HEAD>
<TITLE>表格</TITLE>
</HEAD><BODY><TABLE bgcolor="lighblue" bordercolor="white" border="1" width="100%" cellspacing="5">
<tr align=“left”valign="top">
<td>表格1-1</td>
<td>表格1-2</td>
<td>表格1-3</td>
<td>表格1-4</td>
<td>表格1-5</td>
<td>表格1-6</td>
</tr><tr>
<td>表格2-1</td>
<td>表格2-2</td>
<td>表格2-3</td>
<td>表格2-4</td>
<td>表格2-5</td>
<td>表格2-6</td>
</tr><tr>
<td>表格3-1</td>
<td>表格3-2</td>
<td>表格3-3</td>
<td>表格3-4</td>
<td>表格3-5</td>
<td>表格3-6</td>
</tr>
</TABLE></BODY><HTML>

运行结果：
在这里插入图片描述

16.1.7 框架

框架的标记为Frame,一个框架内可以有多个HTML文件。多个框架可以同时显示在一个浏览器中。

通常的设计格局是在一个框架中放置目录，另一个框架中放置HTML文件。

<frameset></frameset>
标记对可以放在<body></body>标记对的外边，也可以嵌在其他框架文中。可以嵌套使用。

该标记对有两个属性rows和cols，使用该标记时至少选择两个属性之一。

属性	说明
rows	规定主文档中各个框架的行定位（百分数、绝对像素值、星号（*））
cols	规定主文档中各个框架的列定位（百分数、绝对像素值、星号（*））

*代表没被说明的空间，如果同一个属性中出现多个星号，则将剩下的没被说明的控件平均分配。同时，所有的框架按照rows和cols的值从左往右，从上到下排列。

<frame> 标记放在<frameset></frameset>之间，用来定义一个具体的框架。
属性：有两个属性，都必须赋值。

属性	说明
src	此框架的源HTML文件名，浏览器显示此框架src指定的HTML文件
name	此框架名字，用来供超文本连接标记`<a href="" target=""></a>`中的target属性指定链接的HTML文件显示在哪个框架中

<noframesets></noframesets> 用在<frameset></frameset>标记对之间，用于在不支持框架的浏览器中显示文本或图像信息。
此标记对之间必须先紧跟<body></body>标记对，然后才可以使用以前讲过的其他标记。

代码示例：

在这里插入图片描述
07 框架.html

<HTML><HEAD>
<TITLE>框架</TITLE>
</HEAD><frameset col="25%,*"><frame src="07-1 框架-left.html" scrolling="no" name="left"><frame src="07-2 框架-page1.html" scrolling="auto" name="main"><noframes>
<BODY>
<p>你的浏览器不支持此框架！</p>
</BODY>
</noframes></frameset></HTML>

07-1 框架-left.html

<HTML><HEAD>
<TITLE>导航</TITLE>
</HEAD><BODY>
<p>导航</p>
<p><a href="07-2 框架-page1.html" target="Main">第一页</a></p>
<p><a href="07-3 框架-page2.html" target="Main">第二页</a></p>
</BODY></HTML>

07-2 框架-page1.html

<HTML><HEAD>
<TITLE>第一页</TITLE>
</HEAD><BODY>
<p>这是第一页</p>
</BODY></HTML>

07-3 框架-page2.html

<HTML><HEAD>
<TITLE>第二页</TITLE>
</HEAD><BODY>
<p>这是第二页</p>
</BODY></HTML>

运行结果：
将四个文件放在同一个文件夹内，运行 07 框架.html，进入导航页面。

在这里插入图片描述
点击第一页链接，进入第一个页面：

点击第二页链接，进入第二个页面。

在这里插入图片描述
如果浏览器不支持框架，就会显示<noframes></noframes>中的内容“你的浏览器不支持框架！”

总结：这样使用框架，实现了页面之间的跳转。

16.1.8 表单

表单是用来输入信息的区域。

是使网页具有交互功能的关键组件。

利用表单可以接收用户输入，将数据发送给服务器，服务器接收并处理这些信息后，动态产生网页，返回给页面。

1.文本框

类型	格式
单行文本框	`<input type=text name=控件名称 value=传出值>`
多行文本框	`<textarea row="行数" cols="列数" name=控件名称></textarea>`
密码框	`<input type=password name=控件名称 value=传出值>`

2.按钮

类型	格式
普通按钮	`<input type=button name=控件名称 value=显示值>`
提交按钮	`<input type=submit name=控件名称 value=显示值>`
重置按钮	`<input type=reset name=控件名称 value=显示值>`

3.单选按钮

类型	格式
单选按钮	`<input type=radio name=控件名称 value=传出值>`

4.复选框

类型	格式
单选按钮	`<input type=checkbox name=控件名称 value=传出值>`

5.下拉列表框
格式如下：

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>

完整表单示例代码：

<HTML><HEAD>
<TITLE>表单</TITLE>
</HEAD><BODY><form mehtod="post">
<table>
<tr>
<td>用户名：</td>
<td><input name="UserName" type="text" size="10"></td>
</tr><tr>
<td>密   码：</td>
<td><input name="password1" type="password" size="10"></td>
</tr><tr>
<td>选   择</td>
<td>
<select name="myselect" multiple size="4">
<option value="1" selected>选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
</select>
</td>
</tr><tr>
<td>性   别</td>
<td><input name="myradio" type="radio" value="M">男；</td>
<td><input name="myradio" type="radio" value="F">女；</td>
</tr><tr>
<td></td>
<td><input name="mysubmit" type="submit" value="确认" size="10"></td>
<td><input name="myreset" type="reset" value="重置" size="10"></td>
<td></td>
</tr></table>
</form></BODY></HTML>

运行结果：
在这里插入图片描述

16.2 ASP.NET Web Forms的组织

ASP.NET之前出现的ASP，给Web开发带来一次革新，ASP能够直接将代码嵌入HTML网页。使得Web页面变得简单。并且能够通过内置的组件实现强大的功能，例如ActiveX Data Objects(ADO)能够简单建立动态页面。

16.2.1 认识ASP.NET

ASP.NET是微软推出的新一代Active Server Pages。是.NET架构的一部分，新架构使编程变得简单。
接下来介绍ASP.NET应用程序开发过程中用到的控件及其他知识。

ASP.NET的技术架构图。

16.2.2 Web Forms的组织

ASP.NET窗体页是结构化的网页，即网页的表现代码和程序代码分开。
在ASP.NET技术中，使表现代码和程序代码分开的技术可以分为两类：

CodeBehind技术
不使用CodeBehind技术

CodeBehind技术简单解释为将表现代码和程序代码放在两个文件夹中。虽然采用CodeBehind技术编写程序代码所需文件数量增多，同时每个文件中的代码也增多，但开发人员要做的工作却大大减少，而且方便多个程序员分工合作。

下面演示不使用CodeBehind和使用CodeBehind技术编写程序的过程。

不使用CodeBehind技术代码：
程序代码都在<script></script>之间，表现代码与程序代码分离，但是都在一个文件内。首选在Web页面（.aspx）中放了一个ID为mylabel的Label服务端控件，在页面的Page_Load事件处理程序中给该控件的text属性赋值，使其显示在页面上。

<HTML><HEAD>
<TITLE>不使用CodeBehind技术</TITLE>
<script>
void page_Load(Object Src, EventArgs)
{mylabel.Text="不使用CodeBehind技术";
}
</script>
</HEAD><BODY>
<asp:label id="mylabel" runat="server"/>
</BODY>
</HTML>

运行结果：
在这里插入图片描述

使用CodeBehind技术的代码：
其中从分界线之前都是放在页面.aspx页面中，分界线后面的代码放在.aspx.cs后台代码中。

<HTML><HEAD>
<TITLE>使用CodeBehind技术</TITLE>
</HEAD><BODY>
<asp:label id="mylabel" runat="server">
</BODY>///以下是后台代码
using System;
......
public partical class _Default : System.Web.UI.Page
{protected void Page_Load(){this.mylabel.Text = "使用CodeBehind技术";}
}
</HTML>

为了更好地说明使用CodeBehind技术，即表现代码和程序代码分离的例子，在Visual Studio 中新建一个Web Page。步骤如下：

1.新建ASP.NET Web应用程序
2.选择空白页
3.Web应用项目建好了
4.在这个项目鼠标选中，右键，添加新建项Web窗体
5.在web.aspx表现页面中加入一个asp服务器控件label，设置ID为mylabel
6.点开窗体文件夹，找到后缀为.aspx.cs的窗体后台代码文件，双击进入
7.出现窗体页面的_Load事件后台代码
8.我们在这个Load中对在表现页面中定义的服务器控件mylabel进行赋值，点击浏览器运行
9.在浏览器中的运行结果，两个文件.aspx和.aspx.cs文件很好地体现了表现代码和程序后台代码分离的CodeBehind技术

16.3 Web服务器控件

ASP.NET提供了一系列服务器控件。增强了ASP.NET的功能，同时将一些功能实现封装，让控件完成。

接下来介绍一些在Web窗体页中使用的基本服务器控件。

16.3.1 使用Label和TextBox控件

在这里插入图片描述
运行结果：

16.3.2 使用Button控件

在这里插入图片描述

单击按钮后文字内容由初始化状态改变成新的文字。

与button类似控件：

控件	说明
LinkButton	显示作为超链接按钮 text属性设置按钮显示文字
ImageButton	显示图像的按钮 ImageUrl设置按钮上图像的四肢。AlternativeText用于定义在浏览器上不支持图片时显示的文字

16.3.3 其他控件介绍

其他控件都在工具箱中，可以拖出来一一尝试使用。
在这里插入图片描述
下面对集中常用的服务器控件做个总结：

Web服务器控件	使用说明
DropDownList控件	单一选择的下拉列表控件。BorderColor/BorderStyle/BorderWidth设置边框样式。AutoPostBack是否在选择后自动发给服务器true/false
ListBox控件	单项或多项选择的下拉列表控件，Rows指定控件高度，若要启动多项选择，SelectionMode属性设置为Mutiple，如果多项要确定索引
CheckBox和CheckBoxList控件	选择项。单项或多选。Checked属性确定是否已选。RepeatDirection属性设置控件是垂直还是水平。RepeatColumns属性设置CeckBoxList中显示的列数
RadioButton和RadioButtonList控件	单选或多选， Groupname属性
Image控件	在Web页面上显示图像，通过ImageUrl属性选择要显示的图片，注意要选择的图片提前家在卖资源文件夹中
Table控件	Web窗体上显示表格，Caption属性设置标题，TableRow修改Rows属性

16.4 数据验证控件

用户在Web窗体中输入的数据，对于程序开发来说，数据的正确性十分重要。需要数据验证控件。数据验证控件如果放在客户端有兼容性问题，ASP.NET中使用服务器数据验证控件，能提供易用且功能强大的方法来检验输入窗体中的数据有无错误，并在必要时向用户显示消息。

16.4.1 数据验证机制介绍

验证控件可以像其他控件一样加入到Web窗体页。不同的验证控件用于特定的验证类型，多个验证控件可以附加到一个输入控件。这里介绍6中数据验证控件。

控件	说明
RequiredValidator	必须输入验证
CompareValidator	比较限制验证
RangeValidator	范围限制栏验证
RegularExpressionValidator	特殊规则限制栏验证
CustomValidator	自定义数据栏验证
ValidationSummary	汇集数据验证消息

在处理用户的输入时，Web窗体页框架将用户的输入传递给关联的验证控件。验证控件测试用户的输入，并设置属性以指示输入是否通过了验证测试。处理完所有的验证控件后，设置页上的IsValid属性。如果有任何控件显示验证检查失败，则整页设置将无效。如果验证控件有错误，则错误信息可由该验证控件显示在页面中，或者显示在页面上其他地方的ValidationSummary控件中。当页面的IsValid属性设置为false时，显示ValidationSummary,它会轮询页面上每个验证控件，并聚合每个控件公开的文本信息。

可验证的Web服务器控件：

控件	控件的属性
TextBox	Text
ListBox	SelectedItem.Value
DropDownList	SelectedItem.Value
RadioButtonList	SelectedItem.Value

16.4.2 验证输入控件RequiredFieldValidator

16.4.3 比较验证控件CompareValidator

16.4.4 范围验证控件RangeValidator

16.4.5 正则表达式验证控件RegularExpressionValidator

16.4.6 用户自定义验证控件CustomValidator

16.4.7 汇总显示验证控件ValidatorSummary

16.4.8 数据验证控件综合使用

16.5 小结

ASP.NET是C#应用程序的另一个重要方面，其提供了一个统一的Web开发模型，同时也是一种新的编程模型和结构。该类程序可生成伸缩性和稳定性更好的应用程序，并提供了更好的环境保护。

本章从Web基础知识入手，首先介绍了HTML语言，接着介绍了ASP.NET的基本控件。有了这些基本的知识，读者即可应用ASP.NET技术编写部分实用的网站应用程序。

文章目录

前言

16.1 HTML概述

16.1.1 HTML的基本概念

16.1.2 HTML语言的基本元素

16.1.3 格式设置

16.1.4 超级链接

16.1.5 图像

16.1.6 表格

16.1.7 框架

16.1.8 表单

16.2 ASP.NET Web Forms的组织

16.2.1 认识ASP.NET

16.2.2 Web Forms的组织

16.3 Web服务器控件

16.3.1 使用Label和TextBox控件

16.3.2 使用Button控件

16.3.3 其他控件介绍

16.4 数据验证控件

16.4.1 数据验证机制介绍

16.4.2 验证输入控件RequiredFieldValidator

16.4.3 比较验证控件CompareValidator

16.4.4 范围验证控件RangeValidator

16.4.5 正则表达式验证控件RegularExpressionValidator

16.4.6 用户自定义验证控件CustomValidator

16.4.7 汇总显示验证控件ValidatorSummary

16.4.8 数据验证控件综合使用

16.5 小结

相关文章：