第十三章AJAX实例.ppt

10.添加年级信息 try { connection.Open(); command.ExecuteNonQuery(); } finally { connection.Close(); } } 10.添加年级信息 通过上述的页面后台文件，是否可以将文本框和下拉框中的数据插入到数据库中？在页面中没有任何显示，这也是因为Ajax不刷新页面造成的，这时，需要在Button点击后重新绑定GradeGV。 11.UpdateProgress控件 在很多网站上经常使用到一种称为“黄褪”（Yellow Fade Technique）的技术，当用户进行某操作后，会在网站醒目位置有提示信息，稍后，信息消失。 11.UpdateProgress控件 在本例中还需要在插入完成后，增加一个“黄褪”来提示信息已经插入。 在GradeClassMng.aspx页面中插入UpdateProgress控件实现黄褪，代码如下： …… hr / asp:UpdateProgress ID=UpdateProgress1 runat=server AssociatedUpdatePanelID=UpdatePanel1 ProgressTemplate div style=background:#FF6600; width:200px; 年级信息已经插入/div /ProgressTemplate /asp:UpdateProgress 11.UpdateProgress控件 asp:UpdatePanel ID=UpdatePanel1 runat=server …… 在GradeClassMng.aspx.cs文件中，在 Button_Click事件最后，追加两行代码如下： //设置UpdateProgress控件停留时间为5000ms System.Threading.Thread.Sleep(5000); //重新绑定GradeGV的数据 this.GradeGV.DataBind(); 12. TabContainer控件使用 在GradeClassMng.aspx页面中还要实现对班级的管理，在对班级的管理，可以使用弹出层或使用Tab标签的形式，都可以提供较好的用户体验。在本例中使用后者，弹出层形式将会在后面用到。 从工具箱中Ajax Controls中，拖动一个TabContainer到GradeClassMng.aspx页面中。点击TabContainer的智能标记的Add Tab Panel，如图13.34，增加两个Tab标签，分别设置名称为“年级管理”和“班级管理”。 12. TabContainer控件使用 将UpdateProgress1、UpdatePanel1均拖入到“年级管理”标签内，如图13.35。现在浏览页面可看到TabContainer的作用是在页面中形成Windows选项卡的作用，在这样的情况下，用户操作是在不同选项卡中进行切换，而并不是打开新的页面，形成整个页面刷新。 13.创建显示班级列表的GridView 切换到“班级管理”Tab标签，使用类似增加年级管理标签内容的方法，分别加入UpdateProgress（ID=”UpdateProgress2”）、UpdatePanel（ID=”UpdatePanel2”）控件，在UpdatePanel2控件中加入DropDownList（ID=”SelectGrade_DrpList”）、GridView（ID=”ClassGV”）、TextBox（ID=”ClassName_TxtBox”）、DropDownList（ID=” ClassTeacherName_DrpList”）、Button（Text =”新增班级”）。UpdateProgress2内容设置为“班级信息正在更新”。 13.创建显示班级列表的GridView 将SelectGrade_DrpList增加一个新数据源ClassGradeSrc，然后再SELECT选项中，选择存储过程usp_SelectGrade，完成后，将数据进行绑定，设置其属性DataTextField为gradeName，DataValueField为gradeId。 13.创建显示班级列表的GridView 将ClassGV用类似年级管理部分的方式进行操作。指定数据源为ClassSrc，设置数据源SELECT、UPDATE、DELETE分别对应存储过程usp_SelectClass、usp_UpdateCl