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.....
כתב: כרמל שוורצמן
No comments:
Post a Comment