01-Sample ASP.NET AJAX Application
本文中,你将学习创建一个应用程序去显示AdventureWorks示例数据库中的雇员数据。该应用程序
使用UpdatePanel控件去刷新页面中的发生变化的某个部分,而不是在回传发生时刷新整个页面。这被称为局部
刷新。该示例使用UpdateProgress控件去显示局部页面更新时的状态信息。
创建一个ASP.NET Ajax-Enabled Web Site
启动Visual Studio
在文件菜单中,选择新建网站
在VS已安装模板中,选择ASP.NET Ajax-Enabled Web Site
输入创建路径及选择开发语言,点击确定
添加一个UpdatePanel控件到ASP.NET页面上
当你创建完ASP.NET Ajax-Enabled Web Site时,再创建一个包含UpdatePanel控件的ASP.NET页面。
在你添加一个UpdatePanel到页面上时,你必须添加一个ScriptManager控件。UpdatePanel控件依赖
ScriptManager来管理局部页面刷新。
创建步骤
在解决方案管理器中,右键点击该网站,选择添加新项
在VS已经安装模板中,选择Web窗体
命名为Employees.aspx,并选择你使用的开发语言,点击确定
切换到设计视图
在工具栏的AJAX Extensions选项卡中,双击ScriptManager控件,以添加其到页面上。
拖动一个UpdatePanel控件到ScriptManager控件下方
添加内容到UpdatePanel中
UpdatePanel控件起着局部刷新以及识别内容是否独立于页面的其他部分而刷新。现在,你需要
添加一个数据绑定控件用来显示AdventureWorks示例数据库的数据。
步骤
从工具栏的数据选项卡中,拖动一个GridView控件到UpdatePanel的可编辑区域中
在GridView的任务菜单中,选择格式化(Auto Format)
在Auto Format面板中,选择一个风格
在GridView任务菜单中,在选择数据源中下拉并选择新建数据源,即可看到数据源配置向导。
在数据来源中选择数据库一项
在配置数据源向导中,配置一个Connection用以连接AdventureWorks数据库。
选择自定义SQL语句或存储过程,点击下一步,并在输入框中输入以下语句:
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
点击完成即可。
在GridView任务菜单中,选择启动分页一项。
保存所有修改,按Ctrl+F5预览该页面。
注意:这时当你选择不同分页的数据时,会发现没有页面闪烁(刷新)的现象,因为该页面没有执行回传和
整个页面时时更新。
添加UpdateProgress控件到页面中
UpdateProgress控件将在UpdatePanel中的新内容开始请求时显示一个状态信息。
步骤
从AJAX Extensions选项卡中,拖动一个UpdateProgress控件到页面中,放于UpdatePanel下方。
选中UpdateProgress控件,在属性窗口中,把AssociatedUpdatePanelID指向UpdatePanel控件。
这将把UpdateProgress控件和之前的UpdatePanel控件关联起来。
在UpdateProgress的可编辑区域中,键入"Getting Employees......"
保存你的更改,按Ctrl+F5预览该页面。
如果页面在运行SQL查询和返回数据时有延迟现象,UpdateProgress控件将显示状态信息。
在页面中添加延迟
如果你的应用程序更新页面数据时很快,你可能就看不到UpdateProgress的内容。
UpdateProgress控件支持DisplayAfter属性,用来在控件显示之前启用一个自定义延迟。
这将防止控件更新太快时浏览器闪烁的现象。默认,这个延迟设置为500毫秒。意味着如果
页面的更新任务少于半秒时,UpdateProgress控件将不会显示。
在这个应用程序中,你可以添加一个手工延迟,以确保UpdateProgress控件起到预期的作用。
这是一个可选步骤并仅用来测试你的应用程序。
步骤
在GridView的PageIndexChanged事件中,添加如下代码:
System.Threading.Thread.Sleep(3000);
保存你的更改,按Ctrl+F5预览该页面。