Install jQueryUI Themes in your MVC App in 5 Minutes

In this Step by step Install jQueryUI Themes in your MVC App in 5 Minutes 

   we see how to get your chosen jQueryUI Theme and use it inside your MVC application in 5 minutes, following this simple steps :

1) Select a Theme & download it
2) Select ONLY the script and style files you need
3) Reference them from your HTML5 file


This is how this jQueryUI Application is shown in the Ripple Mobile Emulator , for Nexus Galaxy:

Install jQueryUI Themes in your MVC App in 5 Minutes

The whole process of downloading a jQueryUI Theme , selecting the files you need , and using the Theme in your MVC app, are as following:

1) Select a Theme & download it:

Browse to jQueryUI.com , and open the "Themes" page:

Select from the ThemeRoller the Theme you want to apply to your web site , clicking the "Download" button :

We use the former version because it is more stable .
Check all checkboxes if they are not :

Download the theme to your machine.

2)  Select ONLY the script and style files you need:

Unzip and open the downloaded theme, as you can see here:

Copy- paste the CSS and JS folders to your MVC project.
The ONLY files that the theme will need are the following:

1) JS folder :
     "jquery-X.X.X.min.js"
     "jquery-ui-1.9.2.custom.min.js"

2) CSS folder :
     "jquery-ui-1.9.2.custom.css"



Inside the JS folder, replace the jQuery framework script file that comes with the jQueryUI theme, with the latest version:

And replace the corresponding reference in the HTML5 file :

To take advantage of a Mobile Emulator, take a look at this short tutorial on installing the FREE Ripple Emulator.

That's all. Our jQueryUI theme will be displayed this way:

      by Carmel Schvartzman

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

Step by step how to add the Twitter Bootstrap to the jQueryUI widgets in Asp.Net MVC

        By Carmel Schvartzman

In this tutorial we'll learn how to add the Twitter Bootstrap to the jQueryUI widgets in Asp.Net MVC. The Bootstrap includes many very useful components and also a responsive grid system that scales up to 12 <div>s columns, and adapts itself to the device when size decreases.
Here we'll merge the jQueryUI theme with the Twitter Bootstrap framework, using an outstanding example set up by dipesh.parmar in the following Runnable project.
Bootstrap is the more widely used and more popular CSS3 framework for developing responsive web apps,  making front-end web design very fast and easy.

We'll build a responsive web page using the jQueryUI snippets merged with the Twitter Bootstrap with no effort at all:

The Twitter Bootstrap jQueryUI Merge

First think that's advisable to do is to update the jQuery and the jQueryUI scripts in your MVC application, using NuGet, so that you get the upgraded versions of the scripts :

Then browse to the project build by  dipesh.parmar in the following Runnable project:

If you cannot download and/or see the included files, it's because you are not a member yet, so take 1 minute and log on to Runnable.Copy the HTML markup , and paste it inside the View or in a HTML file:

As you can see, the <HEAD> includes several links to CSS files : all you have to do is import from Runnable those files and put them exactly in the folder as you can see in the Runnable project:

After you set up all the CSS folders & files, take a look at the 5 javascript files we are needing (at the footer of the HTML file):

Therefore copy and arrange all these js files in your application, respecting its folder structure:

That's how your project's file system should appear at the end:

Now, because earlier you upgraded your jQuery & jQueryUI files, you can update the links to use the latest versions:

Browse to your page & you'll see the jQueryUI template made responsive and merged with the Twitter Bootstrap:

That's all!!  In this tutorial we've learned how to add the Twitter Bootstrap to the jQueryUI widgets in Asp.Net MVC.

Happy programming.....

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

Step by step how to use JQueryUI sortable Tabs, Sortable grid and Accordion in an Asp.Net MVC application

       By Carmel Shvartzman

In this tutorial we'll learn how to use JQueryUI sortable Tabs, Sortable grid and sortable Accordion in an Asp.Net MVC application. 
For this tutorial, we'll  need to use several open source JQueryUI Widgets : the sortable Tabs, Sortable grid and sortable Accordion .
Then, we'll create an empty MVC application, and we will use those Widgets , showing as follows:

Your application must have the jQuery scripts and styles libraries installed. 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.

Then, to get the Widgets, we need to browse to the jQueryUI web site, to get the widgets. Go to the "Accordion" widget, open the View Source and get the <script> and the Accordion <div> :

Do the same with the Tabs: locate the <script> and the <div> :

Same thing with the "Sortable"

Now that you located all widgets, let's create a Controller and a View to hold the markup :





Then add the widgets to your View, in some way in which you encapsulate one inside the other:

Now create a .js file to hold the scripts (again, COPY-PASTE all scripts from the jQueryUI web site) :

You could need a CSS stylesheet file to keep the style :

Build and run the app, and check the Sortable:

Then you could check the Accordion :

And also the Tabs widget :

That's all!! 
In this tutorial we've learn how to use JQueryUI sortable Tabs, Sortable grid and sortable Accordion in an Asp.Net MVC application. 

Happy programming.....

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