Created
May 30, 2013 11:30
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @* 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"]"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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 */ |
Any suggestions on how to handle areas when developing ASP.NET MVC web applications?
Any pointers on how to split it into page-specific files?
+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
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