Databinding to a View Model not working - asp.net

Question

I have an AJAX Accordion Control sitting on my Web Form. I have a Asp.Net Label sitting inside an Accordion Pane. I want to databind the text property of the label to a View Model I have running.
The Label Text Property never seems to databind with the View Model? It will work perfectly if I pull the label outside of the Accordion Pane, but not inside?
This works:
<asp:Label runat="server" Text='<%# Model.Program.NameVisible.ToString() %>' />
This does not:
<asp:AccordionPane ID="AccordionPane2" runat="server">
<Header>
Advanced Search
</Header>
<Content>
<asp:Panel ID="pnlAdvancedSearch" runat="server">
<table cellpadding="2" cellspacing="0" width="100%" runat="server">
<tr>
<td align="right">
<asp:Label runat="server" Text='<%# Model.Program.NameVisible.ToString() %>' />
</td>
</tr>
</table>
</asp:Panel>
</Content>
</asp:AccordionPane>
Any ideas or workarounds?
Thanks.
Update: This apparently does not work when nested inside any AJAX Controls. I have had the same issue with the binding not taking place inside a ModalPopUpExtender as well.

Answer 1

The DataBind of the Accordion control does not invoke DataBind for each of the explicitly defined, custom AccordionPane controls. It instead will build the panes, as per the answer provided by Jupaol, using templates.
In your example, you will need to explicitly call DataBind on the control you want bound, or on a parent which will invoke databinding on all children. So, in your example, calling pnlAdvancedSearch.DataBind() would suffice to bind your label, and any other controls within the search panel.
I feel it worthwhile to add, however, that it also seems like it would be simpler to replace your <asp:Label> control entirely with a simple:
<%: Model.Program.NameVisible.ToString() %>

Answer 2

I just found a way
First of all the Accordion control does support data binding:
The Accordion can also be databound. Simply specify a data source through the DataSource or DataSourceID properties and then set your data items in the HeaderTemplate and ContentTemplate properties.
Source
Example:
Output
ASPX
<ajax:Accordion runat="server" ID="ajax22" RequireOpenedPane="true"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
>
<ContentTemplate>
Even cooler content
<br />
<asp:Label Text='<%# DataBinder.Eval(Container.DataItem, "Something") %>' ID="lbl" runat="server" />
</ContentTemplate>
<HeaderTemplate>
Cool header
<br />
<asp:Label Text='<%# DataBinder.Eval(Container.DataItem, "Something") %>' ID="lbl" runat="server" />
</HeaderTemplate>
</ajax:Accordion>
ASPX code behind
You need to specify the Accordion.DataSource property, this property only supports IEnumerable or IListSource, therefore you would need to bind your accordion as follows:
this.ajax22.DataSource = new[] { this.Model };
this.DataBind();
Model
public class MyModel
{
public MyModel()
{
this.Something = "plop!";
}
public string Something { get; set; }
}
When you bind your Accordion, a number of AccordionPanes are created to represent each bound item.
If you specify additional custom AccordionPanes, when you apply binding as specified above, these AccordionPanes will be ignored and won't be rendered.