在本文中，将探讨一个示例应用程序，该程序通过结合三个不同的Web服务数据，并使用ComponentOneASP.NET控件展示结果。这种类型的应用程序通常被称为"mash-up"，它能够将来自多个源（如RSS源、Web服务或其他公共接口）的内容整合在一起。
ComponentOne Studio Enterprise是一个全面的组件套件，用于开发Windows、Web和移动应用程序。对于ASP.NET开发，Studio Enterprise包括许多控件，如网格、2D和3D图表、报表设计器/查看器、用户界面和输入元素，以及生成流行文件格式（如Adobe PDF、Microsoft Excel和ZIP压缩）的组件。
异步JavaScript和XML（AJAX）是一种开发技术，用于创建丰富、交互式的Web应用程序，这些应用程序的体验更接近桌面应用程序，用户习惯于即时响应。在传统的Web应用程序中，用户输入被发送到服务器，服务器对数据进行处理并响应，通过发送整个更新后的Web页面来响应，这个过程被称为"回发"。在AJAX启用的应用程序中，与服务器交换少量数据，这样只需要刷新页面的受影响部分。对用户来说，页面看起来更快、更响应。
Microsoft ASP.NET AJAX（以前代号为"Atlas"）是ASP.NET 2.0的扩展，提供了一个框架，用于创建高效、高度交互式的Web应用程序，这些应用程序可以在最受欢迎的浏览器上运行。特别是，UpdatePanel服务器控件标识了一个页面区域，使用部分页面呈现进行更新。有关更多信息，包括最新下载，请访问Microsoft ASP.NET AJAX网站。
ComponentOne Studio Enterprise的2006 v2版本引入了对AJAX在传统ASP.NET 2.0（即没有"Atlas"扩展）中的支持。例如，C1WebGrid控件添加了一个CallbackOptions属性，用于指定哪些操作应该使用AJAX机制。有关特定组件中AJAX实现的详细信息，请参见。
2006 v3版本的Studio Enterprise引入了对"Atlas"扩展的兼容性。这意味着任何ComponentOneASP.NET组件都可以安全地位于"Atlas" UpdatePanel内，并参与部分页面渲染，而无需任何特殊编码或属性设置。
此版本还引入了一个新的产品，ComponentOne WebSplitter for ASP.NET，它实现了两个具有可调整大小面板的容器控件，类似于Windows Forms SplitContainer控件：
C1WebSplitter和C1UpdateSplitter在功能上是等效的。唯一的区别是C1UpdateSplitter控件在幕后创建和管理一个"Atlas" UpdatePanel。
要查看mash-up示例的实际运行，请。输入一个邮政编码到文本框中，然后点击带有箭头的绿色圆圈。应该看到以下变化：
现在，尝试与表单进行交互：
mash-up应用程序的主要视觉元素是一个垂直方向的C1UpdateSplitter控件。左侧面板包含一个C1WebTopicBar控件，它提供可折叠的组，作为任意内容的容器。右侧面板包含另一个C1UpdateSplitter控件，这次是水平方向。这个内部分隔器的顶部和底部面板每个都包含一个C1WebGrid控件。这两个网格形成了电影院和电影之间的主-详细信息关系。
表单还包含三个非可视组件：一个设置了PartialRendering属性为True的ScriptManager，一个用于将主网格绑定到电影院列表的ObjectDataSource，以及一个在部分页面呈现期间显示动画反馈的UpdateProgress组件。
在设计时，C1UpdateSplitter允许将任意组件拖放到它的面板上。下图显示了一个默认垂直方向的分隔器，其左侧面板添加了一个C1WebTopicBar组件。
还可以设计表面上嵌套的C1UpdateSplitter控件。在下一个图中，第二个C1UpdateSplitter被添加到第一个分隔器的右侧面板。内部分隔器的方向被更改为水平，并且每个内部面板都添加了一个C1WebGrid组件。
这五个组件构成了mash-up页面的整体结构。对于最外层（垂直）分隔器C1UpdateSplitter1，设置了以下属性：
AutoResize = True
BorderColor = White
Height = 500px
SplitterDistance = 256
Width = 800px
SplitterDistance值表示分隔条的初始位置，以像素为单位。此外，还为C1UpdateSplitter1设置了以下子对象属性：
Bar.CollapsedCssClass = SplitterCollapsedVertical
Bar.CollapseHoverImageUrl = ~/splitter_colhover_vert.gif
Bar.CollapseImageUrl = ~/splitter_col_vert.gif
Bar.CssClass = Splitter
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 = None
请注意，滚动条对于第二个面板是禁用的，因为滚动将由嵌套的水平分隔器处理。CssClass属性引用了Default.aspx中内联样式表中定义的命名样式。这些样式用于控制分隔条的背景颜色和边框。
对于最内层（水平）分隔器C1UpdateSplitter2，设置了以下属性：
AutoResize = True
BorderColor = #7AA0E6
BorderStyle = Solid
BorderWidth = 1px
Height = 100%
Orientation = Horizontal
SplitterDistance = 240
Width = 100%
请注意，尺寸被指定为100%而不是绝对单位。此外，还为C1UpdateSplitter2设置了以下子对象属性：
Bar.CollapsedCssClass = SplitterCollapsedHorizontal
Bar.CollapseHoverImageUrl = ~/splitter_colhover_horz.gif
Bar.CollapseImageUrl = ~/splitter_col_horz.gif
Bar.CssClass = Splitter
Bar.DragCssClass = SplitterDrag
Bar.ExpandHoverImageUrl = ~/splitter_exphover_horz.gif
Bar.ExpandImageUrl = ~/splitter_exp_horz.gif
Bar.HoverCssClass = SplitterHover