10+ JavaScript & jQuery MVC Tutorials

Share this article

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.

AJAX - Spring MVC 3 and jQuery Integration 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.

Progressive Enhancement Techniques 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.

Building Contact Us Form 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.

Introduction and basic controller 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)

Drop Downs Video Tutorials 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.

MvcContrib Grid with jQuery DataTable
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.

jQuery Grid with ASP.NET MVC 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.

jQuery Search box and 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.

JavaScript MVC Introduction 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.

10. JavaScript MVC Pattern Overview 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.

JavaScript MVS Libraries 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.

Building JavaScript Web Apps with MVC & Spine.js 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.

MVC for Noobs 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.

Backbone.js 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.

AFrameJS 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.

angularjs Source + Demo

Frequently Asked Questions about JavaScript, jQuery, and MVC Tutorials

What is the difference between JavaScript and jQuery?

JavaScript is a high-level, interpreted programming language that is primarily used to enhance web pages to provide for a more user-friendly experience. jQuery, on the other hand, is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers.

How does MVC architecture work in web development?

MVC stands for Model-View-Controller. It’s a design pattern that separates an application into three interconnected components. The Model represents the data and the business logic, the View displays the data to the user, and the Controller handles the input from the user. This separation allows for efficient code organization, modular components, and greater flexibility.

How can I start learning MVC?

The best way to start learning MVC is by understanding the basic concepts and then applying them in practice. You can start by reading tutorials, watching video lessons, and doing hands-on coding. Our article provides a list of 10 JavaScript and jQuery MVC tutorials that can help you get started.

What are the benefits of using jQuery in web development?

jQuery simplifies the process of writing JavaScript, making it easier to handle events, create animations, and develop AJAX applications. Moreover, jQuery is compatible with a variety of browsers and offers a powerful theme mechanism that allows developers to create a consistent look and feel for their projects.

Can I use MVC with languages other than JavaScript?

Yes, MVC is a design pattern that can be used with many programming languages, not just JavaScript. For example, it’s commonly used in Java, Python, Ruby, and PHP. The principles remain the same, even though the implementation might differ slightly.

How does jQuery simplify working with JavaScript?

jQuery simplifies JavaScript programming by providing easy-to-use APIs for complicated tasks. For example, with jQuery, you can easily select elements, create animations, handle events, and develop AJAX applications. It also provides a consistent interface that works across different browsers.

What are some good resources for advanced MVC learning?

For advanced MVC learning, you can refer to documentation provided by the creators of the MVC frameworks you’re using. You can also find numerous online tutorials, video courses, and books. Participating in coding challenges and contributing to open-source projects can also help enhance your skills.

How can I debug my JavaScript and jQuery code?

You can use various tools to debug your JavaScript and jQuery code. Most modern web browsers come with built-in developer tools that allow you to debug your code. You can also use online tools like JSFiddle or CodePen to test and debug your code.

How can I ensure my JavaScript and jQuery code is efficient and performant?

To ensure your code is efficient and performant, you should follow best practices like using the latest versions of JavaScript and jQuery, minimizing the use of global variables, using strict mode, and optimizing loops and conditional statements. You should also test your code in various browsers to ensure it performs well across all platforms.

How can I keep up with the latest trends and updates in JavaScript, jQuery, and MVC?

You can keep up with the latest trends and updates by following relevant blogs, forums, and social media channels. You can also attend web development conferences and meetups. Additionally, subscribing to newsletters from reputable sources can help you stay updated.

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week