Lance Larsen - .NET Architect Madison Wisconsin

Archive for June, 2014

imageLove sharing little gems of knowledge – this is a good one for anyone using Entity Framework 5 and the new’ish enumerations (emums) inclusion in EF5. 

So working on a MVC5 Code First application for a project of my own – and had the following Model.

namespace GeoBucketlist.Model
{
    public enum TagType { Location, Bucketlist, Member }

    public class Tag : Base.Model
    {
        public long Id { get; set; }
        [Required]
        [StringLength(25, ErrorMessageResourceType = typeof(ResourceMessages), ErrorMessageResourceName = "LengthMax25")]
        public string Name { get; set; }        
        public string Description { get; set; }
        public TagType TagType { get; set; }
    }
}

When you auto-create the View templates for editing / adding that model in MVC through T4 templates – the html is as follows follows…

<div class="form-group">
    @Html.LabelFor(model => model.TagType, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.TagType)
        @Html.ValidationMessageFor(model => model.TagType)
    </div>
</div>

imageWhich then shows up in your pages as a plain textbox – not a good solution for choosing an enumeration value… :(

So simple but elegant solution is to change that line to the following… (Note, would be lovely if this was the default behavior for the @Html.EditorFor – but alas that is a blog article (and more work) for another day – but if anyone else has that complete, always loved to see great code!)

<div class="form-group">
    @Html.LabelFor(model => model.TagType, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.TagType, new SelectList(Enum.GetValues(typeof(GeoBucketlist.Model.TagType))))
        @Html.ValidationMessageFor(model => model.TagType)
    </div>
</div>

Good coding!

//L2


So AngularJs is pretty sweet – especially considering the power and elegance of how you can use “filters” to change the way values appear in the UI.  There is a built in “number” filter that you can apply to a number value and have it always display a set number of decimal places, i.e. “1″ -> “1.0″  But, we wanted a filter that did the following…

“1.56″ => “1.6″
“1.5″ => “1.5″
“1.0″ => “1″
“1″ => “1″

So I wrote a simple custom filter, setDecmial! 

As I love jsFiddle – here’s the live working version: http://jsfiddle.net/lancelarsen/Tx7Ty/

If anyone has suggestions for further improvements, always love to keep making the code better. :) 

<div ng-app="myApp">
    <div ng-controller="Ctrl">
        setDecimal Filter (1): <span>{{val | setDecimal:1}}</span><br>
        setDecimal Filter (2): <span>{{val | setDecimal:2}}</span><br>
    </div>
</div>

var app = angular.module('myApp', []);

app.filter('setDecimal', function ($filter) {
    return function (input, places) {
        if (isNaN(input)) return input;
        // If we want 1 decimal place, we want to mult/div by 10
        // If we want 2 decimal places, we want to mult/div by 100, etc
        // So use the following to create that factor
        var factor = "1" + Array(+(places > 0 && places + 1)).join("0");
        return Math.round(input * factor) / factor;
    };
});

app.controller('Ctrl', function ($scope) {
    $scope.val = 1.56;
});