Last week I wrote a tutorial on Progressive enhancement with ASP.NET MVC 3 and jQuery. It might be a good idea to skim it if you aren’t already familiar with some of the concepts. A commenter on the last article posed a great question which sparked some improvements to the original code. Thanks for the suggestion! Quick Recap As a quick recap, our goal is to build a Contact Us form that works perfectly on all browsers, but offers an enhanced experience for modern browsers with JavaScript enabled. JavaScript enabled 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. They can fill in the form and get a nice confirmation message inside the dialog, and finally close it without ever leaving...

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page. Now that it’s 2011 I hope more .NET web developers really start to take progressive enhancement seriously. Sure many ASP.NET devs work on internal LOB apps and can enforce javascript requirements, but if you’re working on an internet-facing site I encourage you to take advantage of the many PE/unobtrusive javascript techniques we have available these days, especially in MVC 3.   update 3/2/2011 Per a suggestion from a commenter I have written a followup article...

UPDATE 11/27/2011 Please see the updated version of this helper. It now includes a fluent API and can be added to your project very easily with NuGet. Writing a Fluent ASP.NET MVC Recursive TreeView Helper The following helper will make it easy to create a tree view from a recursive self-referencing table. Below you are seeing a tree of “Locations” where each Location can contain X number of child locations. Dependencies  jQuery TreeView Plugin Rendered Tree Table Definition The table itself is extremely simple, each Location has a ParentLocationId which is a relationship to the same table. If the ParentLocationId is null then it is a root location.   Usage Simple <%= Html.TreeView("locations",...

I encountered a rather frustrating problem with jQuery UI tabs this week. The problem occurs when trying to tabify some content after using jQuery’s $().load method to load the tabs HTML via an ajax request. The following code works perfectly in all browsers except IE6 and IE7 (It works fine in IE8 as well), as can be seen in the screenshot below. $('#deviceDetailsWrapper').load('/device/details/294', null, function() { $('#tabs').tabs(); }); However, here is what renders in IE6/7. For some reason, the jQuery tabs are triggering a GET request of the current URL and loading the content into the tab itself. Below you are actually seeing the entire page loaded inside the tab. I discovered this by inspecting the DOM tree within the tab in Firebug, as well as loading up Fiddler and watching the tab call an entirely separate GET request to the current URL as soon as the tabs were loaded....