第6章项目中服务器控件应用开发.docx
- 文档编号:24994278
- 上传时间:2023-06-03
- 格式:DOCX
- 页数:44
- 大小:382.38KB
第6章项目中服务器控件应用开发.docx
《第6章项目中服务器控件应用开发.docx》由会员分享,可在线阅读,更多相关《第6章项目中服务器控件应用开发.docx(44页珍藏版)》请在冰豆网上搜索。
第6章项目中服务器控件应用开发
第6章项目中服务器控件应用开发
到目前为止,我们可以利用前面三章的知识进行页面程序开发,可以开发出我们满意的页面,但页面布局基本上是通过HTML标签和CSS实现,页面的交互能力显得力不从心,如果要控制页面上的某个标签也只能借助于JavaScript实现,特别是编码,页面设计和功能设计模糊不清。
针对上面出现的问题,ASP.NET中提出了解决方案,利用ASP.NET中的Web服务器控件可以克服以上的不足,本章将读者展现ASP.NET中服务器控件编程的魅力。
学习目标
通过本章学习,您将能够学习:
常用Web服务器控件使用
验证控件使用
6.1身份验证应用开发
在前面的章节中,利用HTML设计了考生注册界面,本节要求不能采用HTML标签设计一个用户身份验证的应用程序,身份验证包括用户、密码和验证码三层核对。
通过本案例,学习ASP.NET中常用的Web服务器控件的使用以及能够利用这些控件进行项目的实际开发。
一、任务目标
要求利用ASP.NET中的Web服务器控件进行用户身份验证模块应用开发,页面设计中不能采用HTML标签,只能使用Web服务器控件,页面运行效果如图5-1身份验证:
图6-1:
身份验证
要求说明:
1、身份验证的信息包括:
用户名、密码和验证码核对;
2、用户名、密码和验证码用户输入的控件都是TextBox服务器控件;
3、验证码要求采用5位数字和字母混编形式出现,并且通过Image服务器控件显示;
4、“登陆”和“注册”按钮要求使用服务器控件Button;
5、当点击“登陆”按钮时,能对用户输入的三种信息进行验证,本案例程序中验证假设用户名和密码都是KingBoySoft,通过验证系统会提示,错误验证系统也会提示;
6、“注册”按钮暂不做功能处理。
二、任务分析
从任务目标中,可以清楚知道案例要求我们完成的任务,本案例中的身份验证是种假设的用户和密码,所以用户和密码验证难度不大,但验证码的验证就比较复杂,5位不同且表现形式不一样的字符以图片的形式表现,验证码中背景中的“噪点”是随机出现。
基本上面的这些分析,这个任务分解成界面设计和功能设计两大部分,具体分解过程参照图5-2身份验证任务分解:
图6-2身份验证任务分解
三、任务实现过程
根据图5-2的任务分解步骤,实现案例的完整解决由两个子任务完成即可。
1、子任务一:
页面设计
本任务的页面设计需要页面构成的图片,读者也可以自行设计达到视觉与本教材不一样的效果,另外,需要说明的是,案例中已经明确规定所用的控件为Web服务器控件,所以,除了采用了HTML标签组成用户身份验证页面外,还需要在页面中添加规定的Web服务器控件;页面中还对用户未填写的内容进行了检测,这是通过JavaScript脚本实现的;形成图5-1用户身份验证的HTML代码如下:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="StudentIndex.aspx.cs"Inherits="Default2"%>
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
//身份验证
functioncheckUser()
{
try
{
if(document.getElementById("txtNumber").value=="")
{
alert("用户号不能为空!
");
returnfalse;
}
if(document.getElementById("txtCode").value=="")
{
alert("验证码不能为空!
");
document.getElementById("imgCode").src="checkCode.aspx";
returnfalse;
}
}catch(exception)
{
alert("登陆失败,请与系统管理员联系!
");
returnfalse;
}
}
--
body{
margin-left:
0px;
margin-top:
0px;
margin-right:
0px;
margin-bottom:
0px;
background-color:
#ffffff;
}
.STYLE3{font-family:
"宋体";font-size:
12px;}
.abc{
font-family:
"宋体";
font-size:
12px;
border:
1pxsolid#000000;
}
-->
0px;margin-top: 0px;margin-left: 0px;margin-right: 0px;"onload="form1.txtNumber.focus();">
TextBoxID="txtNumber"runat="server"BorderStyle="None"MaxLength="20"Width="106px">
TextBox>
TextBoxID="txtPWD"runat="server"BorderStyle="None"MaxLength="20"TextMode="Password" Width="106px">
TextBox>
22px"> 22px"> 22px"valign="top"> TextBoxID="txtCode"runat="server"BorderStyle="None"MaxLength="5"Width="56px"> TextBox> ImageID="imgCode"runat="server"Height="20px"ImageAlign="Middle"Width="56px"ImageUrl="~/checkCode.aspx"/>
21px"> 21px"> 21px"> ButtonID="btnLogin"runat="server"BackColor="Transparent"BorderColor="Transparent" BorderStyle="Solid"BorderWidth="1px"Text="登陆"OnClick="btnLogin_Click"/> 21px"> ButtonID="btnRegister"runat="server"BackColor="Transparent"BorderColor="Transparent" BorderStyle="Solid"BorderWidth="1px"Text="注册"/>