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>
This is the first example dialog. Please click the X at the top right corner to close it.
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.
This dialog is visible when the mouse is over the trigger link.
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.
This dialog is opened with a button.
Please click the X at the top right corner to close it.
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.
A modal dialog with a button.
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.
You are leaving this page. Continue?
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!
Name | Price | |
---|---|---|
Remove | Product 0 | 23 |
Remove | Product 1 | 19 |
Remove | Product 2 | 19 |
Remove | Product 3 | 12 |
Remove | Product 4 | 46 |
Remove the item from your shopping cart?
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.