Tuesday, May 27, 2014

Step By Step How to create an MVC site using JQuery UI Widgets and Themes in 10 minutes

        By Carmel Shvartzman

In this tutorial we'll learn how to create an MVC site using JQuery UI Widgets and Themes in 10 minutes. jQuery UI is a set of user interface widgets, interactions, and themes built on top of the jQuery JavaScript Library.
We'll want to create  an outstanding MVC site using jQuery Themes and Widgets , showing as follows:





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 Accordion widget to the Index View. Create a new View:


To get the code of the Accordion , browse to the Development tab at JQUERYUI site, and select Accordion:


Then go to the source:



Notice that all the scripts the Accordion needs are jquery-{version}.js , jquery-ui-{version}.js , and jquery-ui.css stylesheet:



Copy the <script> contents:


Paste the <script> inside our Index file:


Copy the Accordion markup:


And paste it somewhere inside our Index file:


Run the application to see the Accordion:


Now we'll add the Tabs widget. Browse to the Tabs in the JQueryUI site:



Copy the <script> contents and the markup:



Paste the <script> and the markup inside the Index file:


If you wish, place the Accordion inside one of the Tabs:


Next, we'll add a Sortable widget:


This time we have <script>, <style> and markup to copy-paste:


Paste the script in the Index file:


Place the <style> in the Index file:


And place the Sortable in some Tab:



Refresh the browser to see the widgets in action: this is the Tabs with the Accordion inside:

And this is the Sortable widget:



You can drag and drop and sort the widget:





Finally, we'll add the Portlets widget:


Copy all the <script>:


And the markup:


And paste it inside the Index file:


Refresh again the web page to see the Portlets in action:


You can reorder them:





And this is the final cut of our app with all widgets in action:





That's all!! 
In this tutorial we've learn how to create an MVC site using JQuery UI Widgets and Themes in 10 minutes.  

Happy programming.....


כתב: כרמל שוורצמן