65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 C1UpdateSplitter 创建支持 AJAX 的 Mash-up

John C. Juback
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2006年12月14日

6分钟阅读

viewsIcon

33310

downloadIcon

1

本文介绍了一个示例“mash-up”应用程序，该应用程序结合了三个不同 Web 服务的数据，并使用各种 ComponentOne ASP.NET 控件显示结果，包括 C1UpdateSplitter，它扩展了“Atlas” UpdatePanel 的功能。

这是为我们的 CodeProject 赞助商提供的产品展示评论。这些评论旨在为您提供我们认为对开发人员有用且有价值的产品和服务信息。

引言

本文介绍了一个示例“mash-up”应用程序，该应用程序结合了三个不同 Web 服务的数据，并使用各种 ComponentOne ASP.NET 控件显示结果，其中包括 C1UpdateSplitter，它通过添加由可调整大小的分隔条分隔的两个内容面板来扩展“Atlas” UpdatePanel 的功能。

术语

异步 JavaScript 和 XML (AJAX) 是一种开发技术，用于创建丰富的、交互式的 Web 应用程序，使其感觉更像桌面应用程序，用户习惯了即时响应。在传统的 Web 应用程序中，用户输入被发送到服务器，服务器然后根据数据执行操作，并通过发送整个更新的 Web 页面来响应，这个过程称为 **postback**。在支持 AJAX 的应用程序中，少量数据会在后台与服务器交换，因此只需要刷新页面的受影响部分。对用户来说，页面似乎更快、响应更灵敏。

Microsoft ASP.NET AJAX（以前代号为“Atlas”）是 ASP.NET 2.0 的扩展，它提供了一个框架，用于创建高效、高度交互的 Web 应用程序，这些应用程序适用于最流行的浏览器。特别是 UpdatePanel 服务器控件通过部分页面呈现来标识可更新的页面区域。有关更多信息，包括最新的下载，请访问 Microsoft ASP.NET AJAX 网站。

“Mash-up”一词用于描述结合了来自多个来源（如 RSS feed、Web 服务或其他公共接口）的内容的 Web 应用程序。下图所示的示例应用程序使用三个独立的 Web 服务，每个服务根据邮政编码返回不同的信息

  • 城市和州
  • 天气预报
  • 电影院和放映时间

对最终用户而言，所有数据似乎都来自单一来源，尽管有一个单一应用程序“mash-up”了三个独立的数据源。

关于 ComponentOne Studio Enterprise

ComponentOne Studio Enterprise 是一个用于开发 Windows、Web 和移动应用程序的综合性组件套件。对于 ASP.NET 开发，Studio Enterprise 包含数十种控件，包括网格、2D 和 3D 图表、报表设计器/查看器、用户界面和输入元素，以及用于生成 Adobe PDF、Microsoft Excel 和 ZIP 压缩等流行文件格式的组件。

Studio Enterprise 的 2006 v2 版本引入了对传统 ASP.NET 2.0（即，没有“Atlas”扩展）的支持，以支持 AJAX。例如，C1WebGrid 控件添加了 CallbackOptions 属性，用于指定哪些操作应使用 AJAX 机制。有关特定组件中 AJAX 实现的详细信息，请参阅 本文。

Studio Enterprise 的 2006 v3 版本引入了与“Atlas”扩展的兼容性。这意味着任何 ComponentOne ASP.NET 组件都可以安全地放置在“Atlas” UpdatePanel 中，并参与部分页面呈现，而无需任何特殊的编码或属性设置。

此版本还引入了一个新产品 ComponentOne WebSplitter for ASP.NET，它实现了两个具有可调整大小面板的容器控件，类似于 Windows Forms SplitContainer 控件

  • C1WebSplitter，适用于传统 ASP.NET 2.0
  • C1UpdateSplitter，适用于 ASP.NET AJAX（“Atlas”）

C1WebSplitter 和 C1UpdateSplitter 在功能上是等效的。唯一的区别是 C1UpdateSplitter 控件在后台创建和管理一个“Atlas” UpdatePanel。

运行示例应用程序

要查看 mash-up 示例的实际运行效果，请点击 此处。

在文本框中输入邮政编码，然后单击带有箭头的绿色圆圈。您应该会看到以下更改

  • 文本框下方的标签现在显示相应的城市和州。
  • 天气框显示今天的预报。
  • 最上面的网格显示附近的电影院列表。

现在，尝试按以下方式与表单进行交互

  • 选择“周报”单选按钮。请注意，出现了额外的天气数据和垂直滚动条，但网格没有闪烁。
  • 在电影院网格中选择一行。请注意，其他行不会重绘。Movie 网格根据所选行进行更新。
  • 单击垂直分隔条中的虚线图像可折叠左侧面板。再次单击可恢复左侧面板。
  • 单击水平分隔条中的虚线图像可折叠顶部面板。再次单击可恢复顶部面板。
  • 将鼠标放在分隔条的虚线图像之外（您应该看到双箭头光标而不是手指），然后将其拖动到其他位置。面板会相应调整大小，并显示或移除其滚动条以适应内部内容。

设计表单

Mash-up 应用程序的主要视觉元素是具有垂直方向的 C1UpdateSplitter 控件。左侧面板包含一个 C1WebTopicBar 控件，该控件提供可折叠的组，作为任意内容的容器。右侧面板包含另一个 C1UpdateSplitter 控件，这次是水平方向的。此内部分隔器的顶部和底部面板各包含一个 C1WebGrid 控件。这两个网格在电影院和电影之间形成了一个主从关系。下图描绘了表单上控件的层次结构

表单还包含三个非可视化组件：一个 ScriptManager，其 PartialRendering 属性设置为 True；一个用于将主网格绑定到电影院列表的 ObjectDataSource；以及一个 UpdateProgress 组件，用于在部分页面呈现期间显示动画反馈，如下所示。

在设计时，C1UpdateSplitter 允许您将任意组件拖到其任何一个面板上。下图显示了一个默认垂直方向的分隔器，其左侧面板已添加了 C1WebTopicBar 组件。

您还可以将 C1UpdateSplitter 控件嵌套在设计图面上。在下图所示的示例中，第一个分隔器的右侧面板添加了第二个 C1UpdateSplitter。内部分隔器的方向已更改为水平，并且每个内部面板都添加了一个 C1WebGrid 组件。

这五个组件构成了 mash-up 页面的整体结构。对于最外层（垂直）分隔器 C1UpdateSplitter1，设置了以下属性

自动调整大小 True
BorderColor 白色
高度 500px
分隔条距离 256
宽度 800px

SplitterDistance 值表示分隔条的初始位置（以像素为单位）。此外，为 C1UpdateSplitter1 设置了以下子对象属性

Bar.CollapsedCssClass SplitterCollapsedVertical
Bar.CollapseHoverImageUrl ~/splitter_colhover_vert.gif
Bar.CollapseImageUrl ~/splitter_col_vert.gif
Bar.CssClass 分割器
Bar.DragCssClass SplitterDrag
Bar.ExpandHoverImageUrl ~/splitter_exphover_vert.gif
Bar.ExpandImageUrl ~/splitter_exp_vert.gif
Bar.HoverCssClass SplitterHover
Panel1.BackColor 122, 160, 230
Panel2.ScrollBars 无

请注意，第二个面板的滚动条已禁用，因为滚动将由嵌套的水平分隔器处理。CssClass 属性引用了 Default.aspx 中内联样式表中定义的命名样式。这些样式用于控制分隔条的背景颜色和边框。

对于最内层（水平）分隔器 C1UpdateSplitter2，设置了以下属性

自动调整大小 True
BorderColor #7AA0E6
BorderStyle 实线
边框宽度 1px
高度 100%
Orientation Horizontal
分隔条距离 240
宽度 100%

请注意，尺寸指定为 100%，而不是绝对单位。此外，为 C1UpdateSplitter2 设置了以下子对象属性

Bar.CollapsedCssClass SplitterCollapsedHorizontal
Bar.CollapseHoverImageUrl ~/splitter_colhover_horz.gif
Bar.CollapseImageUrl ~/splitter_col_horz.gif
Bar.CssClass 分割器
Bar.DragCssClass SplitterDrag
Bar.ExpandHoverImageUrl ~/splitter_exphover_horz.gif
Bar.ExpandImageUrl ~/splitter_exp_horz.gif
Bar.HoverCssClass SplitterHover

结论

使用 C1UpdateSplitter 时，您无需编写额外的代码来更新分隔器面板内的组成控件。Mash-up 示例像没有 AJAX 扩展的传统 ASP.NET 应用程序一样处理按钮单击和网格行选择的服务器端事件。但是，有了 AJAX，应用程序的响应速度会更快、更流畅，尤其是 C1UpdateSplitter 控件的附加价值。

如果您想了解更多关于 mash-up 示例如何消耗 Web 服务的信息，请参阅 本文，其中还包含下载源代码的链接。

© . All rights reserved.