Implementing WidgetContainer ASP.NET

Wid get Container dynamically creates a wid get inside its body area.The container consists only of header and body areas.The rest is provided by the actual wid get loaded dynamically inside the container’s body area.The settings area that you see when you click “edit” on the header also comes from the actual wid get. Wid get Container informs the wid get only when to show it. The “Building Widgets”section later in this chapter shows how the widget handles this notification.Wid get Container acts as a bridge between widgets and the core.The core communicates to the widgets via the container, and the widgets use the core’s features via the container.

Wid get Container’s header contains the title text, the expand and collapse button, the
“edit” link, and the close button within an UpdatePanel, as shown in Example

WidgetContainer’s header panel

By doing this,we are preventing the body area from refreshing when something changes in the header.If the body area refreshes, the widget hosted inside it will unnecessarily refresh.To avoid down loading and refreshing a large amount of data in the whole widget,the header and body contain separate UpdatePanel controls.

There is an Up date Progress extender attached to the header Up date Panel, which shows a “Working…” indicator when the header is going through asynchronous post back.This happens when a user clicks on the title to change it or clicks some button on the header area.

After this comes the UpdatePanel body, where the actual widget is loaded.

The widget is not directly added inside the UpdatePanel. Instead it is added inside another regular Panel named WidgetBodyPanel (see Figure).

WidgetContainer layout showing distribution of UpdatePanels

WidgetContainer layout showing distribution of UpdatePanels

When a wid get is collapsed, the body area goes away.This is done by setting Visible=False to the Up date Panel.But that does not hide the DIV, which is generated for the Up date Panel, nor does it clear the content of that DIV. But if you put a Panel inside the Up date Panel and make it invi sible,the Up date Panel will become blank because there’s nothing to show anymore.This is exactly what needs to happen when a widget is collapsed. By using an HTTP tracer tool like Fiddler or Charles, you can observe that the following data is transferred by the asynchronous postback when the widget is collapsed and the Wid get Body Panel is hidden:

The response contains the header Up date Panel’s ID (Wid get Container 89605_Wid get Header Up date Panel)that was up dated,followed by the new HTML snippet that needs to be placed inside the header update panel.The new HTML contains the expand button,and the collapse button is no longer present.Once the HTML is set to the header area,the collapse button disappears and the expand button appears.

After the header’s Up date Panel HTML,the body’s UpdatePanel (Wid get Container 89605_Wid get Body Up date Panel)HTML is sent. Because there’s no visible control inside the body’s UpdatePanel, there’s no HTML sent to the UpdatePanel.As a result,the representative DIV’s innerHTML is set to blank.This clears the WidgetContainer’s body area and the real widget disappears.

After the body area’s Up date Panel, there’s only one Up date Progress extender attached, which shows a “ Working… ” message when the body area is going through any asynchronous pos tback due to some activity on the wid get itself.

That’s all inside the WidgetContainer.ascx.The code behind the file is,however,quite challenging.


The Wid get Container class implements the IWid get Host interface because containers host wid gets.

public partial class Wid get Container:System .Web.UI.UserControl, IWidget Host.The container maintains a reference to the hosted wid get via the IWidget interface.It also stores a reference to the Wid get Instance object, which represents the instance of the wid get it contains.

private IWidget _WidgetRef;

The Default.aspx notifies WidgetContainer about a first- or second-time load via a public property called IsFirstLoad.

Wid get Container then passes this property’s value to the widget via the IWidge tHost. Is First Load property.

During the OnInit event of Wid get Container,it loads the widget using LoadControl and hosts it inside its body area:

If you do not set the wid get.ID to a specific ID that is always the same for the same widget instance, asynchronous post backs will fail. You will get a message box saying an invalid asynchronous postback has been performed.When the asynchronous post back happens, ASP.NET needs to know which control has produced the post back. To do this, it needs to load the page with all the controls exactly in the same state as before the post back occurred.Otherwise, it won’t be able to find the control that produced the post back by the ID it received from the Ajax frame work.

Also,if the WidgetContainer’s ID isn’t set to a specific value, ASP.NET will assign ctrl0 or ctrl1, whatever it finds free. This will vary the ID, and post backs will map to nonexistent controls and fail.Setting Wid get Container’s ID to the widget instance ID ensures the container will always have the same ID for a particular widget instance.

When the WidgetContainer is expanded or collapsed, the following events get fired:

Here you call the interface implementations where the actual work is done:


We now need to update the Expanded property of the Wid get Instance object, as well as the data base row to persist the widget’s visibility.The details of how the Data base Helper works are discussed in Chapter 4.For the time being,let’s assume the following code up dates one row of Wid get Instance:

After up dating the database row, update the header area by switching between the expand and collapse buttons,inform the widget about the Minimize or Maximize events, and up date both the header and body Up date Panel.The header up date panel is updated to reflect the change in the expand/collapse button.The body up date panel is updated to toggle the widget’s visibility inside the body area.

Saving and editing

When a user clicks on the title of the Wid get Container header, it switches to a text box and a save button.Users can enter a new title and save to set the new title for the widget instance.This is done by switching between Link Button,Text Box,and Button.When the title Link Button is clicked, the following event is fired:

When the user clicks save, it switches back to the LinkButton showing the new title and hides the text box and save button. After the UI changes,the WidgetInstance object is updated in database with the new title.

When a user clicks the edit button, Wid get Container informs the widget to show its settings area. The edit button then switches itself with “ cancel edit” button. Both the edit and cancel edit buttons,when clicked,fire the same event:

The SettingsOpen property is stored in ViewState to remember whether the settings area is already open or not.

The SettingsOpen property is stored in ViewState to remember whether the settings area is already open or not.

Remember,View State will always return null until the user clicks the edit button and a true value is set to it.You should always check View State entries for null before casting them to a data type.Check whether it’s null, and if so, then the default value is false.

Adding InstanceID

During the rendering of Wid get Container, one more attribute is added to the DIV:InstanceID.The onDrop event on the client side needs to know the Wid get Instance ID of the widget that is moved so it can call the web service and notify the server about which Wid get Instance was moved.The additional attribute is rendered by overriding the RenderControl function:

This results in the following HTML on the client:

<div InstanceId="151" id="WidgetContainer151_Widget" class="widget">

The onDrop function on the client side reads this InstanceID and calls the web service:

Closing the widget

Closing is more complicated than other behavior because Wid get Container cannot close itself—it needs to be closed from outside and removed from the page’s controls collection.The container just raises the Deleted event when it is closed,and the Default.aspx handles the UI up date and data base changes.The following is the code when the close button is clicked:

First,the contained widget gets notification and it can then perform cleanup operations, like removing widget-specific information from the database.Then the Deleted event is raised:

The Default.aspx removes the widget from the database and refreshes the column:

Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

ASP.NET Topics