10+ JavaScript & jQuery MVC Tutorials

Since 2011 is almost over and we are about to face another brand new year in a few weeks, we thought we would give you our collection of more than 10 JavaScript and jQuery MVC tutorials you may like to learn just before 2012. MVC ftw! Have fun!

jQuery MVC

1. AJAX – Spring MVC 3 and jQuery Integration

In this tutorial we will build a simple Spring MVC 3 application with AJAX capabilities using jQuery. We will explore how to post data using jQuery.post() and process the result.

Source + Demo

2. Progressive Enhancement Techniques

If you write a lot of JavaScript, you really should consider adopting Progressive Enhancement as the standard way that you work. This is basically whereby you write a web site without script, and then enhance it with script.

Source + Demo

jQuery with ASP.NET MVC

3. Building Contact Us Form

As you can see when a user visits our site with JavaScript enabled and clicks on the Contact Us link, they are presented with a nice jQuery UI dialog window. In this tutorial it will show you how to build your own contact us form using jQuery and ASP.NET MVC progressive enhancement strategy.

Source + Demo

4. Introduction and basic controller

The goal here is not to teach how to use jQuery, but rather how jQuery might be used against the new ASP.NET 3.5 MVC Extensions.

Source + Demo

5. Drop Downs Video Tutorials

In this video we will build an application using ASP.NET and jQuery while learning about CSS selectors, DOM manipulation, and asynchronous communications using the jQuery library. (See source link for the video tutorial download link)

Source + Demo

6. MvcContrib Grid with jQuery DataTable

Learn some important companion pieces in MvcContrib and jQuery, including the validation plugin and the datatable plugin.

Source + Demo

7. jQuery Grid with ASP.NET MVC

A common scenario when building web user interfaces is providing a pageable and sortable grid of data. Even better if it uses AJAX to make it more responsive and snazzy. Since ASP.NET MVC includes jQuery, This tutorial has used a jQuery Grid plugin for the demo.

Source + Demo

8. jQuery Search box and Autocomplete

This is a simple run through on how to create a fancy search box, that has suggestions underneath the input box, and that also can do autocomplete.

Source Demo

JavaScript MVC

9. JavaScript MVC Introduction

While MVC is a familiar term to those in back-end application development—using frameworks such as Struts, Ruby on Rails, and CakePHP—MVC’s origin in user interface development lends itself to structuring client-side applications. Let’s examine what MVC is, see how we can use it to rework an example project, and consider some existing MVC frameworks.

Source + Demo

10. JavaScript MVC Pattern Overview

The goal is to write a simple JavaScript component that can show a power of the language. The component is a kind of the HTML ListBox (“select” HTML tag) control with an editable list of items: the user can select item and remove it or add new items into the list. Component will consist of three classes that implement the Model-View-Controller design pattern.

Source + Demo

11. JavaScript MVS Libraries

JavaScriptMVC (JMVC) is a MIT licensed client-side JavaScript toolset that helps you build a maintainable, error-free, lightweight application in the shortest amount of time. It packages best-of-breed libraries and tools that are guaranteed (and tested) to work together. It supports every browser that jQuery supports.

Source + Demo

12. Building JavaScript Web Apps with MVC & Spine.js

JavaScript developers wishing to add more structure to their code often look for simple ways to apply the popular MVC architecture pattern to their applications. Utilizing a client-side MVC framework can be useful for such code organization and today we’ll be looking at Spine.js, a recently released solution that assists with this task.

Source Demo

Other MVC Resources

13. MVC for Noobs

Model-View-Controller (MVC) is probably one of the most quoted patterns in the web programming world in recent years. Anyone currently working in anything related to web application development will have heard or read the acronym hundreds of times. Today, we’ll clarify what MVC means, and why it has become so popular.

Source + Demo

14. Backbone.js

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

Source Demo

15. AFrameJS

Since AFrame tries to be somewhat AOP with its use of Plugins, and often times those Plugins depend on knowing when the plugged object is initialized, it is recommended to use a class’ create function instead of the ‘new’ operator to do object instantiation.

Source + Demo

16. angularjs

Is a fantastic framework for building Ajax web clients quickly using JavaScript. The architecture of the framework leads to easier testing, maintenance and much less code. In this post we look at adding the autocomplete functionality from JQuery UI to use the two-way databinding found in AngularJS.

Source + Demo

Frequently Asked Questions about JavaScript, jQuery, and MVC Tutorials