Generating MVC View Models from Arrays Generated by jQuery
Many times on my latest work-for-hire project I’ve been reluctantly adding a new MVC View Model to the build. I don’t want to be one of those developers slapping redundant clutter out of ignorance and the fear of being perceived of as “too slow.” And it is time consuming to write a View Model—especially for an HTML form with several dozen data points.
What makes me feel just a little bit better is the fact that a View Model needs to be redundant for these very powerful reasons:
- The View Model often flattens hierarchical relationships on the server among several entities/tables. Remembering this literally puts the View back into View Model.
- The View Model is a strongly-typed representation of what can be generalized into a big bag of name-value pairs. My assertion here is that it is easier to maintain the strongly-typed object than to painstakingly account for several dozen strings in a bag.
What’s even better for me is this little JavaScript utility function:
$.rx.utilityGetInputProperties = function (selector, context) {
var props = [];
$(selector, context)
.find('input, select, textarea')
.each(function () {
props.push($(this).attr('id'));
});
return _.sortBy(props, function (p) { return p; });
};
This jQuery function will allow me to generate POCO C# View Model classes with properties named after the id attribute of HTML form elements quite quickly. There are several “peculiar” conventions from my little world here:
- I am biased toward using AJAX/JSON to post HTML form data—this means I can use the
idattribute of HTML form elements. - My IDs for HTML forms are in Pascal case—which can be quite annoying to JavaScript-centered developers. Worse, is me deliberately doing this for CSS class names as well!
Using $(document).ajaxComplete() as a Secondary Initialization ‘Hook’ for Client Scripts
Getting JavaScript loaded and running is ridiculously difficult. In very large, complex clients $(document).ready() is not enough. My intent as a programmer is to compose logic into discrete units that are as independent as possible. This makes maintaining the code easier and it allows new developers to not freak out with the fear of breaking something somewhere in the mysterious deep… Without something like $(document).ajaxComplete(), the level of independence would decrease—as I would be tempted to pack more and more dependencies into the $(document).ready() function block as the client got larger and larger. This is what my $(document).ajaxComplete() pattern looks like today:
$(document).ajaxComplete(function (event, xhr, options) {
if (options.url.indexOf('/MyMvcRoute') !== -1) {
//Visuals for each panel:
$.rx.panels();
$.rx.panelOne();
$.rx.panelTwo();
$.rx.panelThree();
});
}
});
Related Links
-
Underscore.js: “Underscore provides 60-odd functions that support both the usual functional suspects: map, select, invoke — as well as more specialized helpers: function binding, javascript templating, deep equality testing, and so on. It delegates to built-in functions, if present, so modern browsers will use the native implementations of
forEach, map, reduce, filter, every, some andindexOf.” - “HTML5 JSON Report format: tool to view any JSON data in a human-readable HTML”
- “The Cicada Principle and Why It Matters to Web Designers”
- “Clever use of HTML5” via @sambrown
- HTML5 Shiv: “Sjoerd Visscher mentioned an interesting technique that could be used to force IE to use the specified CSS styling. Specifically, once you create a new DOM element (of the same name as the one in the document) all styling is applied. You don’t even have to inject the element in order for this to occur.”
-
Exploring Globalization with jQuery: “One file
jQuery.glob.all.jsincludes around 350 cultures currently. So with this we need to include only this file for all the cultures supported by the plugin.” - jQuery 1.5 Released: “Easily the largest change in this release is the complete rewrite of the Ajax module in jQuery. This rewrite helps to fix a lot of gaps that existed in the old Ajax system along with providing a higher level of consistency across the API.”
