Introducing ComponentOne WebDialog for ASP.NET

Applies To:

WebDialog for ASP.NET

Author:

John Juback

Published On:

7/28/2007

The 2007 v2 release of ComponentOne Studio Enterprise introduced a new product, WebDialog for ASP.NET, that lets you add modal or modeless dialog windows to ASP.NET AJAX-enabled Web pages. It provides a single server-side component, C1WebDialog, that you can use to display popup content in "windows" that look and act like standard dialog boxes in a desktop application. This article outlines the major features of this new component and demonstrates how to manipulate it using client-side Javascript.

To see C1WebDialog in action, visit the following link:

[ComponentOne Studio Live WebExamples](http://helpcentral.componentone.com/c1webexamples/?product=webdialog)

Almost all of the Studio Enterprise ASP.NET components are designed to work with or without the Microsoft ASP.NET AJAX extensions. However, C1WebDialog is specifically built on top of the AJAX framework and cannot be used in a conventional ASP.NET 2.0 application. To learn more about the free AJAX framework and to download the latest version, visit the following site:

[AJAX : The Official Microsoft ASP.NET 2.0 Site](http://www.asp.net/ajax/)

If you use C1WebDialog in an .aspx page, it must be preceded by a ScriptManager control. When you instantiate the ASP.NET AJAX-Enabled Web Site template, the default .aspx page already contains a ScriptManager control. You can add this control to an existing page using the following tag:


Specifying Content  
C1WebDialog supports a variety of content sources, including HTML tags, server-side controls, and external URLs. At design time, you can type directly onto the surface of the control or drag any intrinsic or third-party component from the toolbox. The following figure shows a C1WebDialog control containing a text string, a TextBox control, and a Button control.



Within the markup for the .aspx page, the  tag defines the client area of the dialog window, as the following excerpt shows (style tags have been omitted for clarity): 





        Enter your email address:  





Note the use of the ShowOnLoad property to cause the dialog window to be displayed when the form is loaded.

Alternatively, you can use the ContentUrl property to specify the address of a page to be displayed within the C1WebDialog control, similar to the  tag in HTML. The URL can refer to another page within the same project or an external page on some other site.

### End User Interaction

Unlike an IFRAME, which has a fixed size and position, the C1WebDialog control can be moved, resized, minimized, maximized, restored, and closed. Use the AllowMove and AllowResize properties to control movement and resizing. At design time, expand the CaptionButtons node in the Properties window to access properties for individual buttons. From there, you can specify tooltips, visibility, vertical alignment, and alternate image URLs.

You can also use the MinimizeZoneElementId property to specify a server control (typcially a Panel) to hold minimized instances of C1WebDialog, similar to the Windows Taskbar.

### Built-in AutoFormat Settings

C1WebDialog provides a number of built-in visual styles, including Office 2007 and Windows Vista. To apply a different style, use the Auto Format command on the control's Smart Tag menu.

![C1WebDialog AutoFormat Settings](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2007/7/C1WebDialogAutoFormat.png)

### Using Client-side Script

If you do not use the ShowOnLoad property to make a dialog visible when the form loads, you will have to open it using client-side script. For example, the following Javascript code opens a dialog named C1WebDialog1:

var c1d = document.getElementById("C1WebDialog1");

if (c1d != null)
{
c1d.control.show();
}


This opens a modeless dialog; that is, the user can interact with other windows (including other C1WebDialog instances) while the dialog is open. To open a modal dialog in which the user must click a submit button (or close the dialog) before interacting with any other window, use the showModal method instead:

var c1d = document.getElementById("C1WebDialog1");

if (c1d != null)
{
c1d.control.showModal();
}


To navigate to a different URL within the dialog, use the setUrl method:

c1d.control.setUrl(img);


To change the title string of the dialog, use the set_text method:

c1d.control.set_text(title);


Additional client-side methods are available for customizing images, activating and deactivating dialogs, and invoking built-in button actions such as minimize.

To download a trial version of C1WebDialog and the other controls in ComponentOne Studio Enterprise, visit the following link:

         [ComponentOne Download Center](http://www.componentone.com/downloads)

MESCIUS inc.

comments powered by Disqus