4.5 拖拽功能

 

导论和目标

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 控件扩展 

---

 

介绍:在本练习中，我们将在CheckOut.aspx页面上的Panel1控件中提供拖拽功能。在开始之前，我们需要一个DragOverlayExtender控件。

步骤4.5a: 在Visual Studio中拖出一个DragOverlayExtender控件放到页面上的UpdatePanel1中。设置下列属性值：

TargetControlID

Panel1

图4.4e: DragOverlayExtender1 控件的属性。

测试: 运行解决方案并转到CheckOut页面(登录后在购物车里添加若干项产品)。你可以用鼠标移动Panel1(浅黄色背景区域)。然而，我们现在会看到有2个问题：原地留下的阴影和Place order被控件挡住。现在，关闭浏览器

为了解决这些问题，我们首先要让DropShadowExtender1知道它必须自己维护Panel1的阴影位置。

步骤4.5b: 在Visual Studio，选则Panel1并且展开Extenders-> DropShadowExtender1。设置下列属性值：

TrackPosition

True

为了使Place Order按钮能重现，在Panel1和PlaceOrder按钮之间先插入11行空行(HTML标记<br/>)，或者把按钮放在UpdatePanel1控件的下面。

测试:浏览CheckOut.aspx，你会看到阴影会随着Panel1(浅黄色背景区域)移动，同样的，Place Order也不再被遮挡。

然而，如果你刷新了页面(按F5)，你会注意到Panel又回到原来的位置上了。应用程序并没有记录用户移动后的位置。我们将在下面的例子中解决这个问题。

关闭浏览器。