Newtonsoft

WebDialog Quickstart Guide

A short guide to getting started with WebDialog.

Installation

Newtonsoft.WebDialog.dll is the only file needed. Simply place this in your application's /bin directory and you are ready to get started.

Example Use

1. On the page you wish to use WebDialog, add the following register directive at the top of the ASPX or ASCX file.

   <%@ Register TagPrefix="ns" Namespace="Newtonsoft.WebDialog" Assembly="Newtonsoft.WebDialog" %>

2. Now add the actual WebDialog server control to the page. Make sure it is placed inside a visible control, otherwise it will not be rendered.

   <ns:WebDialog runat="server" ID="dlgExample" Width="350" Height="250"
       ShowOnLoad="true" Title="Example Dialog">
       <DialogTemplate>
              <div style="padding: 10px">
                     This text will display inside the window.
              </div>
       </DialogTemplate>
</ns:WebDialog>


   This simple example will popup the window when the page loads and displays the HTML within the <DialogTemplate> tags.

   
   
   

   To display another page instead of some content, remove the <DialogTemplate> tags and then add a FrameUrl attribute with the URL of the page you wish to display.

Hiding, showing, moving and resizing

To control when the window is displayed, hidden or resized on the browser, it is very easy to setup a button or hyperlink with the necessary script.

1. First place an ASP.NET Button control on the page.

   <asp:Button runat="server" ID="btnShowDialog" Text="Show Example Dialog" />

2. And then set it's OnClientClick property using GetShowScript from the WebDialog control.

   btnShowDialog.OnClientClick = dlgExample.GetShowScript() + "return false;";
   When clicked the button will now show the window. Other similar easy to use methods are GetHideScript, GetMoveScript and GetResizeScript, which can each be used like this.

Server controls and callbacks

This example shows how to get references to nested ASP.NET controls and perform callbacks.

1. Add Label, DropDownList and Button controls within the <DialogTemplate> tag.

   <ns:WebDialog runat="server" ShowOnLoad="true" ID="dlgExample" Width="350" Height="250" Title="Example Dialog">
       <DialogTemplate>
              <div style="padding: 10px">
                     <asp:Label ID="lblCurrentServerTime" runat="server" style="font-size:1.5em" /><br />
                     <asp:DropDownList ID="ddlFont" runat="server">
                           <asp:ListItem Text="Arial" />
                           <asp:ListItem Text="Times New Roman" />
                           <asp:ListItem Text="Georgia" />
                           <asp:ListItem Text="Courier New" />
                     </asp:DropDownList>
                     <asp:Button ID="btnSetFont" runat="server" Text="Set Font" />
              </div>
       </DialogTemplate>
</ns:WebDialog>


2. Set the label's text, the button's OnClientClick and attach a delegate to the DialogCallback event. In the method being attached to the event, set label's font using the value of the DropDownList.

   protected void Page_Load(object sender, EventArgs e)
{
       dlgExample.DialogCallback += new CommandEventHandler(dlgExample_DialogCallback);

       btnSetFont.OnClientClick = dlgExample.GetCallbackScript(btnSetFont) + "return false;";

       lblCurrentServerTime.Text = "Server Time: " + DateTime.Now.ToLongTimeString();
}

private void dlgExample_DialogCallback(object sender, CommandEventArgs e)
{
       lblCurrentServerTime.Font.Name = ddlFont.SelectedValue;
}

   View this example

Back