Published on May 6, 2015 by Jamie Munro
You require custom data validation that cannot be accomplished via the built-in data annotation validation attributes - or - your data validation requires access to multiple properties in your model.
Many times the easy answer is to place the validation inside of your controller. However, I'm a strong believer of placing data validation outside of your controllers and within your data model. This is commonly accomplished by adding data annotation above the properties, such as the [Required] attribute. Another common way is to create your own validation attributes.
This example will use a third way and that is to implement the IValidatableObject interface. This interface defines a Validate function that must be implemented and because it is inside of your data model it has access to all properties within your model.
Read more >
Tags: validation | ASP.NET | mvc5 | ivalidatableobject | validationcontext
Published on May 4, 2015 by Jamie Munro
On a variety of actions inside your controllers you call the Automapper NuGet Package
to convert from one model to another and you do not want to continue repeating this code each time.
Applying an MVC result filter
to the action can execute the Automapper code after the action has been processed by the MVC framework and before the view is rendered.
Please note this is an excerpt from Chapter 9 of my ASP.NET MVC 5 with Bootstrap and Knockout.js
book. In this chapter I provide a brief overview of the 5 different MVC filters and then over the next two chapters provide detail examples of each. The following post is leveraging the example of a Result Filter.
Read more >
Tags: ASP.NET | mvc | automapper | mvc5
Published on Apr 29, 2015 by Jamie Munro
You've created a nice feature leveraging Knockout.js and now you want to re-use this feature on another page, another site, or in a slightly different fashion. This example will extend the previous (Un)Check All using #KnockoutJS
and make it easily re-usable.
A Knockout component
can be created using a mixture of HTML (with data bindings) and a Knockout ViewModel. By altering the previous check all example and making it slightly more re-usable, it can be easily added to other pages with minimal effort. If you are not already familiar with the example being extended, please take a minute and give the (Un)Check All using #KnockoutJS
a quick read.
Once the component is created, it can be included on any page with this simple HTML:
<checkall params="items: items, selectedItems: selectedItems"></checkall>
Read more >
Tags: KnockoutJS | knockoutjs | component
Published on Apr 27, 2015 by Jamie Munro
Radio buttons are hard-to-see, not easy to select, and let's face it, quite mundane. You would like to replace these radio buttons with a group of buttons that represent the same functionality, e.g. only one of the options may be selected at any given time.
Leveraging Bootstrap which provides many incredibly styled components for buttons, alert boxes, tables, forms, etc... regular radio buttons will be replaced by a button group (see screenshot below). Knockout.js will be used to create a custom data binding
that will make the group of buttons act like regular radio buttons (with a nicer look of course).
This example assumes you have a basic understanding of both Bootstrap and Knockout.js. If you don't, feel free to explore my latest book ASP.NET MVC 5 with Bootstrap and Knockout.js
for a great introduction, plus many more examples.
The versions used for this example are 3.3.4 for Bootstrap and 3.3 for Knockout.js. This example should be compatible with older versions of these frameworks.
Read more >
Tags: KnockoutJS | knockoutjs | Bootstrap | bootstrap | radio buttons | buttons
Published on Apr 23, 2015 by Jamie Munro
When I wrote Knockout.js: Building Dynamic Client-Side Web Applications
I was trying to focus on demonstrating specific things, such as custom bindings, extending observables, etc. Unfortunately this didn't leave room for what I would call "random" examples of things that I do on a semi-regular basis. This blog post will demonstrate how to create a (un)check all list of checkboxes.
If I haven't said it before, examples like this are why I love working with Knockout.js on a daily basis. This example is accomplished in under 50 lines of code, with most of it being whitespace for readability!
The following example assumes you understand how to install Knockout.js and have a brief understanding of Knockout ViewModels. If you are looking for a good introduction *cough* *cough*, my book does an excellent job of it ;)
You have a list of elements - such as emails or any other list of data - and you want to provide the user a one-click button to select (or unselect) all items in the list. A nice added bonus, you want to automatically update the "global" checkbox indicating when all items are checked (and unchecking it when all items are not checked).
This problem can be solved by leveraging a computed observable
. With Knockout.js, computed observables are re-evaluated each time an observable variable changes in the computed function. To avoid a circular reference, a writable computed observable
will be used to force the (un)checking of all items.
This example is using Knockout.js version 3.3; however, it should be compatible with older versions as well.
Read more >
Tags: KnockoutJS | knockoutjs