Conventional HTML in ASP.NET MVC: Replacing form helpers

22 July, 2014. It was a Tuesday.

Other posts in this series:

Last time, we ended at the point where we had a baseline behavior for text inputs, labels and outputs. We don’t want to stop there, however. My ultimate goal is to eliminate (as much as possible) using any specific form helper from ASP.NET MVC. Everything we need to determine what/how to render input elements is available to us on metadata, we just need to use it.

Our first order of business is to catalog the expected elements we wish to support:

Button (no)
Checkbox (yes)
Color (yes)
Date (yes)
DateTime (yes)
DateTime Local (yes)
Email (Yes)
File (No)
Hidden (Yes)
Image (No)
Month (No)
Number (Yes)
Password (Yes)
Radio (Yes)
Range (No)
Reset (No)
Search (No)
Telephone (Yes)
Text (Yes)
Time (Yes)
Url (Yes)

And the other two input types that don’t use the element, . This is where convention-based programming and the object model of HtmlTags really shines. Instead of us needing to completely replace a template as we do in MVC, we only need to extend the individual tags, and leave everything else alone. We know that we want to have a baseline style on all of our inputs. We also want to configure this once, which our HTML conventions allow.</p> <p>So how do we want to key into our conventions? I like to follow a progression:</p> <ul> <li>Member type</li> <li>Member name</li> <li>Member attributes</li> </ul> <p>We can infer a lot from the type of a member. Boolean? That’s a checkbox. Nullable bool? That’s not a checkbox, but a select, and so on. Let’s look at each type of input and see what we can infer to build our conventions.</p> <h3 id="labels">Labels</h3> <p>Labels can be a bit annoying, you might need localization and so on. What I’d like to do is provide some default, sensible behavior. If we look at a login view model:</p> <script src="https://gist.github.com/47d7b43d6f52e4bc47f9.js"></script> <p>We have a ton of display attributes, all basically doing nothing. These labels key into a couple of things:</p> <ul> <li>Label text</li> <li>Validation errors</li> </ul> <p>We’ll get to validation in a future post, but first let’s look at the labels. What can we provide as sensible defaults?</p> <ul> <li>Property name</li> <li>Split PascalCase into separate words</li> <li>Booleans get a question mark</li> <li>Fallback to the display attribute if it exists</li> </ul> <p>A sensible label convention would get rid of nearly all of our “Label” attributes. The default conventions get us the first two, we just need to modify for the latter two:</p> <script src="https://gist.github.com/2ed5fbff5bdee3240371.js"></script> <p>With this convention, our Display attributes go away. If we have a mismatch between the view model property and the label, we can use the Display attribute to specify it explicitly. I only find myself using this when a model is flattened. Otherwise, I try and keep the label I show the users consistent with how I model the data behind the scenes.</p> <h3 id="checkbox">Checkbox</h3> <p>This one’s easy. Checkboxes represent true/false, so that maps to a boolean:</p> <script src="https://gist.github.com/82bc42c54ac0b13d124b.js"></script> <p>Not very exciting, we just tell Fubu for bools, make the “type” attribute a checkbox. The existing MVC template does a few other things, but I don’t like any of them (like an extra hidden etc).</p> <h3 id="color">Color</h3> <p>With some model binding magic, we can handle this by merely looking at the type:</p> <script src="https://gist.github.com/71b60a8c3a4727730427.js"></script> <h3 id="datetimedatetimelocal-datetime">Date/Time/DateTime/Local DateTime</h3> <p>This one is a little bit more difficult, since the BCL doesn’t have a concept of a Date. However, <a href="http://nodatime.org/">NodaTime</a> does, so we can use that type and key off of it instead:</p> <script src="https://gist.github.com/50dafb99e31fd2f3df43.js"></script> <h3 id="email">Email</h3> <p>Email could go a number of different ways. There’s not really an Email type in .NET, so we can’t key off the property type. The MVC version uses an attribute to opt-in to an Email template, but I think that’s redundant. In my experience, every property with “Email” in the name is an email address. Why not key off this?</p> <script src="https://gist.github.com/c55c5a8f72c4c29a8b27.js"></script> <p>This one could go both ways, but if I want to also/instead go off the DataType attribute, it’s just as easy. I don’t like being too explicit or too confusing, so you’ll have to base this on what you actually find in your systems.</p> <h3 id="hidden">Hidden</h3> <p>Hiddens can be a bit funny. If I’m being sensible with Guid identifiers, I know right off the bat that any Guid type should be hidden. It’s not always the case, so I’d like to support the attribute if needed.</p> <script src="https://gist.github.com/a500412f9b1c526991ea.js"></script> <h3 id="number">Number</h3> <p>Number inputs are a bit complicated. I actually tend to avoid them, as I find they’re not really that usable. However, I do want to provide some hints to the user as well as some rudimentary client-side validation with the “pattern” attribute.</p> <script src="https://gist.github.com/0557b7c12edf18108f98.js"></script> <p>I’d do similar for other numeric types (integer/floating point).</p> <h3 id="password">Password</h3> <p>We’ll use the same strategy as our hidden input – key off the name if we can, otherwise check for an attribute.</p> <script src="https://gist.github.com/e03317906cb2bd0e441e.js"></script> <p>We had to get a little fancy with our attribute check, but nothing too crazy.</p> <h3 id="radio">Radio</h3> <p>Radio buttons represent a selection of a group of items. In my code, this is represented with an enum. Since radio buttons are a bit more complicated than just an input tag, we’ll need to build out the list of elements manually. We can either build up our select element from scratch, or modify the defaults. I’m going to go the modification route, but because it’s a little more complicated, I’ll use a dedicated class instead:</p> <script src="https://gist.github.com/8ad824fdbf79adcee075.js"></script> <p>Element modifiers and builders follow the chain of responsibility pattern, where any modifier/builder that matches a request will be called. We only want enums, so our Matches method looks at the accessor property type. Again, this is where our conventions show their power over MVC templates. In MVC templates, you can’t modify the matching algorithm, but in our example, we just need to supply the matching logic.</p> <p>Next, we use the Modify method to examine the incoming element request and make changes to it. We replace the tag name with “select”, remove the “type” attribute, but leave the other attributes alone. We append a child option element, then loop through all of the enum values to build out name/value options from our enum’s metadata.</p> <p>Why use this over EnumDropDownListFor? Pretty easy – it gets all of our other conventions, like the Bootstrap CSS classes. In a system with dozens or more enumerations shown, that’s not something I want to repeat all over the place.</p> <h3 id="telephone">Telephone</h3> <p>We’ll treat the telephone just like our password element – check for a property name, and fall back to an attribute.</p> <script src="https://gist.github.com/050e36ae0d2dbc7046e5.js"></script> <p>If we want to enforce a specific pattern, we’d use the appropriate data-pattern attribute.</p> <h3 id="text">Text</h3> <p>This is the default, so nothing to do here!</p> <h3></h3> <h3 id="url">Url</h3> <p>Just like our password, we’ll look at the property name, then an attribute:</p> <script src="https://gist.github.com/2fc5f29b0234e72b3b23.js"></script> <p>If we get tired of typing that attribute matching logic out, we can create an extension method:</p> <script src="https://gist.github.com/d19e31fcaaf4dc5e4bcf.js"></script> <p>And our condition becomes a bit easier to read:</p> <script src="https://gist.github.com/970fcfd5777fd914f241.js"></script> <h3 id="wrapping-up">Wrapping up</h3> <p>We knocked out most of the HTML5 input element types, leaving out ones that didn’t make too much sense. We can still create conventions for those missing elements, likely using property names and/or attributes to determine the right convention to use. Quite a bit more powerful than the MVC templates!</p> <p>Next up, we’ll look at more complex element building example where we might need to hit the database to get a list of values for a drop down.</p> </span> </div> <div style="margin-top:15px; margin-bottom:10px"> <span class="next"> ← <a href="/jimmybogard/2014/07/17/conventional-html-in-asp-net-mvc-baseline-behavior/"> Conventional HTML in ASP.NET MVC: Baseline behavior </a> </span> <div style="float:right"> <span class="prev" > <a href="/jimmybogard/2014/07/23/conventional-html-in-asp-net-mvc-data-bound-elements/"> Conventional HTML in ASP.NET MVC: Data-bound elements </a> → </span> </div> </div> <div id="disqus_thread"></div> <script> var disqus_shortname = 'jimmybogardblog'; var disqus_config = function () { this.page.identifier = '920 http:\/\/lostechies.com\/jimmybogard\/?p=920'; }; (function() { var d = document, s = d.createElement('script'); s.src = 'https://' + disqus_shortname + '.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </div> <div class="column is-4"> <div class="sidebar"> <div id="recentAuthorPostsContainer" class="widget"> <div class="card"> <header class="card-header"> <p class="card-header-title nice-title"> Recent Author Posts </p> </header> <div class="card-content"> <div class="content nice-text"> <ul id="recentAuthorPosts"></ul> </div> </div> </div> </div> <div class="widget"> <div class="card"> <header class="card-header"> <p class="card-header-title nice-title"> Recent Site Posts </p> </header> <div class="card-content"> <div class="content nice-text"> <ul id="recentPosts"></ul> </div> </div> </div> </div> <div class="widget"> <div class="card"> <header class="card-header"> <p class="card-header-title nice-title"> Authors </p> </header> <div class="card-content"> <div class="content nice-text"> <ul id="authors"></ul> </div> </div> </div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <div class="content has-text-centered"> <p> <a class="icon" href="mailto:lostechies@gmail.com"> <i class="fa fa-envelope" title="Email"></i> </a> </p> <p class="consent-footer-link"> <a href="#cookie-preferences" id="cookie-preferences-link">Cookie preferences</a> </p> </div> </div> </footer> <div id="consent-banner" class="consent-banner" role="dialog" aria-labelledby="consent-banner-title" aria-describedby="consent-banner-text" hidden> <div class="consent-banner-content"> <p id="consent-banner-title" class="consent-banner-title">Cookies & analytics</p> <p id="consent-banner-text" class="consent-banner-text"> This site uses Google Analytics to understand which posts get read. No analytics cookies are set unless you accept. Nothing here is required for the site to work. </p> <div class="consent-banner-buttons"> <button type="button" class="button is-small consent-decline">Decline non-essential</button> <button type="button" class="button is-small is-dark consent-accept">Accept all</button> </div> </div> </div> <script src="/assets/js/fetch.js"></script> <script src="/assets/js/collections.js"></script> <script src="/assets/js/dom.js"></script> <script src="/assets/js/nav.js"></script> <script src="/assets/js/theme.js"></script> <script src="/assets/js/search.js"></script> <script src="/assets/js/feed.js"></script> <script src="/assets/js/load-authors.js"></script> <script src="/assets/js/load-recent-posts.js"></script> <script> window.GA_MEASUREMENT_ID = "G-6DK8Y2SBT2"; </script> <script src="/assets/js/consent.js"></script> <script src="/assets/js/load-recent-author-posts.js"></script> <script> var page_collection = "jimmybogard"; var collectionFeed = "https:\/\/feeds.feedburner.com\/GrabBagOfT"; var collection = collections.find(function(col) { return col.label === "jimmybogard"; }); loadAuthors("authors"); loadRecentPosts("recentPosts"); loadRecentAuthorPosts("recentAuthorPosts", "recentAuthorPostsContainer"); </script> </body> </html>