使用 Ajax 控制模拟 IFrame 的 ASP.NET 控件

• 下载源代码和演示应用程序 - 3.14 MB

引言

有时我们使用 <IFrame> 标签来设计框架页面。但是，页面之间的数据交换将变得非常难以处理。或者，一旦框架结构更改为普通页面，就需要进行大量的工作。

因此，我开发了一个用于模拟 <IFrame> 的 Ajax 控制。它的工作方式类似于 Microsoft MSDN Library 网站。

介绍 PartialHyperLink 控制

APXExt 库包含两个 Ajax 控制

• ResizableArea - 模拟 IFrame
• Accordion - 允许您提供多个窗格并一次显示一个

APXExt 依赖于 Microsoft System.Web.Externsions.dll 和 APEnnead.net 免费版本 Symber.Web.dll。

如果需要，您可以免费下载

• ASPAJAXExtSetup.msi 1.0.61025.0 来自 Microsoft 网站，以及
• APEnneadSetup.msi 2.0 免费版本 来自 www.apennead.net 网站

Using the Code

要使用该控件，只需将 "Symber.Web.APX.dll" 文件引用到您的 Web 项目中即可。

接下来，在您想要使用它的每个 .ASPX 页面顶部注册该控件，通过编写以下行

<%@ Register TagPrefix="apX" Namespace="Symber.Web.APX" Assembly="Symber.Web.APX" %>

使用 APXResizableAreaBehavior，您可以创建以下代码

<asp:Panel ID="ra" runat="server" CssClass="resizableArea">
  <asp:Panel ID="raLeft" runat="server" CssClass="leftSection">
  </asp:Panel>
  <asp:Panel ID="raSplitter" runat="server" CssClass="splitter">
	<div class="grippy"></div></asp:Panel>
  <asp:Panel ID="raRight" runat="server" CssClass="rightSection">
  </asp:Panel>
  <apx:APXResizableAreaBehavior id="raBehavior" runat="server"
    TargetControlID="ra"
    LeftID="raLeft"
    RightID="raRight"
    SplitterID="raSplitter"
    CookiePath="/" />
</asp:Panel>

使用 APXAccordionBehavior，您可以创建以下代码

<apX:APXAccordion ID="accordion" runat="server"
     SelectedIndex="1"
     CookieEnabled="true"
     HeaderCssClass="accordionHeader"
     HeaderSelectedCssClass="accordionHeaderSelected"
     ContentCssClass="accordionContent"
     FadeTransitions="false"
     FramesPerSecond="40" 
     TransitionDuration="250"
     AutoSize="None"
     RequireOpenedPane="false"
     SuppressHeaderPostbacks="true"
     CookiePath="/"
     CookieEnabed="true">
  <Panes>
    <apX:APXAccordionPane ID="accordionPane1" runat="server">
      <Header><div class="inner">
	<a href="" class="accordionLink">Title1</a></div></Header>
      <Content>Content1</Content>
    </apX:APXAccordionPane>
    <apX:APXAccordionPane ID="accordionPane2" runat="server">
      <Header><div class="inner">
	<a href="" class="accordionLink">Title2</a></div></Header>
      <Content>Content2</Content>
    </apX:APXAccordionPane>
  </Panes>
</apX:APXAccordion>

就是这样！

我包含了一个小的示例项目来演示如何使用该控件。

更多

接下来，我们可以使用 APEnnead.net virtual_page 和 page_layout 技术来实现每个页面。以下内容均基于 APEnnead.net 免费版本。关于 如何创建 APEnnead.net 项目，您可以阅读示例代码中的 "/Toturials/Create apennead application.htm"。

步骤 1 - 创建四个 .ascx 控制

Modules/Feature.ascx
Modules/Msdn.ascx
Modules/Email/Fly.ascx
Modules/Email/Overview.ascx

步骤 2 - 将模块信息添加到 web.config

<APSchema>
  <Modules>
    <add uri="url:~/Modules/Msdn.ascx" name="Msdn Library"/>
    <add uri="url:~/Modules/Feature.ascx" name="Feature Spotlight"/>
    <Page name="email*">
      <add uri="url:~/Modules/Email/Fly.ascx" name="System Requirements"/>
      <add uri="url:~/Modules/Email/Overview.ascx" name="Overview"/>
    </Page>
  </Modules>
</APSchema>

步骤 3 - 在 web.config 中设置 UrlRemapping

<APSchema>
  <add url="^~/(\w+)/(\w+)/(\w+).aspx?$" 
	mappedUrl="~/Default.aspx?c=$1&f=$2&a=$3" isRegularExpress="true"/>
</APSchema>

步骤 4 - 布局每个页面

运行应用程序。单击“登录” LinkButton 使用“designer”用户登录应用程序。

然后 右键单击 浏览器页面，显示上下文菜单以布局页面。

我们向您展示 “主页” 的布局如下

并向您展示 “~/Email/Inbox/Default.aspx” 的布局如下

注释

我已将此演示的 SqlServer .mdf 文件包含在源代码中。您可以使用额外的数据库。

或者您阅读 "/Totutials/Create apennead.net application.htm" 了解 如何创建和部署 APEnnead.net 项目。

历史

• 2009 年 11 月 8 日：初始发布