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 UpdatePane
l 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
.