asp.net ajax 实例存（档风琴页效果）-优快云博客

本文介绍了一个使用ASP.NET实现的风琴效果页面，包含三个可折叠面板，每个面板都具有独特的标题和内容。其中一个面板还包含了TextBox和Button等交互元素。页面通过AjaxControlToolkit实现了平滑过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>我的测试页面</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .accordionHeader { color: #FFFF00; background-color: #3399FF; border: 1px solid #FF6600; padding: 1px; margin: 1px; cursor: pointer; } .accordionContent { background-color: #FF9933; border:#ff0000 1px solid; width:100%; height:200px; padding: 1px; margin: 10px; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="1" FadeTransitions="true" ContentCssClass="accordionContent" HeaderCssClass="accordionHeader"> <Panes> <cc1:AccordionPane ID="AccordionPane1" runat="server"> <Header>这里是标题1</Header> <Content>这里是标题1 的内容</Content> </cc1:AccordionPane> <cc1:AccordionPane ID="AccordionPane2" runat="server"> <Header>这里是标题2</Header> <Content> 这里是标题2 的内容 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /> </Content> </cc1:AccordionPane> <cc1:AccordionPane ID="AccordionPane3" runat="server"> <Header>这里是标题3 </Header> <Content>这里是标题3 的内容</Content> </cc1:AccordionPane> </Panes> 　</cc1:Accordion> </div> </form> </body> </html>