Easily Share Code with these 8 Online Tools

I got the following tweet yesterday…

twitterED_normal  damanlovett: @elijahmanor You seem like a #jquery guru. ? 4 U, is it possible to use a dialog box to submit form data

And as it turned out, I had just had issues with submitting form data with the jQuery BlockUI Plugin the previous day & was able to find a work around (as I blogged hours after he asked me).

Although I blogged about a workaround hours later, I thought he might need a quicker answer so I went on the lookout for an online code sharing website to post and share the code with him.

I’ve used one or two of these services in the past, but at the time I was drawing a blank so I tweeted the question…

DSCN8389_normal  elijahmanor: I'm having a brain freeze... what is that service where you can post a snippet of code online & get a URL to share w/ others?

Moments later I was flooded with lots of different online options to share code.

Here are 8 online services that I received via twitter replies or that I found separately…

Note: Click the image to redirect to the actual hosted code snippet

Snipt.org

SniptOrg 

HTML pastebin

PastebinCom

Friendpaste

FriendPasteCom

Snipt

Note: You have to either create an account or use an OpenId

SniptNet

CodePaste.NET

CodePasteNet

Pastie

PastieOrg

Snipplr

SnipplrCom

textsnip

TextSnipCom

Which of the above services do you like best? Did I miss your favorite online code sharing service? If so, leave a comment with your favorite or suggestion.

Read More »

Using jQuery BlockUI Plugin with ASP.NET Input Form

I was recently working on an ASP.NET WebForm project where it made sense to use a modal dialog to confirm choices, to ask for additional information, etc…

I’ve used the jQuery BlockUI Plugin before and I’ve always thought it provided a good mix of nice features as well as extreme customization.

Ii went ahead an implemented BlockUI across the application and was satisfied on how it looked & felt, but I noticed some weird behavior on one of the modal screens. I had a screen that had numerous input controls (textboxes, dropdownlists, etc…) and when I posted back my results all of the input controls were blank!

Ahh, what do I do? Where are my updated input values?

Debugging Steps

  1. Check to make sure I wasn’t re-initializing the input controls on PostBack
  2. Investigate that I didn’t turn off viewstate by accident & make sure I wasn’t using dynamic controls

After those steps I was still confused and frankly wasting a lot of time with something I thought would be very quick.

To make a long story short, it was BlockUI that was clearing the input controls on PostBack!

So, I created a fresh demo application to replicate the issue and started investigating.

The following code shows how to recreate the issue and how to resolve the issue.

    









 

The issue is more obvious if you had used an in the above code snippet instead of an as was the standard in my project. When using a the modal input form doesn’t submit at all! The BlockUI prevents the modal from from posting. I tried manipulating some of the plugin settings such as setting bindEvents = false and others, but nothing seemed to help.

So, the solution that works is…

  1. Attach a jQuery click event to your LinkButton
  2. Prevent the default click behavior of the LinkButton
  3. Unblock the modal window to restore default behavior of input form
  4. Add an onUnblock event to the modal window and evaluate the LinkButton’s href
Read More »

ASP.NET MVC & jQuery Part 3: MvcContrib Grid & jQuery Plugins

This is the 3rd blog post in a series taken from a recent ASP.NET MVC & jQuery presentation I gave at CodeStock. The previous blog posts are available here...

  1. Part 1: Adding jQuery Intellisense to VS 2008
  2. Part 2: Zebra Striping

MVC Contrib Grid Component

The ASP.NET MVC 1.0 Release has a lot of great things included in it, but there is another open source project called MVC Contrib that fills many gaps and compliments the core functionality.

In this blog post I want to demonstrate how you can use the MVC Contrib Grid Component in conjunction with two different jQuery plugins to provide rich functionality inside a simple and clean View.

First lets review why you might want to use the MVC Contrib Grid Component.

  • Provides a Fluent Interface
  • Discourages Logic in your View
  • Provides Reusable Grid Models
  • Customizes Grid Rendering
  • Includes a Separate Pagination Component

If the above bullet items interest you, then check out the 5 part blog series on the MVC Contrib Grid Html Helper by Jeremy Skinner.

Enough of describing the component, lets start using the MVC Contrib Grid. After adding a reference to the MvcContrib assembly to your project you can proceed adding the Grid to your View…

<p></p>    <pre><% Html.Grid(Model).Columns( column => {   <br>   column.For(x => Html.ActionLink("ID", "Details", new { id = x.Id })).Named("View").DoNotEncode();   <br>   column.For(x => x.Name).Named("Pet Name");   <br>   column.For(x => x.Description).Named("Description");   <br>   column.For(x => x.Price).Format("{0:C}"); <br>})<br>.Attributes(style => "width: 75%;")<br>.Empty("There are no pets.")<br>.Render(); %><br></pre>   <p>As you can see in the code above, the syntax is easy to ready and it utilizes the tightly bound model passed to the View. The output of the Grid isn’t anything spectacular (see the following grid).</p> <pre><br>  <table id="dataTable"><br>        <thead><br>            <tr><br>                <th>View</th><br>                <th>Pet Name</th><br>                <th>Description</th><br>                <th>Price</th><br>            </tr><br>        </thead><br>        <tr class="gridrow"><br>            <td><a href="/MvcContrib/Details/1">ID</a></td><br>            <td>Ralph Fits</td><br>            <td>A lonely ragged pup that licks himself and isn't house trained</td><br>            <td>$12.99</td><br>        </tr><br>        <tr class="gridrow_alternate"><br>            <td><a href="/MvcContrib/Details/2">ID</a></td><br>            <td>Fluffy Florentine</td><br>            <td>A sweet little kitten that is ready to have a home</td><br>            <td>$277.00</td><br>        </tr><br>        <!-- Additional Rows --><br>        <tr class="gridrow_alternate"><br>            <td><a href="/MvcContrib/Details/14">ID</a></td><br>            <td>Alien Abbott</td><br>            <td>You never hear this dog bark because it only barks in the future.</td><br>            <td>$777.99</td><br>        </tr><br>        <tr class="gridrow"><br>            <td><a href="/MvcContrib/Details/15">ID</a></td><br>            <td>Crazy Calico</td><br>            <td>If you like cats, don't get this one because it's pure crazy on a stick!</td><br>            <td>$2.99</td><br>        </tr><br>    </tab<br></pre> <p>We can now transform the output of the MVC Contrib Grid into a rich featured table with the help of a little jQuery.</p> <h4>jQuery TableSorter Plugin</h4> <p>First, lets use the jQuery <a href="http://tablesorter.com/docs/">TableSorter Plugin</a> to add some simple inline sorting capabilities to the Grid. Only the following one line of jQuery is necessary to transform this Grid. See the follow table for the results.</p> <p>Note: TableSorter has additional widgets you can add for extra functionality. I am using the zebra widget to provide the alternate row coloring.</p> <pre><br>$("table").addClass('tableSorter').tablesorter({ sortList: [[1, 0]], widgets: ['zebra'] });  <br></pre> <p></p><table><thead><tr><th>View</th><th>Pet Name</th><th>Description</th><th>Price</th></tr></thead><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/1">ID</a></td><td>Ralph Fits</td><td>A lonely ragged pup that licks himself and isn't house trained</td><td>$12.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/2">ID</a></td><td>Fluffy Florentine</td><td>A sweet little kitten that is ready to have a home</td><td>$277.00</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/3">ID</a></td><td>Bubba Gump</td><td>A very stupid dog that can't even find his way to his dog house</td><td>$999.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/4">ID</a></td><td>Charlie Strango</td><td>This weird looking puppy scares most adults, but has a strange interest to children</td><td>$23.44</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/5">ID</a></td><td>Blacky the Beautiful</td><td>This beautiful cat is as kind as can be. Who says that a dog is man's best friend?</td><td>$45.65</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/6">ID</a></td><td>Snot Nose Nelly</td><td>If you want to get wet, then this is the pet for you. Talk about snot everywhere!</td><td>$44.78</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/7">ID</a></td><td>Darcy Scoop</td><td>A wonderful black lab with human-like intelligence; however, it does poop a lot.</td><td>$234.55</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/8">ID</a></td><td>Supsrirooantsum</td><td>A very rare cat straight from it's homeland of India.</td><td>$432.67</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/9">ID</a></td><td>Clark Kent</td><td>A self-employed kitten making and selling fur balls for all to enjoy.</td><td>$44.66</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/10">ID</a></td><td>Red Headed Bull</td><td>This dog is unlike any other that you have seen. You can even braid it's flowing red hair.</td><td>$78.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/11">ID</a></td><td>Rex the Terrible</td><td>A half german shepard / half wolf aggresive dog that will tear the flesh out of anyone you wish.</td><td>$346.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/12">ID</a></td><td>Skittish Steve</td><td>You will never see this dog once you buy it. It'll be like you never had a pet to begin with.</td><td>$33.00</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/13">ID</a></td><td>Dart Mouth</td><td>A dart gun was surgically grafted into this dog's mouth. He is great for parties.</td><td>$55.00</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/14">ID</a></td><td>Alien Abbott</td><td>You never hear this dog bark because it only barks in the future.</td><td>$777.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/15">ID</a></td><td>Crazy Calico</td><td>If you like cats, don't get this one because it's pure crazy on a stick!</td><td>$2.99</td></tr></table><h4>jQuery DataTable Plugin</h4> <p>Now, lets try adding a s lightly more feature rich jQuery Plugin to our Grid. The jQuery <a href="http://www.datatables.net/">DataTable Plugin</a> allows not only sorting of columns, but provides an elegant searching mechanism and also paging functionality. Yet again, with only one jQuery statement we can transform this table into something much more usable.</p> <pre><br>$('dataTable').addClass('dataTable').dataTable({<br>   "iDisplayLength": 10,<br>   "aaSorting": [[1, "asc"]],<br>   "aoColumns": [{ "bSortable": false }, null, null, null]<br>}); <br></pre> <hr><p></p><table><thead><tr><th>View</th><th>Pet Name</th><th>Description</th><th>Price</th></tr></thead><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/1">ID</a></td><td>Ralph Fits</td><td>A lonely ragged pup that licks himself and isn't house trained</td><td>$12.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/2">ID</a></td><td>Fluffy Florentine</td><td>A sweet little kitten that is ready to have a home</td><td>$277.00</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/3">ID</a></td><td>Bubba Gump</td><td>A very stupid dog that can't even find his way to his dog house</td><td>$999.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/4">ID</a></td><td>Charlie Strango</td><td>This weird looking puppy scares most adults, but has a strange interest to children</td><td>$23.44</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/5">ID</a></td><td>Blacky the Beautiful</td><td>This beautiful cat is as kind as can be. Who says that a dog is man's best friend?</td><td>$45.65</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/6">ID</a></td><td>Snot Nose Nelly</td><td>If you want to get wet, then this is the pet for you. Talk about snot everywhere!</td><td>$44.78</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/7">ID</a></td><td>Darcy Scoop</td><td>A wonderful black lab with human-like intelligence; however, it does poop a lot.</td><td>$234.55</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/8">ID</a></td><td>Supsrirooantsum</td><td>A very rare cat straight from it's homeland of India.</td><td>$432.67</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/9">ID</a></td><td>Clark Kent</td><td>A self-employed kitten making and selling fur balls for all to enjoy.</td><td>$44.66</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/10">ID</a></td><td>Red Headed Bull</td><td>This dog is unlike any other that you have seen. You can even braid it's flowing red hair.</td><td>$78.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/11">ID</a></td><td>Rex the Terrible</td><td>A half german shepard / half wolf aggresive dog that will tear the flesh out of anyone you wish.</td><td>$346.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/12">ID</a></td><td>Skittish Steve</td><td>You will never see this dog once you buy it. It'll be like you never had a pet to begin with.</td><td>$33.00</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/13">ID</a></td><td>Dart Mouth</td><td>A dart gun was surgically grafted into this dog's mouth. He is great for parties.</td><td>$55.00</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/14">ID</a></td><td>Alien Abbott</td><td>You never hear this dog bark because it only barks in the future.</td><td>$777.99</td></tr><tr><td><a href="http://www.elijahmanor.com/MvcContrib/Details/15">ID</a></td><td>Crazy Calico</td><td>If you like cats, don't get this one because it's pure crazy on a stick!</td><td>$2.99</td></tr></table><br><hr><p>Now, there are definitely some pros and cons in using the above two jQuery plugins.</p> <p>Pros</p><ul><li>The <a href="http://tablesorter.com/docs/">TableSorter Plugin</a> & <a href="http://www.datatables.net/">DataTable Plugin</a> are very easy to implement. Only one jQuery statement is needed. </li>   <li>The user is presented with a richer interface providing sorting, paging, and simple searching. </li></ul><p>Cons</p><ul><li>Despite the pros listed above, the biggest con is that the jQuery Plugins are not scalable. All the records are returned in the View and the plugins hide and show the necessary data depending upon the user’s actions. </li></ul><p>In light of the cons, I personally wouldn’t use any of the above jQuery plugins for my tables unless it was for a trivial non-production web page with a known number of static records.</p> <p>Normally, I lead towards using either the <a href="http://www.flexigrid.info/">Flexigrid Plugin</a> or <a href="http://www.trirand.com/blog/">jqGrid Plugin</a> that I will be reviewing in the next blog post in this series.</p>
Read More »

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!










<% for (var i = 0; i < Model.Count(); ++i ) {
var item = Model.ElementAt(i);
%>
<% if (i % 2 == 0) { %>

<% } else { %>

<% } %>





<% } %>
</table>
</pre>

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…


Id Name Description Price

<%= Html.Encode(item.Id)%>

<%= Html.Encode(item.Name)%>

<%= Html.Encode(item.Description)%>

<%= Html.Encode(String.Format("{0:F}", item.Price))%>








<% foreach (var item in Model) { %>






<% } %>
Id Name Description Price

<%= Html.Encode(item.Id) %>

<%= Html.Encode(item.Name) %>

<%= Html.Encode(item.Description) %>

<%= Html.Encode(String.Format("{0:F}", item.Price)) %>

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



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.



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
Read More »

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.

Read More »