Presentation is loading. Please wait.

Presentation is loading. Please wait.

Task #3 使用ASP.NET服务器控件创建页面.

Similar presentations


Presentation on theme: "Task #3 使用ASP.NET服务器控件创建页面."— Presentation transcript:

1 Task #3 使用ASP.NET服务器控件创建页面

2 学习目标 了解ASP.NET服务器控件的属性和方法 掌握ASP.NET服务器控件的使用 掌握服务器控件中验证控件的使用
Web Programming 了解ASP.NET服务器控件的属性和方法 掌握ASP.NET服务器控件的使用 掌握服务器控件中验证控件的使用 项目:学生信息管理系统登录&注册页面

3 任务1:简单语法的综合应用 任务描述: 学习目标:
Web Programming 任务描述: 建立一个简单的学生成绩计算器,当用户在网页中输入《计算机数学》和《计算机应用基础》两门课程的成绩时,即可计算总成绩和平均成绩,效果如图所示: 学习目标: 熟悉C#基本用法,熟悉变量的定义、类型转换及混合运算 掌握ASP.NET基本控件的使用(文本框、按钮、标签)

4 任务1:简单语法的综合应用 解决步骤1:新建窗体网页
Web Programming 解决步骤1:新建窗体网页 新建窗体文件3-1.apsx,添加两个文本框、一个按钮、一个标签,并输入相应的提示文字。

5 提示 <style type="text/css"> .style1 { width: 50%; }
Web Programming <style type="text/css"> .style1 { width: 50%; } </style> <table align="center" class="style1"> <tr><!- -第2行- -> <td colspan="3" style="text-align: center“> <hr></td> </tr>

6 提示 <tr><!- -第6行- ->
Web Programming <tr><!- -第6行- -> <td colspan="3" style="text-align: center"> <asp:Panel ID=“Panel2” runat=“server” Visible=“False”>总分是:<asp:Label runat=“server” Text=“Label”></asp:Label> 元</asp:Panel> </td> </tr> <tr> ><!- -第7行- -> <td colspan=“3” style=“text-align: center“> <asp:Panel ID=”Panel1” runat=“server” Visible=“false”>平均分是:<asp:Label runat=“server” Text=“Label”></asp:Label> 元</asp:Panel>

7 任务1:简单语法的综合应用 解决步骤2:设计后台程序
Web Programming 解决步骤2:设计后台程序 protected void Button1_Click(object sender, EventArgs e) { int sum = 0; int math = Convert.ToInt32(TextBox1.Text); int com = Convert.ToInt32(TextBox2.Text); sum = math + com; Panel2.Visible = true; lbl_sum.Text = sum.ToString(); }

8 任务1:简单语法的综合应用 解决步骤2:设计后台程序
Web Programming 解决步骤2:设计后台程序 protected void Button2_Click(object sender, EventArgs e) { float avg = 0; float math = Convert.ToInt32(TextBox1.Text); float com = Convert.ToInt32(TextBox2.Text); avg = (math + com) / 2; Panel1.Visible = true; lbl_avg.Text = avg.ToString(); }

9 拓展知识:C#基础知识(参考PPT) Web Programming C#的数据类型和表达式 变量和常量 常见数据类型 类型转换 操作符

10 课堂练习1 设计一个简单的算术计算器程序,通过设计理解常用Web服务器端控件的使用方法和顺序结构程序设计的特点。
Web Programming 设计一个简单的算术计算器程序,通过设计理解常用Web服务器端控件的使用方法和顺序结构程序设计的特点。

11 任务2:流程控制程序综合应用 任务描述: 学习目标:
Web Programming 任务描述: 设计一个用户登录页面,限制尝试登录次数为3次,若用户尝试登录3次不对,就不能登录,并提示登录次数过多 学习目标: 掌握分支、循环等流程控制语句的使用方法

12 任务2:流程控制程序综合应用 Web Programming 解决步骤1:建立窗体文件

13 提示 <table class=“style1”><!- - 用户名、密码- ->
Web Programming <table class=“style1”><!- - 用户名、密码- -> <div class="style2"> <b>用户登录</b><br /><hr /><br /> <tr> <td>密码:</td> <td><asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox></td> </tr> .style1 { width:50%; } .style2 margin:10px;

14 任务2:流程控制程序综合应用 解决步骤2:编写后台程序
Web Programming 解决步骤2:编写后台程序 public partial class WebForm2 : System.Web.UI.Page { static int i = 0;//定义一个用于计数的静态全局变量,页面执行时会一直存在 protected void Page_Load(object sender, EventArgs e) if (!IsPostBack)//第一次运行网页时要运行的程序 Label1.Text = "你有三次登录机会"; }

15 任务2:流程控制程序综合应用 string s = ""; int iWeekDay;
Web Programming string s = ""; int iWeekDay; iWeekDay = (int)DateTime.Now.DayOfWeek;//将今天是星期几转换成整数 switch (iWeekDay) { case 1: s = “一"; break; case 2: s = “二"; case 3: s = "三"; case 4: s = "四";

16 任务2:流程控制程序综合应用 case 5: s = "五"; break; case 6: s = "六"; default:
Web Programming case 5: s = "五"; break; case 6: s = "六"; default: s = "七"; } Response.Write("今天是:"+DateTime.Now+"星期"+s);

17 任务2:流程控制程序综合应用 Web Programming protected void Button1_Click(object sender, EventArgs e) { if (TextBox1.Text == "Tom" && TextBox2.Text == "123") Label1.Text = "登录成功"; } else if (i < 3) i = i + 1; Label1.Text = "用户名或密码不对"; Label1.Text = "登录已经超过三次"+i.ToString(); Button1.Visible = false;

18 拓展知识:C#流程控制(参考PPT) Web Programming 分支语句 循环语句

19 课堂练习2 Web Programming 完善学生成绩计算,要求检查用户输入的成绩是否在0-100分之间,如果不在,能够提示用户

20 任务3:Web服务器基本控件 任务描述: 学习目标:
Web Programming 任务描述: 创建学生信息管理系统网站的注册页面,用户可以通过文本框输入用户名、密码、真实姓名等相关信息,通过单选按钮、下拉框、复选框等控件设置性别、专业班级、兴趣爱好等信息。 学习目标: 掌握基本Web服务器控件的用法

21 任务3:Web服务器基本控件 解决步骤1:创建窗体页面
Web Programming 解决步骤1:创建窗体页面 <asp:RadioButton ID="RadioButton1" runat="server" Checked="True" GroupName=“sex” Text=“男" /> <asp:RadioButton ID=“RadioButton2” runat=“server” GroupName=“sex” Text=“女" />

22 任务3:Web服务器基本控件 解决步骤2:编写后台代码
Web Programming 解决步骤2:编写后台代码 protected void Button1_Click(object sender, EventArgs e) { string result; result = “注册结果是:<br />学号:” + TextBox1.Text+“<br />姓名:"+TextBox2.Text; if (RadioButton1.Checked) result += “<br />性别:" + RadioButton1.Text; } Else result += “<br />性别:" + RadioButton2.Text;

23 任务3:Web服务器基本控件 解决步骤2:编写后台代码
Web Programming 解决步骤2:编写后台代码 result += “<br />专业班级:”+DropDownList1.SelectedValue+“<br />兴趣爱好:"; for (int i = 0; i < CheckBoxList1.Items.Count; i++) { if (CheckBoxList1.Items[i].Selected) result += CheckBoxList1.Items[i].Value + "  "; } Label1.Text = result;

24 课堂练习3-1 Web Programming 设计一个个人情况调查程序,程序启动后显示如图所示的页面。用户在填写了姓名、选择了性别、喜爱的歌手、居住城市、个人爱好后单击【提交】按钮后,屏幕显示用户填写或选择的数据信息。若用户没有填写姓名而直接单击【提交】按钮,屏幕上显示出错提示信息;若用户没有选择任何“爱好”项目,单击【提交】按钮后,爱好栏中显示“真可惜,你没有任何爱好!”。

25 课堂练习3-2 Web Programming

26 拓展知识:其它选择控件 RadioButtonList控件: CheckBox控件:
Web Programming RadioButtonList控件: result=RadioButtonList1.SelectedValue; CheckBox控件: if(CheckBox1.Checked) { result+=CheckBox1.Text; }

27 课堂练习3-2 设计网上教学系统的在线测试模块,要求至少包括单选题、多选题、判断题,考试结束后可以在线给出成绩(参考页面)
Web Programming 设计网上教学系统的在线测试模块,要求至少包括单选题、多选题、判断题,考试结束后可以在线给出成绩(参考页面)

28 拓展知识:其它选择控件 ListBox控件: 多选:
Web Programming ListBox控件: for(int i=0;i<ListBox1.Items[i].Count;i++) { if(ListBox1.Items[i].Selected) result+=ListBox1.Items[i].Value; } 多选: <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple“></asp:ListBox>

29 课堂练习3-3 设计选修课系统 提示: ListBox2.Items.Add(ListBox1.Items[i]);
Web Programming 设计选修课系统 提示: ListBox2.Items.Add(ListBox1.Items[i]); ListBox1.Items.Remove(ListBox1.Items[i]);

30 拓展知识:其它常用按钮控件 ImageButton控件: 图片作为按钮
Web Programming ImageButton控件: 图片作为按钮 mess.Text=“坐标:” + e.x + “, ” + e.y;

31 拓展知识:其它常用按钮控件 LinkButton控件与HyperLink控件: 属性 值 ImageUrl
Web Programming LinkButton控件与HyperLink控件: 属性 ImageUrl /i/eg_banner_w3school.gif NavigateUrl Text="Visit W3School! Target "_blank

32 Label1.Text="您点击了 LinkButton 控件"
拓展知识:其它常用按钮控件 Web Programming LinkButton控件与HyperLink控件: Label1.Text="您点击了 LinkButton 控件"

33 课堂练习3-4 Web Programming 设计网上教学系统的登录页面,单击“登录”按钮时,可以显示用户输入的用户名和密码(参考页面)

34 课堂练习3-5 使用Image控件、ImageButton控件、HyperLink控件制作一个网上课堂学习模块
Web Programming 使用Image控件、ImageButton控件、HyperLink控件制作一个网上课堂学习模块 ImageButton控件 Image控件 HyperLink控件

35 任务4:图像控件及文件上传控件 任务描述: 学习目标:
Web Programming 任务描述: 在任务3的基础上添加用户上传图片的功能,当用户单击“浏览”按钮时,即可选择一张照片,单击“注册”按钮时可以上传照片到当前指定站点的images文件夹下,同时在下方显示该图片,如果文件不是图片类型或没有选择图片文件,将给出错误提示 学习目标: 掌握图像显示控件和文件上传控件的用法

36 任务4:图像控件及文件上传控件 Web Programming 解决步骤1:窗体文件的界面设计 Pannel: Visble=false;

37 任务4:图像控件及文件上传控件 解决步骤2:编写后台程序 //以下是文件上传的代码
Web Programming 解决步骤2:编写后台程序 //以下是文件上传的代码 if (FileUpload1.HasFile)//是否有文件要上传 { string strType = FileUpload1.PostedFile.ContentType; //判断上传文件的类型是否是常见图像 if (strType == "image/bmp" || strType == "image/pjpeg" || strType == "image/gif" || strType == "image/png") //生成一个日期和时间组合成的文件名 string strFileName = DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString();

38 任务4:图像控件及文件上传控件 //上传文件重命名为时间和日期的组合,不易重名,可防止上传文件互相覆盖
Web Programming //上传文件重命名为时间和日期的组合,不易重名,可防止上传文件互相覆盖 FileUpload1.SaveAs(Server.MapPath("images/" + strFileName + ".jpg")); Panel1.Visible = true; Image1.ImageUrl = "images/" + strFileName + ".jpg"; } Else { Response.Write("<script>alert('文件类型不对')</script>");

39 任务4:图像控件及文件上传控件 Web Programming Else { Response.Write("<script>alert('请选择你的照片')</script>"); }

40 拓展知识:ImageMap控件 Web Programming 作用:实现在图片上定义热点(HotSpot)区域的功能。 通过单击这些热点区域,用户可以向服务器提交信息,或者链接到到某个URL位址。

41 拓展知识:ImageMap控件 ImageMap
Web Programming ImageMap 语法:<asp:ImageMap ID="控件名称" runat="server" ImageUrl="图片位置" HotSpotMode="热区模式" > <asp:RectangleHotSpot hotspotmode="热区模式" NavigateUrl="单击该热区时候的导航URL" alternatetext="鼠标放上去的替代文字" PostBackValue ="提交值" bottom="距离底部位置" right="距离右侧位置"> </asp:RectangleHotSpot> </asp:ImageMap>

42 Click:对热点区域的单击操作,通常在HotSpotMode为PostBack时用到
拓展知识:ImageMap控件 Web Programming ImageMap HotSpotMode:热点模式,枚举类型 HotSpots:该属性对应着System.Web.UI.WebControls.HotSpot对象集合。它之下有 CircleHotSpot(圆形热区)、RectangleHotSpot(方形热区)和PolygonHotSpot(多边形热区)三个子类。 Click:对热点区域的单击操作,通常在HotSpotMode为PostBack时用到

43 【例3-12】 Image和ImageMap应用举例,效果 如下。上面是Image,下面是ImageMap。当用户
Web Programming ImageMap(教材) 【例3-12】 Image和ImageMap应用举例,效果 如下。上面是Image,下面是ImageMap。当用户 指向不同的热区时候,有不同的替代文字出现,当单 击不同的热区的时候跳转到不同的页面。

44 拓展知识:Table控件 Web Programming Table Table控件是用来在Web窗体页上创建通用表格的。每个Table控件包含一个或者多个TableRow对象。每个TableRow对象包含一个或者多个TableCell对象。每个TableCell对象包含其他的HTML或者服务器控件。 创建Table控件包含两个步骤:添加一个Table控件,然后分别添加行和单元格。 如果是在设计时候添加行、列来创建一张静态表,最好使用前面讲过的Html布局控件Table,如果是运行时通过代码来向表中添加行和列,即需要动态生成一张表时,采用Web标准服务器控件中的Table。

45 拓展知识:Table控件 Table 向表中动态添加行和列,语法如下所示: 添加行
Web Programming Table 向表中动态添加行和列,语法如下所示: 添加行 TableRow tRow = new TableRow(); Table1.Rows.Add(tRow); 向行添加列 TableCell tCell=new TableCell(); tRow.Cells.Add(tCell);

46 拓展知识:Table控件 Table 向单元格TableCell中添加内容,
Web Programming Table 向单元格TableCell中添加内容, 可以直接是文本,也可以是html代码,也可以是控件。以添加一个HyperLink为例。 HyperLink hy1 = new HyperLink(); hy1.Text = "第二届委员会代表注册拉"; hy1.NavigateUrl = "~/bbb.aspx"; tCell.Controls.Add(hy1); tRow.Cells.Add(tCell); 如果只是添加文本,直接设置tCell.Text=“文本”即可。

47 【例3-13】动态生成表 新闻展示页面原理。效果如图所示.
拓展知识:Table控件 Web Programming Table(教材) 【例3-13】动态生成表 新闻展示页面原理。效果如图所示.

48 课堂练习4 Web Programming 设计网上教学系统的添加作业模块,可在线布置作业,包括作业题目、作业要求,同时可以上传作业附件

49 课堂练习4 设计网上教学系统的添加作业模块,可在线布置作业,包括作业题目、所在章节、作业要求,同时可以上传作业附件
Web Programming 设计网上教学系统的添加作业模块,可在线布置作业,包括作业题目、所在章节、作业要求,同时可以上传作业附件

50 拓展知识:日历控件 Calendar: 属性: SelectionMode:显示模式
Web Programming Calendar: 属性: SelectionMode:显示模式 NextPrevFormat:选择上一月下一月显示的格式 编程: Switch(Calendar1.SelectedDates.Count) { Case 0: Label1.Text=“没有日期被选择”; Break; Case 1: Label1.Text=“被选择的日期是”+Calendar1.SelectedDate.ToshortDateString();

51 拓展知识:日历控件 } Case 7: Default:
Web Programming Case 7: Label1.Text=“被选择的星期开始于”+Calendar1.SelectedDate.ToshortDateString(); Break; Default: Label1.Text=“被选择的月份开始于”+Calendar1.SelectedDate.ToshortDateString();

52 拓展知识:广告控件 AdRotator: 创建XML文件ad.xml(添加新项——数据模板——XML文件)
Web Programming AdRotator: 创建XML文件ad.xml(添加新项——数据模板——XML文件) <Advertisements> <Ad> <ImageUrl>img1.gif</ImageUrl> <NavigateUrl> <AlternateText>Ad for GDAIB</AlternateText> <Impressions>100</Impressions> </Ad> <ImageUrl>img2.gif</ImageUrl> <NavigateUrl> <AlternateText>Ad for Baidu</AlternateText> <Impressions>200</Impressions> </Advertisements>

53 拓展知识:广告控件 AdRotator: 将AdRotator控件的Advertisement属性设置为:ad.xml
Web Programming AdRotator: 将AdRotator控件的Advertisement属性设置为:ad.xml

54 任务5:导航控件 任务描述: 学习目标: 设计学生信息管理系统的导航,包括水平导航栏和树状导航栏
Web Programming 任务描述: 设计学生信息管理系统的导航,包括水平导航栏和树状导航栏 学习目标: 掌握Menu控件与TreeView控件的使用方法

55 任务5:导航控件 解决步骤1:创建母版页Site1.Master 添加新项——母版页 <div>
Web Programming 解决步骤1:创建母版页Site1.Master 添加新项——母版页 <div> <table class="style1"> <tr> <td class="one"> </td> <td> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </tr> </table>

56 任务5:导航控件 <style type="text/css"> .style1 { width: 100%; } .one
Web Programming <style type="text/css"> .style1 { width: 100%; } .one width:20%; border-right:2px solid grey; </style>

57 任务5:导航控件 解决步骤2:使用Menu控件创建水平导航栏
Web Programming 解决步骤2:使用Menu控件创建水平导航栏 <asp:Menu ID="Menu1" runat="server" Font-Names="楷体" Font-Size="Medium“ Orientation="Horizontal"> <Items> <asp:MenuItem Text="教师档案" Value="教师档案" NavigateUrl="~/file.aspx"></asp:MenuItem> <asp:MenuItem Text="新生报到" Value="新生报到"></asp:MenuItem> <asp:MenuItem Text="学生资料" Value="学生资料"></asp:MenuItem> </Items> </asp:Menu>

58 任务5:导航控件 解决步骤3:使用TreeView控件创建树状导航栏
Web Programming 解决步骤3:使用TreeView控件创建树状导航栏 <asp:TreeView ID="TreeView1" runat="server" Font-Names="楷体" Font-Size="Medium"> <Nodes> <asp:TreeNode SelectAction="Expand" Text="班级管理" Value="班级管理“ NavigateUrl="~/class.aspx"> <asp:TreeNode Text="学院班级汇总" Value="学院班级汇总"></asp:TreeNode> <asp:TreeNode Text="班级主任管理" Value="班级主任管理"></asp:TreeNode> <asp:TreeNode Text="学院班级评比" Value="学院班级评比"></asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView>

59 课堂练习5 设计远程教学网站的学习指导子页面,要求利用Menu控件设计水平导航栏,利用TreeView控件设计树状导航栏
Web Programming 设计远程教学网站的学习指导子页面,要求利用Menu控件设计水平导航栏,利用TreeView控件设计树状导航栏

60 任务6:登录控件 Web Programming 任务描述: 设计学生管理信息系统的管理员登录页面,要求只有从登录页面验证过的管理员才能进入管理页面,假如有浏览者直接由浏览器的地址栏输入网页名称来打开网页,除了禁止其进入管理系统外,应显示信息告知应先登录才能进入管理系统 学习目标: 掌握LoginView、Login等控件的使用

61 任务6:登录控件 解决步骤1:创建管理员账号 拓展知识: 项目——ASP.NET配置
Web Programming 解决步骤1:创建管理员账号 项目——ASP.NET配置 拓展知识: 为了避免密码被黑客破解,密码默认规则为:至少7个字符,最好至少包括一个非文字或数字的字符

62 任务6:登录控件 解决步骤2:创建LoginView控件 <div>
Web Programming 解决步骤2:创建LoginView控件 <div> <img alt="" class="style1" src="images/Banner.jpg" /><br /> <asp:LoginView ID="LoginView1" runat="server"> <AnonymousTemplate> <asp:Image ID=“Image1” runat=“server” ImageAlign=“AbsMiddle“ ImageUrl=”~/images/icon_stop.gif” /> 请您先执行<br /><asp:LoginStatus ID=“LoginStatus1” runat=“server” />操作! </AnonymousTemplate> </asp:LoginView> </div> <style type="text/css"> .style1 { width: 415px; height: 52px; } </style>

63 任务6:登录控件 解决步骤3:修改Web.Config文件 解决步骤4:创建登录页面
Web Programming 解决步骤3:修改Web.Config文件 <authentication mode="Forms"> <forms loginUrl="exp6-1.aspx" timeout="2880" /> </authentication> 解决步骤4:创建登录页面

64 课堂练习6 创建在线教学系统的登录页面,登录后可以根据不同的用户身份出现不同的页面。用户身份包括:教师、学生、管理员。
Web Programming 创建在线教学系统的登录页面,登录后可以根据不同的用户身份出现不同的页面。用户身份包括:教师、学生、管理员。

65 任务7:验证控件 任务描述: 学习目标: 当用户在注册网页中输入的信息部符合指定要求时,要给出一定的错误提示信息,减少意外输入错误。
Web Programming 任务描述: 当用户在注册网页中输入的信息部符合指定要求时,要给出一定的错误提示信息,减少意外输入错误。 学习目标: 使用数据验证控件,熟悉数据验证控件的常见属性

66 任务7:验证控件 Web Programming 解决步骤1:设计窗体文件

67 任务7:验证控件 解决步骤2:设置验证控件的属性
Web Programming 解决步骤2:设置验证控件的属性 <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server“ ErrorMessage="学号不能为空" ControlToValidate="TextBox1"> </asp:RequiredFieldValidator> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server“ ErrorMessage="真实姓名不能为空" ControlToValidate="TextBox2">

68 任务7:验证控件 解决步骤2:设置验证控件的属性
Web Programming 解决步骤2:设置验证控件的属性 <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server“ ErrorMessage="密码不能为空" ControlToValidate="TextBox3"> </asp:RequiredFieldValidator> <asp:CompareValidator ID="CompareValidator1" runat="server“ ErrorMessage="确认密码与密码不一致" ControlToCompare="TextBox3“ ControlToValidate="TextBox4"> </asp:CompareValidator>

69 任务7:验证控件 解决步骤2:设置验证控件的属性
Web Programming 解决步骤2:设置验证控件的属性 <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server“ ErrorMessage="手机号码格式不正确" ControlToValidate="TextBox6“ ValidationExpression="\d{11}"> </asp:RegularExpressionValidator> <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server“ ErrorMessage=" 格式不正确" ControlToValidate="TextBox5“

70 拓展知识:CompareValidator控件的其它应用
Web Programming 与其它数据类型的数据进行比较: Operator=GreatThan/Less/NotEqual Type=Integer/Double ValueToCompare=需要比较的值 类型检测: Operator="DataTypeCheck" Type="Date"

71 拓展知识:ValidationExpression的格式符号
Web Programming []:定义可以接受的字符 {}:定义必须输入的字符数 |:表示“或” ():选择性符号,可用可不用 \:在特殊符号前必须加 ^:表示不接受 .:表示任意字符 *:表示任意组合 [A-Z]:表示任意大写字母 \d:表示任意一个数字

72 数字开头后接一个大写字母:\d[A-Z]* 只能输入1个数字:\d{1} 只能输入n个数字:\d{n} 只能输入至少n个数字:\d{n,}
拓展知识:常用的正则表达式 Web Programming 数字开头后接一个大写字母:\d[A-Z]* 只能输入1个数字:\d{1} 只能输入n个数字:\d{n} 只能输入至少n个数字:\d{n,} 只能输入m到n个数字:\d{m,n} 只能输入数字:[0-9] 只能输入0开始的数字:0\d 只能输入n个字符:.{n}(注意:汉字算1个字符) 只能输入英文字符:[A-Za-z] 只能输入大写英文字符:[A-Z]

73 只能输入英文字符+数字:[A-Za-z0-9] 只能输入英文字符+数字+下划线:\w 验证汉字:[\u4e00-\u9fa5]{0,}
拓展知识:常用的正则表达式 Web Programming 只能输入小写英文字符:[a-z] 只能输入英文字符+数字:[A-Za-z0-9] 只能输入英文字符+数字+下划线:\w 验证汉字:[\u4e00-\u9fa5]{0,} 验证QQ号:[0-9]{5,9} 验证身份证号:[1-9]([0-9]{16}|[0-9]{13})[xX0-9] 验证手机号(13|15|18)[0-9]{9} 验证护照(P\d{7})|G\d{8})

74 练习 住址: 北京电话号码: .{1, }(县|市).{1, }(市|镇|乡|区).{1, }(路|街道).{1, }号
Web Programming 住址: .{1, }(县|市).{1, }(市|镇|乡|区).{1, }(路|街道).{1, }号 北京电话号码: 010-[0-9]{8}

75 拓展知识:RangeValidator控件
Web Programming 范围验证控件: MaximumValue:比较的最大值 MinimumValue:比较的最小值 Type:比较类型

76 拓展知识:ValidationSummary控件
Web Programming 使用ValidationSummary控件对网页进行综合验证 属性: HeaderText:标题 DisplayMode:显示方式 ShowMessageBox:是否由对话框显示验证结果 ShowSummary:是否在页面显示验证结果

77 拓展知识:CustomValidator控件
Web Programming 使用CustomValidator控件验证用户的输入是否为偶数 属性: ControlToValidate ErrorMessage 事件: ServerValidate

78 CustomValidator1_ServerValidate事件代码: int num=Int32.Parse(args.Value);
Web Programming CustomValidator1_ServerValidate事件代码: int num=Int32.Parse(args.Value); if(num%2==0) { args.IsValid=true; return; } args.IsValid=false; Button1_Click事件代码: if(Page.IsValid) Label1.Text="输入数据是:"+TextBox1.Text;

79 Web Programming

80 课堂练习7 Web Programming

81 课堂练习 7 Web Programming 要求: 1、账号、密码不能为空 2、用户帐号为空或包含非字母、数字、下划线等非法字符时,或者长度不足4位或超过20位时,给出出错提示,并停止登录验证。 3、密码不足6位或超过20位长度时,给出出错提示。 4、前后两次输入的密码必须一致。 5、手机号码只能是以1开头的,长度为11位数字的数字串。 6、邮箱符合邮箱名称的规则。 7、单击“注册”时可以使用对话框将所有错误信息显示出来

82 任务8:自定义控件 Web Programming 教材:例3-26 创建一个根据关键字检索新闻的用户控件search.ascx,效果如图3-30所示(本例模板是例3-15的制作结果,可下载),并将其放入news.aspx中。

83 任务8:自定义控件 Web Programming 【例3-27】完善例3-26,使得该搜索用户控件可以适用于两类场合:1.在普通用户浏览新闻页面,只要输入关键字,就把含有该关键字的新闻列出(存到它的一个属性中);2.在管理员用户场合,只要输入关键字,就把含有该关键字的且是该管理员发表过的新闻列出(存到它的一个属性中)

84 课堂练习8 Web Programming 使用用户控件设计一个网页中常见的导航栏。使用用户控件来实现页面导航栏制作的好处在于,站点中所有页面都可以方便地调用该用户控件,使所有页面具有相同风格的外观。 用户自定义控件 主Web页面 中的标签控件

85 Assignment #2:设计博客系统的登录&注册页面
Web Programming 要求: 设计博客系统的登录和注册页面,要求具有验证功能;能在线显示用户输入的内容;用户分权限登录。 时间: 为期一周。 上交方式: 将网页文档保存在文件夹中,文件夹名为你的姓名。通过网络教学系统上传。

86 Thank You !


Download ppt "Task #3 使用ASP.NET服务器控件创建页面."

Similar presentations


Ads by Google