实验十三: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控件的强大。
|
|