实验十三：ASP.NETajax(一)
【实验目的】
会使用ASP.NETAJAX核心组件
会使用AutoComplete控件
【实验准备】
1、复习教材相关内容；
2、预习本次实验；
【实验内容】
实现用户注册时，验证用户是否已存在
应用AJAX控件collapsiblepanle制作折叠面板
动态添加数据实验
【实验步骤】
一、实现用户注册时，验证用户是否已存在
1、训练要点：
ScriptManager和UpdatePanel控件的使用
2、需求说明：
使用ScriptManager和UpdatePanel控件，实现注册用户时，当鼠标失去焦点，自动验证用户名是否存在
3、讲解需求说明
无刷新验证用户是否已存在
4、实现思路及关键代码：
布局注册页面
编写OnTextChanged事件
5、讲解实现思路和关键代码
protectedvoidtxtUserName_TextChanged(objectsender,EventArgse)
{
boolresult=//此处为验证用户名是否存在的代码。
if(result)
{
lblMessage.Text="";
}
else
{
lblMessage.Text="该用户已存在，请更换用户名！";
}
}
二、应用AJAX控件collapsiblepanle制作折叠面板。
三、动态添加数据实验
设计数据库HumanResource，创建表Employee，包含字段EmployeeID，LastName，FirstName三个字段，其中ID自增。
创建Employee类
publicclassEmployee
{
privateint_employeeID;
privatestring_lastName;
privatestring_firstName;
publicintEmployeeID
{
get{return_employeeID;}
}
publicstringLastName
{
get{return_lastName;}
}
publicstringFirstName
{
get{return_firstName;}
}
publicEmployee(intemployeeID,stringlastName,stringfirstName)
{
_employeeID=employeeID;
_lastName=lastName;
_firstName=firstName;
}
}
3、添加后台代码
privateListEmployeeList;
protectedvoidPage_Load()
{
if(!IsPostBack)
{
EmployeeList=newList();
EmployeeList.Add(newEmployee(1,"Jump","Dan"));
EmployeeList.Add(newEmployee(2,"Kirwan","Yvette"));
ViewState["EmployeeList"]=EmployeeList;
}
else
EmployeeList=(List)ViewState["EmployeeList"];
EmployeesGridView.DataSource=EmployeeList;
EmployeesGridView.DataBind();
}
protectedvoidInsertButton_Click(objectsender,EventArgse)
{
if(String.IsNullOrEmpty(FirstNameTextBox.Text)||
String.IsNullOrEmpty(LastNameTextBox.Text)){return;}
intemployeeID=EmployeeList[EmployeeList.Count-1].EmployeeID+1;
stringlastName=Server.HtmlEncode(FirstNameTextBox.Text);
stringfirstName=Server.HtmlEncode(LastNameTextBox.Text);
FirstNameTextBox.Text=String.Empty;
LastNameTextBox.Text=String.Empty;
EmployeeList.Add(newEmployee(employeeID,lastName,firstName));
ViewState["EmployeeList"]=EmployeeList;
EmployeesGridView.DataBind();
EmployeesGridView.PageIndex=EmployeesGridView.PageCount;
}
protectedvoidCancelButton_Click(objectsender,EventArgse)
{
FirstNameTextBox.Text=String.Empty;
LastNameTextBox.Text=String.Empty;
}
【总结与体会】
通过本次实验掌握了ASP.NETajax控件的使用，随着学习的深入，越来越感觉到AJAX控件的强大。
|
|
