nini

学然后知不足,教然后知困
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

4. 使用AJAX扩展xBikes解决方案

Posted on 2007-04-01 20:52  nini  阅读(1190)  评论(0编辑  收藏  举报

 

导论和目标

1. 安装ASP.NET AJAX v1.0

2. 使用Visual Studio 2005准备开发ASP.NET AJAX应用

3. 创建一个ASP.NET AJAX Futures 的启动模型 

4. 使用AJAX扩展xBikes解决方案 

4.1 添加ScriptManager and UpdatePanel

4.2 执行异步请求时显示通知 

4.3 使用AutoCompleteExtender异步调用Web service 

4.4 使用AJAX Control Toolkit中的例子 

4.5 拖拽功能

4.6 在AJAX Framework中使用ASP.NET’s Profile服务 

4.7 创建你自己的ASP.NET AJAX 控件扩展 


 

 

任务:我们在解决方案中插入一个Lable,并观察页面加载的过程。

步骤4a: 在解决方案浏览器中打开MasterPage.master

如图4a所示,插入一个Label控件,并输入文本”Last page refresh”

图4a: MasterPage.master中的新项

按F7切换到源代码视图。在Page_Load()方法中,加入下面的代码:

 

 1public partial class MasterPage : System.Web.UI.MasterPage 
 2
 3
 4
 5protected void Page_Load(object sender, EventArgs e) 
 6
 7
 8
 9Label1.Text = System.DateTime.Now.ToLongTimeString(); 
10
11}
 
12
13}
 
14

 

图 4b: MasterPage.master中的Page_Load()方法

测试:运行解决方案,并转到”Shopping”页。在下拉列表中选择不同的分类选项。正如你所看到的,分类选项每改变一次,页面就完全的重载一次。同样的,"Last page refresh"上则显示了每次刷新的时间。现在,关闭浏览器。

4.1 添加ScriptManager and UpdatePanel

任务: 为了开始使用ASP.NET AJAX,我们需要在每个页面上增加一个ScriptManager 控件。在本文中,由于解决方案的每一个页面都是基于MasterPage,所以我们将在MasterPge中插入ScriptManager控件。

步骤 4.1a: 在Visual Studio中打开MasterPage.master,切换到源代码视图(点击左下角的”源代码”按钮)。然后,从工具栏AJAX Extension项中将ScriptManager拖到页面中,并置于<form>标签后。

保存MasterPage.master并在编辑窗口中打开Shop.aspx文件。

从工具箱中拖出2个UpdatePanel控件(在AJAX Extensions选项中)放到Content1控件中,并将DropDownList1和CategoriesSource放置在UpdatePanel1中,其余的放到UpdatePanel2中。

在UpdatePanel1的属性中,设置UpdateMode=Conditional。

图 4.1a: Shop.aspx页面中Content1控件中的2个UPdatePanel。

为了让用户可以查看购物车里的物品,我们需要使用一个Label控件。

步骤 4.1b: 在UpdatePanel2中增加一个Label控件,并设置下列属性和值。

Nom

(leave blank)

(ID)

lblConfirm

图 4.1b:在 UpdatePanel2中的一个Label控件

按F7转到Shop.aspx源代码视图,在GridView1_SelectedIndexChanged方法中增加下列代码:

lblConfirm.Text = productName + " added to cart.";

每个UpdatePanel都能自动的检查服务器端的数据并执行一个更新(如果一个控件中的事件正好触发)。UpdateMode = Conditional表明这个UpdatePanel只是在自己的上下文中触发一个事件的时候执行更新。

测试: 重新运行解决方案并转到Shoping页面。从dropdown list中选择几个分类项。正如你所看到的,当你改变分类的时候,只有UpdatePanel进行了更新。在购物车中增加几个产品,你会看到Last page refresh没有变化。现在,关闭浏览器。