Flexible Dialog

Project Overview

The FlexibleDialog control is an ASP.NET control that allows you to create complex dialogs containing multiple forms loaded from a Web service or Web server. The FlexibleDialog makes multi-form dialog development easier by handling the logistics of client-side navigation and data persistence between the multiple forms hosted within a single dialog.

A screen shot for a login dialog that utilizes the Flexible Dialog:



The markup for the above dialog:

<a id="loginLink" dialog-open="{url: 'membership/login.htm'}">Log In</a>

<cc1:FlexibleDialog ID="Dialog1" runat="server"        
  CssClass="dialog"
  BackgroundCssClass="modalBackground"               
  ShowTitlebarCloseButton="true"
  ShowCloseButton="false" 
  ShowOkButton="false" />

Architecture

The FlexibleDialog control extends the SCS.Web.UI.WebControls.DialogControl class (which serves as the base class control for all other dialogs in the AjaxDialogToolkit), and in turn it extends the ScriptControlBase from the AjaxControlToolkit. Internally, the FlexibleDialog client scripts consume the AjaxControlToolkit ModalPopupExtender's client behavior script and utilizes the jQuery core library.

As mentioned above, the FlexibleDialog loads its forms from WebServices and Web Servers. The forms loaded via Web service are handled by the embedded ModalPopupBehavior; whereas, the static content is loaded using the Sys.Net.WebRequest object within SCS.DialogControl base script. A nice technique for sending dynamic HTML to the FlexibleDialog is to use UserControls through the Web service where the requests are forwarded to a class where the control is instantiated, rendered, and streamed back out through the Web service. This class was blogged about by Scott Guthrie and is named HtmlBuilder (for lack of a better name) in the sample project.

When a new form is loaded by the FlexibleDialog, an event handler is assigned to each navigation elements defined within the form. This event handler is used to load subsequent forms. The navigational elements are defined by the "dialog-action" expando attribute, which in addition to indicating it's a navigation element, supplies additional information that tells the FlexibleDialog where to get the content for the next form.

Flexible Dialog Development Guide

Last edited Oct 2, 2011 at 3:06 PM by wdavidsen, version 4

Comments

No comments yet.