jQuery UI Helpers / Dialog

Simple Dialog

You can create a dialog widget with the BeginDialog method. By default the dialog will be displayed automatically when the page is loaded. This can be changed with the AutoOpen method (see the Configuration section below).

You should call the BeginDialog method in a using statement. This is required to emit all the necessary HTML tags into the response.

The following example creates a simple dialog.

@using (Html.JQueryUI().BeginDialog("Demo"))
{
    <p>This is the first example dialog. Please click the X at the top right corner to close it.</p>
}

The result of the above code is the dialog that was displayed after the page was loaded. It renders the following HTML.

<div data-jqui-dialog-title="Demo" data-jqui-type="dialog">    <p>This is the first example dialog. Please click the X at the top right corner to close it.</p>
</div>

Configuration

Like the other widgets the dialog also has a fluent configuration API. To use it, create the dialog with the Begin method which takes a Dialog as its argument. The following example demonstrates this.

@using (Html.JQueryUI().Begin(new Dialog().AutoOpen(false).Modal(true)))
{
    <p>This dialog is not visible.</p>    
}

This dialog is not visible because its AutoOpen option is set to false. Dialogs like this can be opened with JavaScript. You can write your on code or use jQuery UI Helpers as described in the next section.

Triggers

jQuery UI Helpers supports creating trigger elements that open dialogs. It does this by configuring the necessary event handlers on the specified elements of the page. You can bind a dialog to a trigger element with the TriggerHover or TriggerClick methods. Both of these methods take a single parameter (a jQuery selector string) that is used to identify the trigger element.

The TriggerHover method creates event handlers for the mouseenter and mouseleave events and the dialog is displayed while the mouse is hovering above the element. This is demonstrated in the following example.

<p>If you move the mouse above <a id="triggerLink" href="#">this link</a>, a dialog is displayed at the left side of the window.</p>

@using (Html.JQueryUI().Begin(new Dialog().AutoOpen(false)
    .TriggerHover("#triggerLink")
    .Position(HorizontalPosition.Left, VerticalPosition.Center)))
{
    <p>This dialog is visible when the mouse is over the trigger link.</p>
}

This example binds a dialog to the link in the next sentence.

If you move the mouse above this link, a dialog is displayed at the left side of the window.

The TriggerClick method works the same way but the dialog is opened when the user clicks the specified element.

<p>@Html.JQueryUI().Button("Click me!", new { id = "triggerButton" })</p>

@using (Html.JQueryUI().Begin(new Dialog().AutoOpen(false)
    .TriggerClick("#triggerButton")))
{
    <p>This dialog is opened with a button.</p>
    <p>Please click the X at the top right corner to close it.</p>
}

The dialog is linked to the button below.

Buttons

To define a dialog button you have to provide the button text and the name of a JavaScript function that will be executed when the user clicks the button (see the Events page for more information about using JavaScript functions with jQuery UI Helpers).

Call the Button method to add a button to a dialog. To add multiple buttons call the Button method more than once or use the Buttons method which takes an array of buttons as its argument.

@using (Html.JQueryUI().Begin(new Dialog().AutoOpen(false).TriggerClick("#example5").Modal(true)
    .Button("Close", "closeDialog")))
{
    <p>A modal dialog with a button.</p>    
}

Click the the button below to open the dialog defined in the above example.

In this example the Close button closes the dialog by calling the closeDialog JavaScript function which is defined like this:

function closeDialog() {
    $(this).dialog('close');
};

Confirmation Dialog

jQuery UI Helpers has a built-in support for simple confirmation dialogs. You can bind these dialogs to links (<a> elements) and when the user clicks the link a confirmation dialog is displayed which allows them to cancel or continue the action.

The following example demonstrates how to create a confirmation dialog with the Confirm method.

@using (Html.JQueryUI().Begin(new Dialog().Title("Leaving?").AutoOpen(false)
    .Confirm("#downloadLink", "Yes", "No")))
{
    <p>You are leaving this page. Continue?</p>    
}

This link has a confirmation dialog bound to it so when you click it a dialog will be presented and you can choose to cancel the action or continue to the Download page.

It is also possible to create confirmation dialogs that execute Ajax calls using the link they are bound to. This is done with the ConfirmAjax method. The next example demonstrates this.

The example displays a simple shopping cart which contains five items. Each item has a Remove link that presents a confirmation dialog when clicked. If the user confirms the action an Ajax request is executed to remove the item from the cart. Only the relevant code is shown here.

The confirmation dialog is created like this. Notice that now the jQuery selector (the first parameter of the ConfirmAjax method) is a class selector and not an id as in the previous examples - each Remove link has a CSS class called 'removeLink'.

<div id="cart">
@{Html.RenderPartial("ShoppingCart");}
</div>

@using (Html.JQueryUI().Begin(new Dialog().Title("Remove").AutoOpen(false)
    .ConfirmAjax(".removeLink", "Yes", "No", 
    new AjaxSettings() { Method = HttpVerbs.Post, Success = "removeSuccess", Error = "removeError" })))
{
    <p>Remove the item from your shopping cart?</p>    
}

In this example the remove action on the controller returns a partial view which contains an HTML table with the current content of the cart. The removeSuccess function simply replaces the table on the page with this new one.

function removeSuccess(data, textStatus, jqXHR) {
    $('#cart').html(data);
}

This is the simple shopping cart. Try the Remove links!

When using ConfirmAjax you probably want to define at least a success event handler (in the AjaxSettings object as shown above) to refresh the client side content as needed.

HTML Helpers

Fluent Configuration API