1 / 86

Task #3

Task #3. 使用 ASP.NET 服务器控件创建页面. 学习目标. 了解 ASP.NET 服务器控件的属性和方法 掌握 ASP.NET 服务器控件的使用 掌握服务器控件中验证控件的使用 项目：学生信息管理系统登录 & 注册页面. 任务 1 ：简单语法的综合应用. 任务描述： 建立一个简单的学生成绩计算器，当用户在网页中输入 《 计算机数学 》 和 《 计算机应用基础 》 两门课程的成绩时，即可计算总成绩和平均成绩，效果如图所示： 学习目标： 熟悉 C# 基本用法，熟悉变量的定义、类型转换及混合运算 掌握 ASP.NET 基本控件的使用（文本框、按钮、标签）.

decima
Download Presentation

Task #3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

  5. 提示 • <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行- -> • <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> • </td> • </tr>

  7. 任务1：简单语法的综合应用 • 解决步骤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：设计后台程序 • 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） • C#的数据类型和表达式 • 变量和常量 • 常见数据类型 • 类型转换 • 操作符

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

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

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

  13. 提示 • <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 • { • width:50%; • margin:10px; • }

  14. 任务2：流程控制程序综合应用 • 解决步骤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; • iWeekDay = (int)DateTime.Now.DayOfWeek;//将今天是星期几转换成整数 • switch (iWeekDay) • { • case 1: • s = “一"; • break; • case 2: • s = “二"; • break; • case 3: • s = "三"; • break; • case 4: • s = "四"; • break;

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

  17. 任务2：流程控制程序综合应用 • 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 = "用户名或密码不对"; • } • else • { • Label1.Text = "登录已经超过三次"+i.ToString(); • Button1.Visible = false; • } • }

  18. 拓展知识：C#流程控制（参考PPT） • 分支语句 • 循环语句

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

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

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

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

  25. 课堂练习3-2

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

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

  28. 拓展知识：其它选择控件 • 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]); ListBox1.Items.Remove(ListBox1.Items[i]);

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

  31. 拓展知识：其它常用按钮控件 • LinkButton控件与HyperLink控件：

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

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

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

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

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

  37. 任务4：图像控件及文件上传控件 • 解决步骤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：图像控件及文件上传控件 • //上传文件重命名为时间和日期的组合，不易重名，可防止上传文件互相覆盖 • FileUpload1.SaveAs(Server.MapPath("images/" + strFileName + ".jpg")); • Panel1.Visible = true; • Image1.ImageUrl = "images/" + strFileName + ".jpg"; • } • Else • { • Response.Write("<script>alert('文件类型不对')</script>"); • } • }

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

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

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

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

  43. 拓展知识：ImageMap控件 ImageMap（教材） 【例3-12】 Image和ImageMap应用举例，效果 如下。上面是Image，下面是ImageMap。当用户 指向不同的热区时候，有不同的替代文字出现，当单 击不同的热区的时候跳转到不同的页面。

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

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

  46. 拓展知识：Table控件 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. 拓展知识：Table控件 Table（教材） 【例3-13】动态生成表 新闻展示页面原理。效果如图所示.

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

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

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

More Related