У меня нет очков, чтобы комментировать и задавать вам вопросы. Сожалею. (
Мои вопросы касаются того, как вы планируете создать и наполнить Аккордеон.
Будете ли вы создавать панели вручную, используя разметку в IDE, или вы привязываете Accordion к источнику данных, который будет динамически создавать нужные панели?
Будет ли у вас 3 отдельных источника данных или другая комбинация из следующих:
1.) DataSource для инициализации количества панелей и заполнения только информации заголовка панели.
2.) Источник данных для заполнения статического содержимого всех панелей при первой загрузке.
3.) DataSource для заполнения Lazy-Loaded Content одной панели, которую пользователь щелкает, чтобы развернуть.
С вашими ответами я надеюсь обновить этот ответ реальным. Спасибо.
Обновление: это достижимо с помощью Accordion Ajax Control Toolkit.
У меня есть очень базовый код ниже в качестве доказательства концепции. Это может быть более плавным, но я оставляю за вами право добавить изображение «Загрузка» с помощью элемента управления UpdatingProgress, если вы сочтете это необходимым.
Аккордеон в разметке Aspx:
(Обратите внимание на UpdatePanels - вы можете заменить их обратными вызовами, если хотите, я просто хотел, чтобы ответ был простым)
<asp:Accordion ID="acc_Accordion" runat="server" RequireOpenedPane="false"
SelectedIndex="-1" onitemcommand="acc_Accordion_ItemCommand" >
<HeaderTemplate>
<asp:UpdatePanel ID="up_UpdateHeader" runat="server">
<ContentTemplate>
<%--When using "Eval" inside strings for Asp.net controls,
you MUST wrap them in apostrophes ('),
otherwise with (") you will get parser errors!--%>
<asp:LinkButton ID="btn_Header" runat="server"
Text='<%# Eval("HeaderText") %>'
CommandName="UpdatePane" CommandArgument='<%# Eval("ItemID") %>'
Font-Underline="false" ForeColor="Black"
style="width:100%; height:100%; cursor:pointer;"/>
<%--Use Cursor:Pointer to keep a consistent
interface after disabling the button.--%>
</ContentTemplate>
</asp:UpdatePanel>
</HeaderTemplate>
<ContentTemplate>
<asp:UpdatePanel ID="up_UpdateContent" runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<%# Eval("ContentText")%>
<asp:Label ID="lbl_Content" runat="server"
Text="<%# DateTime.Now.ToLongTimeString() %>"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:Accordion>
Page_Load () - Подготовьте наши «фиктивные» данные:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack == false)
{
DataTable dt = new DataTable();
dt.Columns.Add("ItemID");
dt.Columns.Add("HeaderText");
dt.Columns.Add("ContentText");
dt.Rows.Add(new object[] { 123456, "Header 1", "Content A." });
dt.Rows.Add(new object[] { 654321, "Header 2", "Content B." });
acc_Accordion.DataSource = new System.Data.DataTableReader(dt);
acc_Accordion.DataBind();
}
}
ItemCommand () - захватывает нажатия кнопок внутри Аккордеона:
protected void acc_Accordion_ItemCommand(object sender, CommandEventArgs e)
{
if (e.CommandName == "UpdatePane")
{
AjaxControlToolkit.AccordionContentPanel acp
= (e as AjaxControlToolkit.AccordionCommandEventArgs).Container;
UpdatePanel upHeader
= acc_Accordion.Panes[acp.DisplayIndex].HeaderContainer
.Controls.OfType<Control>()
.Single(c => c is UpdatePanel) as UpdatePanel;
LinkButton btn
= upHeader.ContentTemplateContainer
.Controls.OfType<Control>()
.Single(b => b is LinkButton) as LinkButton;
UpdatePanel upContent
= acc_Accordion.Panes[acp.DisplayIndex].ContentContainer
.Controls.OfType<Control>()
.Single(c => c is UpdatePanel) as UpdatePanel;
Label lbl
= upContent.ContentTemplateContainer
.Controls.OfType<Control>()
.Single(c => c is Label) as Label;
lbl.Text = " ID: " + e.CommandArgument
+ " and Time: " + DateTime.Now.ToLongTimeString();
//You can use the ID from e.CommandArgument to query the database
// for data to update your Repeaters with.
btn.Enabled = false;//Disabling the button for our Header
// will prevent Asyncronous Postbacks to update the content again.
//Only disable this if you don't need to update the content
// when the user clicks to view the pane again.
upContent.Update();//Set UpdateMode="Conditional".
}
}
Я знаю, что это выглядит много, но это всего лишь несколько строк кода (перед упаковкой и комментированием).