ASPNET教学设计教案教程.docx

ASP.NET课程教案20232023学年其次学期任课老师张成年任课班级软件153课程名称ASP.NET课程类型专业必修课总学时80二O一b年二月授课题目第1章搭建ASPoNET开发环境授课类型理论课+试验课教学方法讲授、实例驱动教学手段多媒体教学授课时间学时支配3教学目的通过本次课程的学习，主要驾驭visualstudio开发环境的框架学问，安装学问和开发环境常用操作：教学重点框架学问页面创建网站包括的基本要素教学难点框架学问其它教学基本内容备注一、新课导入我们已经学习了C#程序语言，驾驭了面对对象编程的基础，再进一步了解框架相关学问。包括一个完整网站包括的基本要素和常用的操作。授课题目第2章服务器控件授课类型理论课+试验课教学方法讲授、实例驱动教学手段多媒体教学授课时间学时支配15教学目的通过本次课程的学习，主要驾驭以下控件的应用：Page页面1.abel控件TextBox控件Button控件HyperLink控件Image控件ImageButton控件1.inkButton控件DropDownList控件1.istBox控件CheckBox控件CheckBoxList控件RadioButton控件RadioButtonList控件Panel控件Table控件BulletedList控件ImageMap控件教学重点Label控件TextBox控件Button控件DropDownList控件1.istBox控件RadioButtonList控件Panel控件Table控件ImageMap控件教学难点ListBox控件RadioButtonList控件Table控件ImageMap控件其它教学基本内容授课内容提要第2章服务器控件(一)Page页面Io作用容器：承载控件2o重要属性IsPostBack3。例子Page.IsPostBack属性试验：添加一个Web窗体,在页面上放一个按钮和一个标签(Label)控件,将Label的Text属性设置为Oo在PageJoad事务中写代码：if(!Page.IsPostBack)(intx=int.Parse(Label2oText)+1;1.abel2.Text=x.ToStringO:运行，不断点击按钮。变更后对比(去掉if推断)protectedvoidPage_Load(objectsender,EventArgse)(intx=intoParse(LabeI2。Text)+1;1.abel2.Text=x.ToString0；运行,不断点击按钮。(二)Label控件K作用显示数据2o重要属性BackColorBorderStyleBorderWicithTextEnableThemingSkinIDHeightWidth3.例子/Label的例子：更改TeXt属性和背景颜色floatsalary=4100。2f；if（salary>2000）1.abelloText=您须要交税”；else1.abelloText="您不须要交税”；此处填写更改颜色的代码1.abell.BackColor=Label的例子：更改TeXt属性和背景颜色（三）TextBox控件Io作用数据输入控件2o重要属性和方法BorderColorBorderStyleBorderWidthTextEnableThemingSkinIDTextMode->SingleLine>MUltiLine、PasswordReadOnly3o例子TextBox的ReadOnly属性测试：放一个文本框（TeXtBOX）,将其ReadOnly属性设置为true,运行看结果如何？问题：在哪里能够修改文本框的值呢？参考答案：一是在设计时通过属性窗口修改Text属性，二是在事务中通过代码修改Text属性（四）Button控件Io作用响应用户操作（鼠标和键盘事务）。2.重要属性和事务BorderColorBorderStyleBorderWidthTextEnableThemingSkinIDCausesValidation一是否引发验证OnClientClick>指定单击按钮时执行的客户端脚本代码函数名UseSubmitBehavior-）指示按钮是否呈现为提交按钮，默认为truePostBackUrl指定单击此按钮时回发到的页面的URL,默认为本页在目标页面中用Page。PreviousPageoFindControl（）方法获得数据Click事务3o例子标签、文本框、按钮的综合例子一模拟登录程序用户名a密码ISS学问点：TextBox的TextMode属性If语句弹出提示对话框(可以带上耳机)protectedvoidButtonlClick(objectsender,EventArgse)(stringuid="a",pwd="123”;if(TextBoxloText=Uid)&&(TextBox2.Text=pwd)Response.Write(w<script>alert(,用户名和密码正确！)/script)”)；elseResponseoWrite("(scriptlanguage=*javascript>>alert('用户名和密码不正确！')<script>w);（五）HyperLink控件Io作用超级链接2.重要属性TextNavigateUrlImageUrlToolTipTargetSkinID3o例子将NavigateUrl设置为default,aspx9然后再（1）设置Target为空（即默认值），查看效果；（2）设置Target为_blank,查看效果。HyperLink比<a><a>标记是更便利。（六）ImageBUttOn控件1.作用显示图片的按钮2.重要属性ImageUrlImageAlignAltemateTextCausesValidationPostBackUrlOnClientClickToolTipClick事务3o例子ImageButton的例子BorderWidth为2BorderColor为红色创建文件夹pic,存入图片48.gifImageUrl="/pic/48。gif”(六)LinkBUttorl控件Io作用显示为超级链接的按钮2o重要属性TextCausesValidationPostBackUrlOnClientClickToolTipCIiCk事务(4s)DropDownList控件Io作用显示数据2o重要属性添加项目联动AutoPostBack属性SelectedIndexChanged事务3o例子设计界面PageLoadDropDownListlSelectedlndexChangedDropDownList2SeIectedIndexChangedAutoPostBack属性Buttonl_Click练习：DroPDoWnLiSt年、月、日联动2008*j¢5345B2008年2习月9l1l11l12l13l14l15l16l17l10eLtll21l22l23l24lzll26l27l28l29lxll31|0|1|2|3|4|5|6|7|8四2032223?4券玉27出:3tcl101ll2l13lul15l1nl17l18l19l20l21l22l<3"l25l26l27l7H（八）ListBox控件1.作用显示列表2.重要属性ItemsSelectionMode->Single>Multiple添加新项目删除选中项目查找是否有该项目清空全部的项目3.例子1asdfslddd学号sdfsadasdsa似怪非懂省份名称“I巴丽徐i群顽一全部滑空1.istItem类型1.iStItenI的两个重要属性：Text11Value创建一个ListItem对象：1.istItemLil=newListItemO;1.iLText="hello”；1.iLValue="1”；添加项目一判空、ISPOStBaCk问题：每次点按钮都添加了多项,如何解决？解决方案：推断是否是第一次，是则添加项；否则什么也不做.1.istBoxl.ItemSoAdd(newListItem(TextBoxl.Text);添加时推断是否为空Trim()方法逻辑：不为空添加新项目；为空,弹出不允许为空的对话框.删除的业务逻辑单项删除假如有选中的项目则删除，否则提示“没有项目被选中！”多项删除从第一项到最终一项循环,假如第i项被选中则删除。问题：怎么知道一共有多少项？某项被选中怎么区分？查找的业务逻辑假如找到则选中项目，否则提示“没有找到”删除代码：1.istBoxl.Items.RemoveAt(i)；依据索引删除项添加删除确认对话框：在PageLOad事务中，写入BUttOn1。Attributes"onClick”=ujavascript：returnCOnfinn('你确认要删除吗？)；”，然后在BUttOnIonCliCk事务中写入您的执行代码.问题：多选删除如何实现？第一想法：for(inti=0;i<ListBoxloItems.Count;i+)if(ListBoxl.ItemsioSelected)(Response.Write(i+z,<br)")；ListBoxl.ItemSoRemoveAt(i)；)问题：连续的时候会少删除其中一项,什么缘由呢？改进后的删除代码：for(inti=ListBoxloIternsoCount-I;i>=0；i)变更策略:从后往前删除if(ListBoxloItenlSi。Selected)(ResponseoWrite(i+w(br>w);ListBoxloItems.RemoveAt(i);)ResponseoWrite(zz<script>alert(,删除成功！')<script>w);2023级岳晓同学的代码：for(inti=0；i(ListBoxloItemsoCount;i+)if(ListBoxloItemsi.Selected)(ResponseoWrite(i+”br>”);1.istBoxl.ItemSoRemoveAt(i)；i=i-1;此处做了改进)查找方案：查找要求：假如有则选中该项,没有则提示“没有满意条件的项目。ListBoxloItemsoFindByText(TextBoxloText)ListBoxloItems.IndexOf(item)ListBoxloItemsposition。Selected查找代码：ListItemitem=newListitem(TextBoxl.Text)；intposition=this。ListBoxl.Items.IndexOf(item);if(position>=0)(1.istBoxl.Itemsposition.Selected=true;)elseResponseoWrite(w<script>alert(,没有满意条件的项目！')/script”)；)清空全部项目protectedvoidPageLoad(objectsender,EventArgse)Button5oAttributes"onclick="javascript：returnconfirm(,Areyousuretodeleteallitems?')”；protectedvoidButton5Click(objectsender,EventArgse)(1.istBoxloItems.Clear()；)1.istBox控件的常用属性和方法1.istBoxl.IternsoCount1.istBoxloItemSoSelectedIndex可读写(赋值或被赋值)1.istBoxl.ItemsioText1.istBoxloItemsi.Selected可读写(赋值或被赋值)1.istBoxl.ItemSoAdd()1.istBoxloItems.Insert()1.istBoxloIternsoRemoveAt()1.istBoxl.Items.Remove()1.istBoxloIternsoFindByText(TextBoxloText)1.istBoxl.Items.IndexOf(item)(九)CheCkBoX控件1 .作用可以多项选择2 .重要属性属性CheckedText方法3o例子您的选择是：喜欢旅游,不喜欢看书;喜欢打球;不喜欢编程,喜欢游泳；选择您的爱好口旅游回看书口打球口编程回游泳三回旅游看书回打球编程回游泳I选择完成ICheckBox实现多项选择添加3个CheckBox和一个Button,内容如图所示。点击“确定”按钮,提示选择的项目.protectedvoidButtonlClick(objectsender,EventArgse)(strings=,“；if(CheckBoxloChecked)s=s+"您宠爱"+CheckBoxLText；if(CheckBox2.Checked)s=s+”您宠爱"+CheckBox2.Text;if(CheckBox3.Checked)s=s+您宠爱+CheckBox3oText；ResponseeWrite(s)；选择您的爱好力文学七音阳七旅游(+)CheckBoxList控件1.作用相当于一组复选框2.重要属性Items3o例子CheckBoxList实现多项选择protectedvoidButton2Click(objectsender,EventArgse)(for(inti=0;i(CheckBoxListl.Items.Count；i+)(if(CheckBoxListloItemsioSelected)ResponseoWrite(CheckBoxListloItemsioText);)(H一)RadiOBUttOn控件Io作用实现单项选择(互斥)2。重要属性TextAutoPostBackGroupName3o例子鼠标滑过的特效：鼠标滑过时文本框内容被选中TextBoxloAttributesoAdd("OnMouseOver","this。focus()；this.selectO鼠标点击时文本框内容被清空TextBoxloAttributes.Add("onclick",this.value=,w)；(十二)RadiOBUttOnLiSt控件1.作用相当于一组RadioButton2.重要属性Items3.例子输入“1964”，点击“查看”按钮点击“老年”，效果如下：。青年。老年。少年出生年份1964屈丽龄在60-120之间。青年。中年老年。少年 出生年份眄查看OIO万以下 OIO-20 万O 20万以上OioMTO1020万020万以上B处理属性和事务OTextOAutoPostBackOGroupName/protectedvoidPage_Load(objectsender,EventArgse)/protectedvoidButtonLClick(objectsender,EventArgse)/protectedvoidRadioBu11onLCheckedChanged(objectsender,EventArgse)protectedvoidPageLoad(objectsender,EventArgse)(TextBoxloAttributesoAdd(,onMouseOver,”this。focus()；thisoselect()；n);/TextBoxl.AttributesoAdd(z,onMousever,"this。focus()；this。select();this,value三,w);/TextBoxl.Attributes.,AddConclickw,nthis,value=*,*)；)protectedvoidRaclioButtonlCheckedChangecl(objectsender,EventArgse)(Response.Write(w你的年龄在15-30之间“);(十三)Panel控件Io作用容器：相当于组2.重要属性GroupingText3.例子书上109页例子不讲,干脆讲“登录模拟_Panel控件”的例子。（十四）Table控件Io作用容器，用于布局2o重要属性HorizontalAlignBackColorBorderColorBorderStyleBorderWidthForeColorGridLinesFont-BoldHeightWidth3.组成（结合下图说明）十t姓名成绩I黄噢英J100824.例子书上113页例子的升级,讲“动态创建表格并填充内容参考代码”的例子。简洁总结：TabIe和Panel实际可以相互嵌套,只是般最外层是TabIe.（十五）BUnetedLiSt控件1.作用为列表项增加项目符号2。重要属性和方法Items属性Itemsi.Text属性Insert和Add方法3.例子书上116页例子加工，讲“动态添加项目和点击文字的即时变更”的例子.（十六）ImageMap控件Io作用相当于把幅图片虚拟分割成多个区域。2.重要属性和事务ImageUrl属性HotSpotMode属性CliCk事务3.热点区域的划分IX轴赢搜狐雅虎网易I丁“心JrAY轴4o例子书上117页例子强力改造，形成了“网易、搜狐、雅虎、新浪网站导航的例子。三、小结1 .本章须要驾驭控件的主要属性、方法和事务，利用它们组合形成特定的功能。2o书上的文字内容不简洁理解,通过例子学习更便利，然后再回头.（循环反复）四、作业将书上的例子做一遍五、教学后记1 .服务器控件的作用：实现用户的交互，供应操作的接口.2。教材处理：书上的例子能够满意确定的需求，但是还不够。（Butthat,snotenough）须要老师自己重新创建例子.（Doityourself）书上的例子有的课上不做了；有的课上让学生自己做，然后演示；有的很好的、有确定难度的老师组织一起践行。3.功能驱动法：首先展示系统的功能（即老师演示程序），让学生有一个直观感受，”知道自己去哪里”.4。面对过程及面对对象结合实际本章体现了积累木原则，也是利用三种常见的程序结构（面对过程），而控件的属性、方法则完全是面对对象的思想。5.学生也很有创建力实现LiStBOX多选删除时，岳晓同学及老师的思路不同，同样可以完成删除。2023级岳晓同学的代码：for（inti=0;i<ListBoxloItemsoCount；i+）if（ListBoxl.Itemsi.Selected）（ResponseoWrite（i+,<br>n）；1.istBoxloItems.RemoveAt（i）；i=i-l;此处做了改进六、参考资料ASPoNET数据库开发入门及提高（清华高校出版社）VisualC#2023编程实例精粹（中国水利水电出版社）VisualC#.NET可视化程序设计（清华高校出版社）ASP。NET动态网站开发基础教程（C#篇）（清华高校出版社）授课题目第3章验证控件授课类型理论课+试验课教学方法讲授、实例驱动教学手段多媒体教学授课时间学时支配5教学目的驾驭表单验证控件、比较验证控件、范围验证控件、正则验证控件、自定义逻辑验证控件、验证组控件的运用。教学重点框架学问页面创建网站包括的基本要素教学难点框架学问其它教学基本内容ASP.NET供应了强大的验证控件，它可以验证服务器控件中用户的输入，并在验证失败的状况下显示一条自定义错误消息.验证控件干脆在客户端执行，用户提交后执行相应的验证无需运用服务器端进行验证操作，从而削减了服务器及客户端之间的来回过程.3o1表单验证控件(ReqlIiredFieIdValidatOr)在实际的应用中，如在用户填写表单时，有一些项目是必填项，例如用户名和密码。在传统的ASP中，当用户填写表单后,页面须要被发送到服务器并推断表单中的某项HTML控件的值是否为空，假如为空，则返回错误信息.在ASPoNET中,系统供应了RequiredFieldValidator验证控件进行验证。运用RequiredFieldValidator控件能够指定某个用户在特定的控件中必需供应相应的信息，假如不填写相应的信M5RequiredFieldValidator控件就会提示错误信息，RequiredFieldValidator控件示例代码如下所示。<body><formid="form1"runat="server"><div>姓名：<asp:TextBoxID三,*TextBoxTrunat="server,'></asp:TextBox><asp:RequiredFieldValidatorID=llRequiredFieIdVaIidatorI"runat="server"ControlToValidate=TextBoxI”ErrorMeSSage="必填字段不能为空"><asp:RequiredFieldValidator><br/>密码:<asp：TextBoxID="Te×tBox2"runat=nsener,><Zasp:TextBox><br><asp：ButtonID=nButton1"runat=',server,'Text="Button"><br><div><form><body>在进行验证时,RequiredFieldValidator控件必需绑定一个服务器控件，在上述代码中，验证控件RequiredFieldValidator控件的服务器控件绑定为TextBoxl,当TextBoxl中的值为空时，则会提示自定义错误信息”必填字段不能为空”，如图353所示.图3-53RequiredFieldValidaior验证控件当姓名选项未填写时，会提示必填字段不能为空，并且该验证在客户端执行。当发生此错误时，用户会立刻看到该错误提示而不会立刻进行页面提交,当用户填写完成并再次单击按钮控件时，页面才会向服务器提交.302比较验证控件(ComPareValidatOr)比较验证控件比照特定的数据类型来验证用户的输入。因为当用户输入用户信息时,难免会输入错误信息，如当须要了解用户的生日时,用户很可能输入了其他的字符串。CompareValidator比较验证控件能够比较控件中的值是否符合开发人员的须S-CompareValidator控件的特有属性如下所示： COntrOlTOCOmpare:以字符串形式输入的表达式。要及另一控件的值进行比较。 OPeralor:要运用的比较。 Type：要比较两个值的数据类型。 VaIueToCompare:以字符串形式输入的表达式。当运用COmPareValidator控件时，可以便利的推断用户是否正确输入,示例代码如下所示。 body><formid="form,runat="server"><div>请输入生日：<asp：TextBoxID-1TextBoxI"runat="server"></asp：TextBox><br>毕业日期：<asp：TextBoxID="TextBox2"runat="server,'></asp:TextBox><asp：ConipareVaIidatorID=nCompareVaIidatorI"runat="server"COntrOlTOComPare="TextBox2"ControlTOValidate="TextBox1”CulturelnvariantVaIues="TruenErrorMessage="揄入格式错误！请改正!”Operator=nGreaterThan"Type="Date"></asp：CompareVaIidator)<br><asp：ButtonID=1ButtonI"runat="server"Text=nButton"/><br/><div><form><body>上述代码推断TeXtBoXl的输入的格式是否正确，当输入的格式错误时，会提示错误,如图3-54所示.图354CompareValidator验证控件CompareValidator验证控件不仅能够验证输入的格式是否正确，还可以验证两个控件之间的值是否相等.假如两个控件之间的值不相等,CompareValidator验证控件同样会将自定义错误信息呈现在用户的客户端阅读器中.3o3范围验证控件(RailgeVaHdator)范围验证控件(RangeVaIidator)可以检查用户的输入是否在指定的上限及下限之间.通常状况下用于检查数字、日期、货币等。范围验证控件(RangeValidatOr)控件的常用属性如下所示. MinimumValue:指定有效范围的最小值。 MaXimUmVaIUe:指定有效范围的最大值. Type：指定要比较的值的数据类型。通常状况下，为了限制用户输入的范围，可以运用该控件。当输入用户的生日时，今年是2023年，那么用户就不应当输入2023年，同样基本上没有人的寿命会超过100,所以对输入的日期的下限也须要进行规定,示例代码如下所示。<div>请输入生日:<asp:TeXtBoXID="TextBox,runat="SerVer"><asp:TextBox><asp：RangeVaIidatorID=',RangeValidator,runat="server"ControIToVaIidate="TeXtBOX1"EirorMessage="超出规定范围，请重新填写”MaximumValue=',202311"MinimumVaIue=nI912/1/1"Type=nDate"></asp：RangeValidator><br><asp:ButtonID-Buttonrunat="server,'Text=ltButton"/><div>上述代码将MinimumValuc属性值设置为1912/1/1,并能将MaximumValue的值设置为2023/1/1,当用户的日期低于最小值或高于最高值时,则提示错误，如图355所示。图355RangeVaIidator验证控件留意：RangeValidatOr验证控件在进行控件的值的范围的设定时，其范围不仅仅可以是一个整数值,同样还能够是时间、日期等值。304正则验证控件(RegIIIarEXPreSSiOnValidatOr)在上述控件中，虽然能够实现一些验证,但是验证的实力是有限的，例如在验证的过程中，只能验证是否是数字,或者是否是日期。也可能在验证时，只能验证确定范围内的数值，虽然这些控件供应了一些验证功能,但却限制了开发人员进行自定义验证和错误信息的开发。为实现一个验证,很可能须要多个控件同时搭配运用.正则验证控件(RegularExpressionValidalor)就解决了这个问题,正则验证控件的功能特殊的强大,它用于确定输入的控件的值是否及某个正则表达式所定义的模式相匹配，如电子邮件、电话号码以及序列号等.正则验证控件(RegllIarEXPreSSiOnVaIidatOr)常用的属性是ValidaliOnEXPreSSiOn,它用来指定用于验证的输入控件的正则表达式。客户端的正则表达式验证语法和服务端的正则表达式验证语法不同，因为在客户端运用的是JSriPl正则表达式语法，而在服务器端运用的是Regex类供应的正则表达式语法。运用正则表达式能够实现强大字符串的匹配并验证用户的输入的格式是否正确,系统供应了一些常用的正则表达式，开发人员能够选择相应的选项进行规则筛选，如图3-56所示.图3-56系统供应的正则表达式当选择了正则表达式后，系统自动生成的HTML代码如下所示.<asp：RegularExpressionVaIidatorID=11RegularExpressionVaIidatorI"runat="sener,ControlToVaIidate=0TextBoxI,ErrorMessage=n正则不匹配，请重新输入!"ValidationExpression=nVd17dXId15,>>/asp：RegularExpressionVaIidatoe运行后当用户单击按钮控件时，假如输入的信息及相应的正则表达式不匹配，则会提示错误信息，如图357所示。图357RegUIarEXPreSSionValidaIOr验证控件同样，开发人员也可以自定义正则表达式来规范用户的输入。运用正则表达式能够加快验证速度并在字符串中快速匹配,而另一方面,运用正则表达式能够削减困难的应用程序的功能开发和实现。留意:在用户输入为空时，其他的脸证控件都会险证通过.所以，在验证控件的运用中，通常须要同表单脸证控件(ReqUiredFiekiVaIidatOr)一起运用.305自定义逻辑验证控件(ClIStOmValidator)自定义逻辑验证控件(CUSlOmVaIidatOr)允许运用自定义的验证逻辑创建验证控件.例如，可以创建一个验证控件推断用户输入的是否包含号，示例代码如下所示.protectedvoidCustomValidator1_ServerValidate(objectsource,ServerVaIidateEventArgsargs)(args.IsVaIid=args0VaIue.ToStringO0Contains(".");设置验证程序，并返回布尔值)protectedvoidButton1_Click(objectsender,EventArgse)用户自定义验证if(PagedsVaIid)推断是否验证通过1.abel1oText="验证通过”；输出验证通过else(1.abeILText="输入格式错误”；提交失败信息)上述代码不仅运用了验证控件自身的验证，也运用了用户自定义验证，运行结果如图358所示.图358Cus(omValida(or验证控件从CustomValidator验证控件的验证代码可以看出，CustomVaIidator验证控件可以在服务器上执行验证检查.假如要创建服务器端的验证函数，则处理CustomValidator控件的ServerValidate事务。运用传入的ServerVaIidateEventArgs的对象的IsVaIid字段来设置是否通过验证。而CustomVaIidator控件同样也可以在客户端实现,该验证函数可用VBScript或JSCriPt来实现，而在CustomValidator控件中须要运用ClientValidationFunction属性指定及CUStOmValidatOr控件相关的客户端验证脚本的函数名称进行控件中的值的验证.306验证组控件(VaIidatioIISiImmary)验证组控件(ValidaIiOnSUmmary)能够对同一页面的多个控件进行验证.同时，验证组控件(ValidaiionSummary)通过ErrorMessage属性为页面上的每个验证控件显式错误信息.验证组控件(ValidationSUmmary)的常用属性如下所示。 DisplayMode:摘要可显示为列表，项目符号列表或单个段落。 HeaderText:标题部分指定一个自定义标题。 ShowMessageBox:是否在消息框中显示摘要。 ShowSummary:限制是显示还是隐藏VaIidatiOnSUmmary控件。验证控件能够显示页面的多个控件产生的错误，示例代码如下所示.<body><formid=',form,runat="server"><div>姓名：<asp：TextBoxID=uTextBoxrunat="server"><asp:TextBox><asp：RequiredFieIdVaIidatorID-lRequiredFieIdVaIidatorI,runat="serveControlToVaIidate=uTextBoxI,ErrorMessage="姓名为必填项"><asp:RequiredFieIdVaIidator><br>身份证：<asp:TextBoxID="TextBox2"runat="server"></asp：TextBox><asp：RegularExpressionVaIidatorID="RegularExpressionValidator,runat="server"ControIT0Validate="?extBo×1"ErrorMessage="身份证号码错误"Va