In a previous post I talked about creating a push-button style of check box for MVC. This blog post will show how to create the same push-button check box using Web Forms. There are only a few minor differences in the CSS and, of course, in the use of a Web Forms server control.)
I really enjoy working with Bootstrap and extending the styles to match what my customers want. Recently my customer wanted a simple push button style of check box and radio buttons. This turned out to be very easy to accomplish using the built-in Bootstrap styles and just a little extra CSS.)
In my last two blog posts I showed you how to use the bootstrap 'btn-group' class to create check boxes that are a little nicer looking and easier to use on a mobile device. In addition I showed you how to bind check boxes to individual properties on an entity class. In this blog post you will learn how to create a set of check boxes from a collection of entity classes. You will also learn how to retrieve which check boxes were checked by the user and update the appropriate entity class in the collection with these values.)
After the last post on how to create check boxes that use the bootstrap 'btn-group' to modify the look and feel of check boxes, I thought it would be good to show how to bind these check boxes using MVC. After all, you will most likely need to display check boxes based on data from a table.)
The normal HTML check box just does not look good. Yes, bootstrap has a CSS class that will attempt to at least let it render consistently across browsers, but it still is just the default HTML look. In addition, trying to hit a check box on a mobile phone can sometimes be a little challenging. In an MVC project we are doing for a client, they wanted the check boxes to look more like buttons. Since we were already using bootstrap for this project we were able to create our own check boxes using the 'btn-group' class from bootstrap. Let's walk through how we created these.)