Skip to content

Instantly share code, notes, and snippets.

@danielgreen
Created May 30, 2013 11:30
Show Gist options
  • Save danielgreen/5677251 to your computer and use it in GitHub Desktop.
Save danielgreen/5677251 to your computer and use it in GitHub Desktop.
Garber-Irish JavaScript implementation. Provides a way to execute script, on page load, based on the MVC controller and action that produced the page. This is a DOM-routing approach. It can help pages to avoid explicitly referencing numerous JS files. See http://viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution
@* For the Garber-Irish script to work, the body must have data-controller and data-action attributes set.
You can do this in the MVC Layout template (usually named _Layout.cshtml by default). *@
<body data-controller="@ViewContext.RouteData.Values["Controller"]" data-action="@ViewContext.RouteData.Values["Action"]">
/* Contains general scripts that may be used in any page.
* If this file starts to get large it can be split into page-specific files. */
/* The following code is the Garber-Irish implementation, a way to run relevant JavaScript on page-load
* based on the MVC action that produced the page. It's an unobtrusive approach, which means that the
* code to call the relevant JavaScript functions is all here instead of being hardcoded into the HTML.
* All this code needs from the page is data-controller and data-action attributes on the body tag.
* Since JavaScript is case-sensitive, the controller and action names we use here must be an exact match.
* http://viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution */
SAMPLEAPP = {
common: {
init: function () {
// application-wide code
}
},
Home: {
init: function () {
// controller-wide code
},
Index: function () {
// action-specific code
}
// add more actions if needed...
},
// Add more controllers if needed...
};
UTIL = {
exec: function (controller, action) {
var namespace = SAMPLEAPP;
action = (action === undefined) ? "init" : action;
if (controller !== "" && namespace[controller] && typeof namespace[controller][action] == "function") {
namespace[controller][action]();
}
},
init: function () {
var body = document.body;
var controller = body.getAttribute("data-controller");
var action = body.getAttribute("data-action");
UTIL.exec("common");
UTIL.exec(controller);
UTIL.exec(controller, action);
}
};
$(document).ready(UTIL.init);
/* END: Garber-Irish */
@rippo
Copy link

rippo commented Aug 23, 2013

I would probably add a toLowerCase() in case you have upper camel case controllers or action methods and change Home and Index functons to home: and index .

Therefore it won't matter if your urls are either:-

/Home/Index
/home/index
/HOME/INDEX

etc

             controller = body.getAttribute("data-controller").toLowerCase(),
             action = body.getAttribute("data-action").toLowerCase();

@jonas-stjernquist
Copy link

Any suggestions on how to handle areas when developing ASP.NET MVC web applications?

@captainchamp
Copy link

Any pointers on how to split it into page-specific files?

@cgoodmac
Copy link

+1 on the page-specific files question

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment