Tuesday, June 30, 2009

ASP.NET MVC & jQuery Part 2: Zebra Striping

This is the 2nd blog post in a series taken from a recent presentation I gave at CodeStock. The previous blog posts are available here...

  1. ASP.NET MVC & jQuery Part 1: Adding jQuery Intellisense to VS 2008

Probably one of the coolest things you learn (if you haven’t already) after picking up jQuery is realizing how easy it is to add zebra striping to your tables (alternating row color shading) as demonstrated in the following picture.

FireShot capture #1 - 'Scriptlet' - localhost_8080_Zebra_Scriptlet

Before I knew jQuery I used to write code the like the following in order to get the zebra striping appearance for my tables… which stinks to high heaven!

     <table class="styled">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>
        </tr>

    <% for (var i = 0; i < Model.Count(); ++i ) {
        var item = Model.ElementAt(i);    
    %>
    <% if (i % 2 == 0) { %>
        <tr>
    <% } else { %>
        <tr class="alt">
    <% } %>
            <td>
                <%= Html.Encode(item.Id)%>
            </td>
            <td>
                <%= Html.Encode(item.Name)%>
            </td>
            <td>
                <%= Html.Encode(item.Description)%>
            </td>
            <td>
                <%= Html.Encode(String.Format("{0:F}", item.Price))%>
            </td>
        </tr>
    <% } %>
    </table>
 

Obviously, we want to keep our Views in MVC as simple as possible and even though modular logic isn’t overly complicated, we still should keep it out of the View if at all possible.

It would be optimal to keep out the modular logic and keep the View simple like the following…

      <table class="styled">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>
        </tr>

    <% foreach (var item in Model) { %>
        <tr>
            <td>
                <%= Html.Encode(item.Id) %>
            </td>
            <td>
                <%= Html.Encode(item.Name) %>
            </td>
            <td>
                <%= Html.Encode(item.Description) %>
            </td>
            <td>
                <%= Html.Encode(String.Format("{0:F}", item.Price)) %>
            </td>
        </tr>
    <% } %>
    </table>
 

This is where jQuery comes in handy! With the following line of code we can add zebra striping…

<script type="text/javascript">
    $(document).ready(function() {
        $(".styled tr:even").addClass("alt");  
    });
</script>

That was easy :) The jQuery line selects all the even rows from the table with the “styled” class attribute and adds the “alt” to all the class attributes which provides the alternating row shading.

Another common usability feature that users tend to like is row hover highlighting. Well, this turns out to be another easy thing to do with jQuery. The following code selects all the rows in the table with the “styled” class and attaches a mouseover and mouseout event to all of them. When those events get fired jQuery will either add or remove the “over” CSS definition to/from the class attribute.

<script type="text/javascript">
    $(document).ready(function() {
        $(".styled tr").bind("mouseover mouseout", function() {
            $(this).toggleClass("over");
        });
    });
</script>

So, after all is said and done our basic table looks like the following with two jQuery function calls :)

Id Name Description Price
1 Ralph Fits A lonely ragged pup that licks himself and isn't house trained 12.99
2 Fluffy Florentine A sweet little kitten that is ready to have a home 277.00
3 Bubba Gump A very stupid dog that can't even find his way to his dog house 999.99
4 Charlie Strango This weird looking puppy scares most adults, but has a strange interest to children 23.44
5 Blacky the Beautiful This beautiful cat is as kind as can be. Who says that a dog is man's best friend? 45.65
6 Snot Nose Nelly If you want to get wet, then this is the pet for you. Talk about snot everywhere! 44.78
7 Darcy Scoop A wonderful black lab with human-like intelligence; however, it does poop a lot. 234.55
8 Supsrirooantsum A very rare cat straight from it's homeland of India. 432.67
9 Clark Kent A self-employed kitten making and selling fur balls for all to enjoy. 44.66
10 Red Headed Bull This dog is unlike any other that you have seen. You can even braid it's flowing red hair. 78.99
11 Rex the Terrible A half german shepard / half wolf aggresive dog that will tear the flesh out of anyone you wish. 346.99
12 Skittish Steve You will never see this dog once you buy it. It'll be like you never had a pet to begin with. 33.00
13 Dart Mouth A dart gun was surgically grafted into this dog's mouth. He is great for parties. 55.00
14 Alien Abbott You never hear this dog bark because it only barks in the future. 777.99
15 Crazy Calico If you like cats, don't get this one because it's pure crazy on a stick! 2.99

Monday, June 29, 2009

ASP.NET MVC & jQuery Part 1: Adding jQuery Intellisense to VS 2008

As I mentioned in my previous post, I am starting a series of detailed blog entries that focus on each topic from a recent CodeStock presentation I gave entitled, “Useful jQuery tips, tricks, and plugins with ASP.NET MVC”

I’ve done several talks about jQuery over the last several months and a common question I get is how to get jQuery Intellisense into Visual Studio.

The steps to include Intellisense are actually quite straight forward and are actually easier than they were several months ago.

  1. Install Visual Studio 2008 SP1
  2. Install Visual Studio 2008 SP1 Hotfix to Support "-vsdoc.js" IntelliSense Doc Files
  3. Download jquery-1.3.2-vsdoc.js from jQuery.com
    • Note: The vsdoc.js is also included when you do a New->Project... ASP.NET MVC Web Application
  4. Include jQuery into your MasterPage

If all goes well, then you should be able to see jQuery Intellisense like this…

Intellisense

If the steps don’t give you the above results, then you might try checking out some frequently asked questions hosted on Jeff King’s (a program manager at Microsoft) website. He has a great list of gotchas that might help you getting past your particular situation.

Also, you can check out Scott Gu’s or Rick Strahl’s posts for further details of the above instructions.

Friday, June 26, 2009

Useful jQuery Tips, Tricks, and Plugins with ASP.NET MVC

I’ve given several User Group talks thus far, but this morning I gave my first conference presentation this morning at CodeStock in Knoxville, TN.

Thanks to all that came out to the talk. I hope you found some useful tips &| tricks that you can your in your near to short term development.

If you were able to attend the presentation could you please consider filling out a rating of the talk to help assist me become a better presenter?

Feel free to grab the sample code that I used during my presentation. Since I used Google Docs Presentation for my slides I am going to embed those here for your review.

Personally, I like it when people post their slides & code on their blog, but then several months down the line it is difficult to find that information again…

So, I plan to split apart the presentation into numerous detailed blog posts for those that were unable to make CodeStock and for those who would like to find the material easier in the future.

Thanks again for all of you who attended my presentation. I look forward to the rest of the conference.

Wednesday, June 10, 2009

Design Patterns and Dependency Injection

I just got back from a great nPlus1.org ArcSummet event at the local Nashville Microsoft office.

Brian Prince and James Bender presented the following topics…

Session One: Software Patterns by Brian Price
Patterns are an important tool to use as architects and developers. They provide a common vocabulary for us to design with, as well as a common approach to a common problem. Come learn about useful patterns, and how to use them in your everyday code.

Resources

Contact Information


Session Two: How I Learned To Love Dependency Injection by James Bender
Dependency Injection is one of those scary topics that most developers avoid. It sounds all ‘high-falootin’ and complex. It’s not. Really. We wouldn’t lie. It’s a great way to manage complexity in your system, and a great way to make your system so much more testable. And isn’t that what we all want?

Resources

Contact Information