Console FAQ

How can I do dynamic updates in an ASP.NET based Widget for the C1 Console?

I’m developing a new ASP.NET control to be used in the C1 Form UI system – a new widget that can mix into the existing UI elements like textboxes etc. I want to do dynamic updates to the UI when the user clicks a button or makes a selection change – how do I do this in C1?

Answer:

You can either write JavaScript logic that calls a service on the server to fetch required data and make the UI changes you desire, or you can use our adapted version of the ASP.NET UpdatePanel to do so, like this:

<aspui:BindingUpdatePanel ID="myUpdatePanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true" xmlns:aspui="#c1">
  <ContentTemplate>
    <aspui:Selector runat="server" ID="mySelector" AutoPostBack="true">
      <!-- // options… -->
    </aspui:Selector>
    <!-- // dynamic content… -->
  </ContentTemplate>
</aspui:BindingUpdatePanel>

In this sample the aspui tag prefix refers to the namespace Composite.WebClient.UiControlLib in the assembly Composite.

This code will create an (invisible) update panel and a drop down list. When the list selection is changed, an ASP.NET post back is executed, and any UI changes made within the <ContentTemplate /> tag during the post back rendering will be sent back to the client, and changed on the client. The users feeling will be that the UI is changing ‘locally’ in response to his or her actions.

You can also modify the UpdateMode any ChildrenAsTriggers properties of the aspui:BindingUpdatePanel to change the way your update panel(s) are updated.

Except from having a custom tag, this control behaves very similar to the std. ASP.NET UpdatePanel control (if fact the BindingUpdatePanel inherits from the UpdatePanel class) and you can use the available documentation on update panels for more information. Good sources are http://www.asp.net/Ajax/Documentation/Live/overview/UpdatePanelOverview.aspx and http://msdn.microsoft.com/en-us/magazine/cc163413.aspx .

It can make sense to have items that do not change placed outside the update panels you update, in order to minimize the UI elements to repaint on each post back. You can do so by nesting your update panels, and making your outer most update panel not update, like this:

<aspui:BindingUpdatePanel ID="myUpdatePanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" xmlns:aspui="#c1">
  <ContentTemplate>
    <aspui:Selector runat="server" ID="mySelector" AutoPostBack="true">
      <!-- // options… -->
    </aspui:Selector>
    <aspui:BindingUpdatePanel ID="dynamicUpdatePanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
      <ContentTemplate>
        <!-- // dynamic content… -->
      </ContentTemplate>
    </aspui:BindingUpdatePanel>
  </ContentTemplate>
</aspui:BindingUpdatePanel>

And then add a “on change” handler for the mySelector object which calls the Update() method on dynamicUpdatePanel.