Привязка словаря к панелям Аккордеона - PullRequest
Новая
       6

Привязка словаря к панелям Аккордеона

1 голос
/ 18 февраля 2011

У меня есть элемент управления Accordion с несколькими панелями.

При загрузке страницы я хочу установить элементы управления внутри панелей с данными из словаря (каждая панель имеет от 1 до 10 элементов управления).

ASPX 

<cc1:Accordion ID="Accordion1" runat="server"
               FadeTransitions="True"
               SelectedIndex="0"
               HeaderCssClass="accordionHeader"
               ContentCssClass="accordionContent"
               Width="370px">
    <Panes>
        <cc1:AccordionPane ID="AccordionPane1" runat="server">
            <Header>
                some text
            </Header>
            <Content>              
                <asp:Label ID="lblTitle" runat="server"
                           Text='<%# Eval("key1")%>'></asp:Label></li>             
            </Content>
        </cc1:AccordionPane>     
        <cc1:AccordionPane ID="AccordionPane2" runat="server">
            <Header>
                some text
            </Header>
            <Content>              
                <asp:Label ID="lblTitle" runat="server"
                           Text='<%# Eval("key2")%>'></asp:Label></li>             
            </Content>
        </cc2:AccordionPane>      
    </Panes>            
</cc1:Accordion>

C # 

protected void Page_Load(object sender, EventArgs e)
{
    Dictionary<string, string> dic = new Dictionary<string, string>();
    dic.Add("key1", "XXXXXXXXXX");
    dic.Add("key2", "YYYYYYYYYY");

    Accordion1.DataSource = dic;
    Accordion1.DataBind();
}

Обновление:

Это пример диктовки, которую я хочудля привязки к аккордеону: 

 var dic = new Dictionary<string, IEnumerable<object>>();
        dic.Add("Item1", new List<object>() //This to Pane 1
                { 
                    new { SNumber = 12345 },
                    new { Color = "Blue" },
                    new { Size = "Large" },
                });
        dic.Add("Item2", new List<object>() //This to Pane 2
                { 
                    new { SNumber = 1235678 },
                    new { type = "OM" }
                });
        Accordion1.DataSource = dic;
        Accordion1.DataBind();
    }

В aspx я хочу создать панель для каждого раздела (в данном случае 2 панели), и на каждой панели определить Eval для необходимого значения.

ps
Я не думаю, что это соответствует, но если проблема с привязкой к словарю, я могу связать что-то еще, например, xmldocument или около того ...

Ответы [ 2 ]

0 голосов
/ 27 февраля 2011

Вам необходимо вложить элементы управления с привязкой к данным.

Верхний уровень - ваш аккордеон, привязанный к словарю.

Контент для аккордеонных панелей - это еще один связанный с данными элемент управления - не совсем уверенный, что уместно в этом случае - который вы хотите привязать к списку, который является значением словаря.

Вероятно, это проще всего сделать с помощью события OnDataBound (при условии, что оно есть) для панели аккордеона.

На данный момент я не могу привести сработанный пример.

0 голосов
/ 26 февраля 2011

Казалось бы, вы заинтересованы в привязке значений словаря к аккордеону. Чтобы воспользоваться преимуществами привязки данных, вы должны использовать шаблоны элемента управления вместо явного определения областей аккордеона. Например: 

<cc1:Accordion ID="Accordion1" runat="server"
               FadeTransitions="True"
               SelectedIndex="0"
               HeaderCssClass="accordionHeader"
               ContentCssClass="accordionContent"
               Width="370px">
    <HeaderTemplate>
        <h2><asp:Label runat="server" Text='<%# Eval("Key") %>' /></h2>
    </HeaderTemplate>
    <ContentTemplate>
        <div><asp:Label runat="server" Text='<%# Eval("Value") %>' /></div>
    </ContentTemplate>
</cc1:Accordion>

Теперь, если значения вашего словаря являются сложными объектами, что может быть правдой, так как вы описываете наличие нескольких элементов управления в вашем контенте, вы все равно можете связываться со словарем. Рассмотрим чуть более сложный словарь ниже. Для простоты демонстрации значения словаря представляют собой простые совпадающие анонимные типы: 

protected void Page_Load(object sender, EventArgs e)
{
    Dictionary<string, object> dic = new Dictionary<string, object>();
    dic.Add("key1", new { Color = "Red", Age = 15 });
    dic.Add("key2", new { Color = "Green", Age = 25 });

    Accordion1.DataSource = dic;
    Accordion1.DataBind(); 
}

Вы можете "преследовать" свойства в выражениях привязки данных с помощью аккордеона, настроенного так: 

<cc1:Accordion ID="Accordion1" runat="server"
               FadeTransitions="True"
               SelectedIndex="0"
               HeaderCssClass="accordionHeader"
               ContentCssClass="accordionContent"
               Width="370px">
    <HeaderTemplate>
        <h2><asp:Label runat="server" Text='<%# Eval("Key") %>' /></h2>
    </HeaderTemplate>
    <ContentTemplate>
        <div><asp:Label runat="server" Text='<%# Eval("Value.Color") %>' /></div>
        <div><asp:Label runat="server" Text='<%# Eval("Value.Age") %>' /></div>
    </ContentTemplate>
</cc1:Accordion>

Обратите внимание, что единственным важным отличием является точечная нотация в операторах Eval.

Если, с другой стороны, значение словаря представляет собой (или содержит) коллекцию объектов, не так уж и просто встроить более сложные элементы управления ASP.NET в шаблон содержимого. Рассмотрим следующий словарь: 

var dic = new Dictionary<string, IEnumerable<object>>();
dic.Add("key1", new List<object>()
                { 
                    new { Color = "Red" },
                    new { Color = "Blue" }
                });
dic.Add("key2", new List<object>()
                { 
                    new { Color = "Yellow" },
                    new { Color = "Orange" }
                });

Предположим, цель состоит в том, чтобы представить каждый из цветов в одной и той же области содержимого. Это может быть достигнуто путем привязки значения словаря к повторителю, например так: 

<cc1:Accordion ID="Accordion1" runat="server"
               FadeTransitions="True"
               SelectedIndex="0"
               HeaderCssClass="accordionHeader"
               ContentCssClass="accordionContent"
               Width="370px">
    <HeaderTemplate>
        <h2><asp:Label ID="Label1" runat="server" Text='<%# Eval("Key") %>' /></h2>
    </HeaderTemplate>
    <ContentTemplate>
        <asp:Repeater ID="repeater" runat="server" DataSource='<%# Eval("Value") %>'>
            <ItemTemplate>
                <div><asp:Label runat="server" Text='<%# Eval("Color") %>' /></div>
            </ItemTemplate>
        </asp:Repeater>
    </ContentTemplate>
</cc1:Accordion>

Удачного кодирования!

...