Posts Tagged ‘jQuery’

You may have noticed this blog has been awfully quiet in the past couple of months.  That’s because I’ve been working on a neat side project with a couple of other developers.  Today, we’d like to submit our project to the ASP.NET community to get some feedback. The site is called WorkGrabber.com.  You can check it out here:  http://workgrabber.com

What we’re trying to create with WorkGrabber is something like the eBay of local service contractors. In an nutshell, when you post a job, you’re bringing the entire project directly to contractors in detail. You can upload photos and videos as well as answer questions and interact with contractors while keeping your information private.  You can review bids from local contractors and accept the one that you like the most.  You can read more about the features of WorkGrabber on the WorkGrabber blog. In this post, I want to focus more on the technology we used to create it.

We started developing WorkGrabber during the earlier releases of ASP.NET MVC although we were pretty sure we weren’t going to release it until the first RTM. It gave us more time to beta test the site with friends and family before releasing it into the wild. Here’s a breakdown of some of the tools we used.

WorkGrabber is built on top of ASP.NET MVC 1.0. Not a whole lot changed in the past couple releases of MVC so upgrading was fairly simple. The data access code is developed mostly using LINQ to SQL with a SQL 2005 database. jQuery is used throughout the site to create some cool visual effects. For example, we used jQuery Tag Suggestion plugin to create this neat auto-suggest tagging feature for when you’re posting a job.

 tag samples

Throughout WorkGrabber, we use the jQuery Facebox plugin to create really cool modal windows.  The modal windows themselves are ViewUserControls which are rendered back to the client.  Here’s an example:

 facebox sample

The majority of images are hosted by ImageShack and the galleries use the jQuery lightBox plugin to create a really neat modal effect.  So much is built into this jQuery plugins that they really make client side development a blast.

 photo gallery

I plan to post more about the internals of WorkGrabber in later posts.  I’d love to hear some of your feedback.  If you have a project on your “honey-do” list that you keep putting off, try posting it on WorkGrabber to get some free local contractor bids.

Try posting a job and let me know what you think in the comments here.

First of all, an apology for being so quiet over the past few weeks.  I’ve been putting my blogging aside for a while to chase some pet projects I’m working on.  More on that later.

I did, however, run into a particular situation that I thought would be of interest to anyone adopting ASP.NET MVC and looking for some goodies from jQuery.  Many of you have no doubt started testing the waters with jQuery since it was announced that Microsoft will be shipping the next version of .NET with it included.  If you haven’t used jQuery yet, prepare to fall in love!  

In this post, I’m going to cover a simple way to build a deep, hierarchical and feature-rich tree structure with only one line of jQuery script.  jQuery has a huge library of plugins covering all sorts of functionality.  For this, we’ll be using a neat plugin from for treeviews.  Here’s what you need:
jQuery
jQuery Treeview Plugin

This structure will consist of a category/sub-category relationship that is able to support n-levels of sub-categories with no changes.  To demonstrate, let’s look at the SQL table that supports the structure.

Notice the rows with ParentCategoryID set to NULL are the parent categories.  Each row with a ParentCategoryID is a sub-category and relates to it’s parent category.  The numbers show the level in outline view.

The jQuery Treeview plug-in requires the resulting HTML to be in a particular unordered list (<ul>) element to parse the tree correctly.  Since we don’t know how many levels to expect, we are going to call the MVC user control that renders each node recursively.  This control accepts a single Category item. 

 

We render the name of that category and then check if it has any categories associated with it.  If it does, we recursively render the control again.

In the controller, we are simply passing in the categories where the ParentCategoryID == null.

 

On the host view (Index.aspx), we create the root unordered list with an ID of “treeview” and pass in an array of the Parent categories (categories where the ParentCategoryID == null) from the controller. 

 

Here’s a look at the output WITHOUT the jQuery magic.

Now all we have to do is add the libraries we’re going to use and hook up the Treeview plugin.


Note:  I always use the jQuery script from the Google API’s.  By referencing it from Google’s server, you get to ride along their CDN, compression, etc. capabilities.  As an added bonus, if your user has already visited a site that referenced the same library, the jQuery library would be cached on their browser so they don’t take the hit of having to download it again.  Sweet!

In our jQuery script, we just get the ul’s element ID and call the plugin’s treeview() method with no options. 

 

When we refresh the page, we see jQuery has done its magic and now we have collapsable, rich tree view.

There’s a ton more options in the Treeview plugin that you can check out for yourself, including async loading with ajax, and tons of customizations.  ASP.NET MVC and jQuery – a match made in heaven!

Hope this helps!

This is one of the neatest, straightforward, and down right coolest way to submit a form with the ASP.NET MVC Framework.  I’ve blogged in the past about jQuery and how useful it is.  Combining MVC with jQuery can produce some really neat Web 2.0 style applications and today we’ll take a look at some first steps.  I’d like to get into some more advanced usage of jQuery.  In particular, how it can integrate with ASP.NET MVC Framework. 

Once you’ve downloaded the latest jQuery library, drop the script into your \Content folder in the MVC project.  I usually create a sub folder in Content to organize my javascript files. 

 

Anything you’re going to do with jQuery requires this file.  Depending on how often you use jQuery on your site, you might want to put the script on your MasterPage or if you only use it on a single page, you could drop it on that specific page.

We will now create a simple action to handle a basic contact form on our site.  In this case I put the action in my Home controller.  Also notice that by checking the HttpMethod I can handle both the GET and POST of the contact form with the same action.  Note:  The upcoming release of the MVC framework will not require the ControllerAction attribute on the action.

 

Looking at the view, we have a very simple contact form to capture the sender’s email, the subject, and the body of the message.  There’s also a submit button to submit the form.  We’ve also created the action using the Url helper. 

 

Next, we are going to create a jQuery handler to wire up the form’s submit event and run some jQuery scripts instead of a full server post.

 

First thing we do with jQuery is make sure the document is ready and all the DOM element have been loaded.  Then we find our form element and wire up the “onsubmit” event so we can intercept it and do some jQuery magic. It’s really easy to create an AJAX request using the $.post function; we just need some information about the form we’re posting.  I’m also showing off a couple of cool jQuery functions to do some neat UI updates.  We’ll fade out the contact form when the AJAX request starts, then fade it back in and show an alert.  You can imagine how you could fit progress indicators in here as well.

That’s it.  When you hit the submit button, the javascript will take over the post and execute the action you specified.  Hope this helps! 


I’ve been having a love affair with jQuery lately.  Visual Studio 2008 had huge advances in JavaScript editing. One thing that I could never get to work is the JavaScript Intellisense for jQuery.  Intellisense is always a huge help when learning a new syntax and would be extremely beneficial while learning the jQuery API.


The good news is that there’s finally a hot fix available that fixes the jQuery Intellisense in Visual Studio as well as several others performance and editor fixes.  You can learn more from here and download it here.