Nuget Package for Managing Scripts in ASP.NET MVC 4
As per the comments on my previous post about Managing Scripts for Razor Partial Views and Templates in ASP.NET MVC, I've created a Nuget package for the HtmlHelpers used. Go take a look and leave a comment if you find them useful; I plan to add additional helpers to the package over time for general functionality that is useful in any ASP.NET MVC application.
Event Messaging on the client side with jQuery
How many times have you come across the following kind of code in JavaScript
// code in script-1.js
// eek, two global variables!
var dialog,
updateMessage = function updateMessage (message) {
dialog.text(message);
}
// function to run when the DOM has loaded
$(function () {
// #dialog is just a simple <p> element
dialog = $('#dialog');
});
then in another script file
// code in script-2.js
// function to run when the DOM has loaded
$(function () {
$('select').change(function () {
// update the dialog with the new selection
updateMessage('the new value is ' + this.value);
});
});All we’re doing here is updating the text of a <p> element in the DOM whenever the value of a <select> element changes. It’s a contrived and trivial example but it perfectly demonstrates the tight coupling between these two script files; if the updateMessage function is renamed, removed or modified to reorder the parameters (let’s put aside the use of arguments for a moment), this is going to break script-2 at runtime. What’s more, usually with these kinds of changes, it’s too easy to forget to search through all script and markup-related files for function usages and modify accordingly. And further still, it's polluted the global namespace with two additional variables (a big no no in JavaScript development), dialog and updateMessage, to allow script-2 access to the updateMessage function (which needs access to the dialog variable). There has to be a better way, and there is.
Managing Scripts for Razor Partial Views and Templates in ASP.NET MVC
UPDATE 13-03-2013: I've created a nuget package for the helpers. The original ScriptContext scope had to be brought back in for MVC 4 as the TemplateStack approach no longer worked.
UPDATE 21-11-2011: After some digging through the MVC framework code, I've come up with a slightly cleaner solution that doesn't require ScriptContext to implement IDisposable and therefore removes the need to create a "scope" for the scripts. Skip to the end to see the update.
The view engine in ASP.NET MVC is flexible, very flexible. With great flexibility comes great responsibility however, and managing JavaScript files and code blocks can be particularly cumbersome in conjunction with partial views and templates.
Event Internals in jQuery - Part Two
Part one of jQuery Event internals looked at the DOM Event specifications, the history of the Document Object Model (DOM) event models and reasoning behind why jQuery has an event system. In the second part of this series, we'll be looking at the jQuery.event object and jQuery.Event constructor function, both of which play a pivotal role in managing events. Previously, we looked at the bind() method (and the related specific event handler binding methods such as click(), keyup(), etc) and saw that bind() eventually calls jQuery.event.add, so let's start by looking at that.
Event Internals in jQuery - Part One
I've been using jQuery for a number of years now and think it's an awesome JavaScript library for providing a rich client experience to web applications with little effort. Whilst I advocate the use of jQuery to quickly and effectively build your client side solutions, I also think that it's important to understand what's going on under the hood, particularly as it can help to quickly pinpoint a bug in your own code (and on the rarest of occasions, a bug in the library code).
Wrap child elements in groups in jQuery
A while ago, I answered a Stack Overflow question about how to wrap child elements matching some selector into groups of a specified size. I had a need for this again recently so I went back to the code, tidied it up and have come up with a slightly more refined plugin.