第5章应用高级控件构建Web页面概要.ppt

第5章 应用高级控件构建Web页面 第5章 应用高级控件构建Web页面 5.1 显示日历 5.2 上传文件 5.3 显示多视图 5.4 显示向导 5.1 显示日历 在页面上显示一个具有丰富功能的日历 语法格式： asp:Calendar id=calendar1 runat=server DayHeaderStyle/ DayStyle BackColor=gray/ /asp:Calendar 5.1.1 选择日期 SelectedDate属性：获得用户所选择的日期，它是DateTime类型 Response.Write(你选择日期所在的月份是：+Calendar1.SelectedDate.Month.ToString()); SelectionMode属性：选择日、星期、月 Day DayWeek DayWeekMonth None 5.1.1 选择日期 SelectedDates属性：获得所选星期或月份所包含的所有日期。 for(int i=0;iCalendar1.SelectedDates.Count;i++) lblMsg.Text+=Calendar1.SelectedDates[i].ToShortDateString()+BR; 5.1.2 在月份间导航 当ShowNextPrevMonth属性设置为true时，控件标题中显示允许用户在上一月和下一月之间导航的LinkButton控件。 单击LinkButton控件，可以在月份间导航。 5.1.3 设置日历的样式 TitleStyle：标题样式 NextPrevStyle：上一月/下一月导航样式 DayHeaderStyle：日标题样式 DayStyle：日期样式 SelectedDayStyle：选定日期样式 SelectorStyle：选择器样式 5.1.4 SelectionChanged事件 当用户所选日期发生改变时，引发该事件。 5.1.5 创建弹出式日历 5.1.5 创建弹出式日历 源视图： script type=text/javascript function popCalendar(){ var calendar = document.getElementById(popCal); calendar.style.display=block; } /scriptstyle type=text/css .calendar{ display:none;position:absolute;border:solid 1px black; }/style 5.1.5 创建弹出式日历 img src=images/calendar.bmp onclick=popCalendar()/ div id=popCal class=calendar asp:Calendar ID=Calendar1 runat=server onselectionchanged=Calendar1_SelectionChanged/ /div 5.2 上传文件 完成文件上传任务 语法格式： asp:FileUpload ID=FileUpload1 Style=string runat=server/ 5.2.1 获取上传文件信息 HasFile属性：检查是否有上传文件，若有，则返回true。 FileName属性：用户上传文件名称。 PostedFile属性：是一个对象(HttpPostedFile)属性，包含许多上传文件的信息。 PostedFile.ContentLength：上传文件大小，以字节为单位。 PostedFile.ContentType：上传文件类型。 5.2.2 保存上传文件 SaveAs方法：把上传文件保存到文件系统中。 [例5-2] 上传文件 5.3 显示多视图 MultiView控件可以显示多视图，他是View控件的容器。 View控件是各种服务器控件和HTML标记的容器，可以容纳成组的服务器控件，形成一个视图 关系 5.3.1 创建多视图 asp:MultiView ID=MultiView1 runat=server asp:View ID=View1 runat=server 用户名：asp:TextBox ID=TextBox1 runat=server/br / 密码：asp:TextBox ID=TextBox2 runat=server TextMode=Password Width=100px/br / asp:Button ID=Button1