The ASP.NET MVC Club: Step By Step How to create a JQuery UI Dialog widget in 10 minutes

Friday, June 6, 2014

Step By Step How to create a JQuery UI Dialog widget in 10 minutes

By Carmel Shvartzman

In this tutorial we'll learn how to use the JQuery UI Dialog widget in 10 minutes. The jQuery UI is a set of user interface widgets, interactions, and themes built on top of the jQuery JavaScript Library.
We'll customize the JQuery UI Dialog so that it's located in the MIDDLE of the web page, will remain 2 seconds on the screen, and then will disappear. The custom Dialog will also contain a "Close" button to hide itself.

We'll want to add to our MVC site the jQuery Dialog , showing as follows:

For the sake of using JQuery UI Widgets, like Accordion, Tabs, Portlets, Dialogs, and so on, we'll need to import a JQuery UI Theme, the jquery-ui.js and jquery-ui.css files. (and of course you'll need also a reference to the basic jquery.js file).

The present section is a sub-tutorial about importing the JQuery UI to our app: you can delay it if you already have done it, or you can see the complete step by step in a former tutorial.

This is the BEGIN of the sub-tutorial section: -----------------------------------------------------
---------------------------------------------------------------------------------------------------

First of all, we need to download the Theme from the JQuery UI site, so browse to the site and go to the "Themes" tab:

Select from the "Gallery" the theme you like the most, and download it. I choose the "Le-Frog":

After you download it, extract all from the .ZIP file :

We'll use some of these files. But first , we need to update the javascript jQuery files in our project, because the files which comes with Visual Studio will be obsolete. Open the NuGet utility:

Make a search for the JQuery package and install it:

Do the same for the JQuery UI package:

Now open the Theme's folder we downloaded and copy the entire theme which is inside the "development-bundle" folder:

Paste the folder inside the "themes" folder inside your project:

It will show as follows:

We'll make use of the .CSS file jquery-ui.css. Open the BundleConfig file:

Take a look at these ScriptBundles, because we'll use them inside our app:

Replace the "base" folder by the "le-frog" folder, and add the jquery-ui.css file to the script:

Next, we'll call the bundles from the _Layout file:

Locate the Render "jquery" section and cut it:

Locate the render at the <head> section:

Paste there the "jquery" section , and add the "jqueryui" bundle:

We're done with the javascript and the style we'll need.
Now we'll add the Dialog widget to the Index View. Create a new View:

This is the END of the sub-tutorial section --------------------------------------------------------
---------------------------------------------------------------------------------------------------

To get the code of the Dialog, browse to the "Development" tab at the JQUERY UI site, and select the "Effect" demo:

Then go to the "View source", because we'll customize the STYLE, SCRIPT and DIV sections of the Widget to make our own Dialog:

Put an <script> tag inside your Index file, and code the following functions:

Here we have the following functions:
1) a hide() : to make invisible the Dialog;
2) a #btnOpenDialog : when the button is pressed, SHOW the Dialog;
3) a #btnCloseDialog : when the "Close" button is clicked, hide() the Dialog;
4) the fnShow() : show the Dialog using the "puff" effect during 2 secs, and THEN call a CALLBACK function named:
5) callback() : WAIT 2 secs, and then hide the Dialog using the "puff" effect during 2 secs.

<script>
$(function () {
$("#effect").hide();

$("#btnOpenDialog").click(function () {
fnShow();
});

$("#btnCloseDialog").click(function () {
$("#effect").hide(500);
});

function fnShow() {
$("#effect").show("puff", 2000, callback);
}

function callback() {
setTimeout(function () {
$("#effect").effect("puff", {}, 2000);
}, 2000);
};

})</script>

Copy the Dialog <div> markup:

And paste it somewhere inside our Index file, with some customization and the adding of a "Close" button:

<div class="toggler" style="">
<div id="effect" class="ui-widget-content ui-corner-all">
<div>
<div style="float: right;">
<a href="#" id="btnCloseDialog" class="ui-state-default ui-corner-all">Close</a>
</div>
<h3 class="ui-widget-header ui-corner-all">Effect</h3>
</div>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>

Also, add a button to open the dialog from the Client side:

<div style="width: 100%;">
<a href="#" id="btnOpenDialog" class="ui-state-default ui-corner-all">Press to open a Dialog
</a>
</div>

Last but not least, we need to customize the style of the Dialog, so copy the <style> CSS from the JQuery UI site:

Again, we'll use the JQuery UI source as a bootstrap, but we'll customize it in order to make the Dialog appear IN THE MIDDLE OF THE WEB PAGE:

<style>
.toggler {
width: 500px;
height: 200px;
position: absolute;
left: 600px;
top: 350px;
}
#btnOpenDialog {
position: fixed;
left: 50%;
margin-left: -100px;
padding: 5px 5px;
text-decoration: none;
font: 900 12px georgia;
color: #FFF;
}
#effect {
width: 240px;
height: 135px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}

#effect h3 {
margin: 0;
padding: 0.4em;
text-align: center;
}
.ui-effects-transfer {
border: 2px dotted gray;
}
</style>

Here, #effect is the name of the Dialog, and #btnOpenDialog is the button which opens it. As you see, i added a CSS code to position the JQuery UI Dialog IN THE MIDDLE of the web page:

position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;

What i'm telling here is something like this: "position yourself in the MIDDLE of the web page, and then move a bit up and left, to remain in the middle".

Finally, let's run the application to see the Dialog in action. The Button when clicked will open the Dialog: