MVC Routing fun

by MikeHogg22. October 2012 10:08

I had a very small landing page project request for implementing a few thousand personalized URLs.  From what I knew about MVC routing, I figured it would be an easy task, and it was, but also a nice sample of the power of the new routing engine.


public static void RegisterRoutes(RouteCollection routes)
            routes.Add("purls", new CustomRoute(
 new RouteValueDictionary(new { controller = "Home", action = "getquerystring" }),  // the default will send it to get querystring, and the override GetRouteData will then send it to purl
 new { id = new ActionNameConstraint()} // only if Action not exist
                "NoHome", // set default controller to Home so no /Home/ in url
 new { controller = "Home", action = "Index" } 


This has two extensible features of the MVC routing system- a custom route, and a custom constraint class, rather than just a constraint object.   The custom route is to prepare the purl action, and the constraint is to skip to the next route if an action name already exists for that route (static route).  I wanted to load an array of action names on Application_Startup, but apparently you can no longer access RequestContext that soon in the lifecycle, so I just implemented a lazy readonly Getter for an Application variable like so:


public class GLOBAL
public static string[] HomeActions
 if (_homeactions == null)
                    var controller = ControllerBuilder.Current.GetControllerFactory().CreateController(HttpContext.Current.Request.RequestContext, "Home");
                    var controllerType = controller.GetType();
                    var controllerDescriptor = new ReflectedControllerDescriptor(controllerType);
                    _homeactions = controllerDescriptor.GetCanonicalActions().Select(a => a.ActionName).ToArray();
 return _homeactions;


And then, my constraint just needs to check against the array-



public class ActionNameConstraint : IRouteConstraint
public bool Match(HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection)
 if (values.ContainsKey(parameterName))
 string stringValue = values[parameterName] as string;
 return !GLOBAL.HomeActions.Contains(stringValue);
 return false;


And, if it passes the constraint, our first stop is an action called GetQueryString, to append some utm= keyvalue  pairs for our google analytics, which then redirects to the purl lookup action...


public ActionResult GetQueryString(string id)
            Dictionary<string,object> d = new Dictionary<string,object>();
 return RedirectToAction(id, new RouteValueDictionary(d));
public class GLOBAL
public static System.Collections.Specialized.NameValueCollection QUERYSTRINGOBJECT = HttpUtility.ParseQueryString("utm_source=DM&utm_medium=something&utm_campaign=something"); 

... and that's where our Custom route comes in, simply to check for existance of a querystring, and if so, then changes the action to "purl"...


 public class CustomRoute : Route
public CustomRoute(string url, RouteValueDictionary routevalues, object constraints) : base(url, routevalues, new RouteValueDictionary( constraints ), new MvcRouteHandler()) {}
public override RouteData GetRouteData(HttpContextBase httpContext)
            RouteData routeData = base.GetRouteData(httpContext);
 if (routeData == null) return null;
 if (httpContext.Request.QueryString.Keys.Count > 0) routeData.Values["action"] = "purl";
 return routeData;


The "purl" action is going to do the lookup against 10k urls for this user's viewname, all the while keeping the url that the user typed in their address bar intact, with the addition of the GA querystring.



public ActionResult Purl(string id) 
            Models.PModel pmodel = lib.Repo.GetPModel(id);
 if (String.IsNullOrEmpty(pmodel.ViewName)) return RedirectToAction("NotFound");
 return View(pmodel.ViewName, pmodel);



And that's it.



Using ErrorHandlers and singletons in WCF

by MikeHogg19. September 2012 20:16

I had a COM wrapper that I wrote for a third party interface.  I knew I was going to use it not only in a desktop application, but also in our web application and our vendor’s web application, and also possibly further down the road in a mobile application, so I wrote a WCF web service that implemented my wrapper’s functionality rather than drop that project in multiple solutions. 

Writing the web service is easy enough.  For years in Visual Studio you can just create a WCF Project and figure out some options and add some classes.  For options you choose between NetTcp or Http binding. I have used NetTcp in intranet scenarios, but in this case I needed HttpBinding, so I could choose WS or Basic.  As WS doesn’t easily work with non .Net clients I chose Basic for this case, although I later found out this didn’t help me with my mobile client as I expected. 

The other option you usually always have to figure out is your authentication.  In this case I used basic forms authentication over https, so my service model was really simple.  I have set up services that implemented X509 client certificates, but it can be complicated and this project didn’t need that layer of security. 

<add name="ErrorLogging" type="My.lib.WCF.ErrorHandlerBehavior, Mylib" />
<service name="SomeSN.SomeService">
bindingConfiguration="SSWebBinding" contract="SomeSN.ISomeService"/>
<binding name="SSWebBinding" sendTimeout="00:02:00">
<security mode="TransportWithMessageCredential">
 <message clientCredentialType="UserName"/>
 <userNameAuthentication userNamePasswordValidationMode="Custom"
 customUserNamePasswordValidatorType="Some.CustomPasswordValidator, Some" />
<!-- To avoid disclosing metadata information, set the value below to false and remove the metadata endpoint above before deployment -->
<serviceMetadata httpGetEnabled="false" httpsGetEnabled="true"/>
<!-- To receive exception details in faults for debugging purposes, set the value below to true.  Set to false before deployment to avoid disclosing exception information -->
<serviceDebug includeExceptionDetailInFaults="false"/>
<serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
If I remember right I needed to make MultipleSiteBindingsEnabled in this case for our IIS servers having other webs running. 


You will see at the bottom I added my ErrorHandling behavior, and my custom password validator, which was basically my password interface, in this case pointing just to the config files.

class CustomPasswordValidator : System.IdentityModel.Selectors.UserNamePasswordValidator
public override void Validate(string userName, string password)
 string[] serviceusernames = My.lib.ConfigHelper.GetAppSetting("SOME_USER", (string)null).Split(new char[]{ ';'});//  quick solution to user mgmt assuming we only ever have two users (our website and our vendor's website) and they can share a password
 string servicepassword = My.lib.ConfigHelper.GetAppSetting("SOMe_PASS", (string)null);
 if ( !serviceusernames.Contains(userName) || String.IsNullOrEmpty(password) || !password.Equals(servicepassword) )
 throw new System.ServiceModel.FaultException("Authentication failed."); // this will just get wrapped by a messagesecurityexception an kick em out


The ErrorHandler was an interesting case, as it came up in my testing.  My COM component would fail occasionally, and it was expected to pass meaningful error messages.  I built the wrapper to fail also and pass these messages as exceptions, but when the Web Service would throw exceptions, it would just replace my meaningful messages with a general SOAP exception, and then freeze up the server to more incoming requests, which was very bad.  So I had to figure out a way to preserve those messages (easy if I turn them into messages instead of exceptions but my stack was built to use these exceptions already and this would mean lots of extra code for what I really intended to be exceptional) and not break the service, which wasn’t easy (don’t throw SOAPExceptions).  Here I just implement the Interfaces and the important part is in returning true in HandleError and in creating my MessageFault from my wrapper exceptions in ProvideFault…

public class ErrorHandler : IErrorHandler, IServiceBehavior
public bool HandleError(Exception error)
 // Logger.LogError(error);
 return true;
public void ProvideFault(Exception error, MessageVersion version, ref Message fault)
            FaultException faultException = new FaultException(error.Message);
            MessageFault messageFault = faultException.CreateMessageFault();
            fault = Message.CreateMessage(version, messageFault, faultException.Action);
public void AddBindingParameters(ServiceDescription serviceDescription, ServiceHostBase serviceHostBase, System.Collections.ObjectModel.Collection<System.ServiceModel.Description.ServiceEndpoint> endpoints, System.ServiceModel.Channels.BindingParameterCollection bindingParameters)
public void ApplyDispatchBehavior(ServiceDescription serviceDescription, ServiceHostBase serviceHostBase)
            IErrorHandler errorHandler = new ErrorHandler();
 foreach (ChannelDispatcherBase channelDispatcherBase in serviceHostBase.ChannelDispatchers)
                ChannelDispatcher channelDispatcher = channelDispatcherBase as ChannelDispatcher;
public void Validate(System.ServiceModel.Description.ServiceDescription serviceDescription, System.ServiceModel.ServiceHostBase serviceHostBase)
class ErrorHandlerBehavior : System.ServiceModel.Configuration.BehaviorExtensionElement
public override Type BehaviorType
 return typeof(ErrorHandler);
protected override object CreateBehavior()
 return new ErrorHandler();

With that I could now leave my exceptions as exceptions, and my stack would bubble up as expected, even across WCF to the client, with my meaningful messages, without freezing my channels.

The rest of my Service was simple also, a handful of OperationContracts, not even passing complex classes, except one IEnumerable<MyCustomType>.  And my Server class was also too simple to even post, since it was just a call to my COM wrapper for each web service method.  But the instantiation and initialization of the COM component and the wrapper was time intensive.  It took a few to ten seconds to create it and get it ready for use. So I wanted a way to create the wrapper once, and then use it over and over for each request, so I used a singleton pattern…

// This class is so we can spin up one instance to handle a number of requests at once.
// In practice, it appears IIS will keep it in memory for a short length of time, like for several calls on one page, 
// but it seems to dispose of it after a few minutes.... would like to investigate further...
public sealed class MySingletonWrapper
        MyWrapperClient.AdaptorClient _client;
static MySingletonWrapper _client = null;
static readonly object padlock = new object();
public static MySingletonWrapper Client
 lock (padlock)
 if (_client == null)
                        _client = new MySingletonWrapper();
 return _client;
            _client = GetMyWrapperClient();
/// <summary>
/// initializes and prepares for transactions using properties from config file
/// </summary>
/// <returns></returns>
        MyWrapperClient.AdaptorClient GetMyWrapperClient(string somewireid = null, string anotherid = null, string anybodyskeyid = null)
 string primary = My.lib.ConfigHelper.GetAppSetting("SS_PrimaryUrl", "");
string secondary = My.lib.ConfigHelper.GetAppSetting("SS_SecondaryUrl", "");
 string whatid = My.lib.ConfigHelper.GetAppSetting("SS_MerchantId", "2323232323232323");
 if (String.IsNullOrEmpty(anotherid)) terminalid = My.lib.ConfigHelper.GetAppSetting("SS_TerminalId", "00000000001");
 if (String.IsNullOrEmpty(somewireid)) datawireid = My.lib.ConfigHelper.GetAppSetting("SS_SomeWireId", "12121212121212121212");
 if (String.IsNullOrEmpty(anybodyskeyid)) merchantkeyid = My.lib.ConfigHelper.GetAppSetting("SS_AnybodyskeyId", "2222222");
 string arefnum = My.lib.ConfigHelper.GetAppSetting("SS_ARefNum", "55555555");
 string whatkingkey = My.lib.ConfigHelper.GetAppSetting("SS_WhatKingKey", "88883333888833333888883333338888888333333");
 return new MyWrapperClient.AdaptorClient(primary, secondary, whatidid, anotherid, arefnum, somewireid, anybodyskeyid, WhatKingkey);
public IEnumerable<Transaction> GetTransHistory(string cardnumber, string pin)
            List<Transaction> result = new List<Transaction>();
 foreach (MyWrapperClient.FSSransaction t in _client.GetTransactionHistory(cardnumber, pin)) result.Add(new Transaction(t)); }
 return result;


This sped up my requests to sub-second times, although note where I found in IIS 7.5 there was some automatic memory management going on… something to look into for next time.

More js plugin fun, this time with with google maps

by MikeHogg6. September 2012 09:40

I don't believe I've written this up anywhere and it might be useful to refer to in the future...  I did a rather extensive page in vb aspnet webforms that included mapping several markers on a google map.  Several lessons learned throughout.  Here is the mature code...


I was told to use a ListView control, and they wanted paging, so I hooked up the DataPager control to that, but they wanted the map to show everything in the list, not just the displayed page, so I just included a separate hidden listview, with my required data elements (all of them), no paging.  The data is a list of cars, each with a zip code as the sole location data.  I was to use this limited info to create markers for each car on the map.   Oh and the data was in a foreign language  :)  Everything else about the List should be standard here...


Added to the bottom of the html in this case...

<script language="javascript" type="text/javascript" src=""></script>
 <!-- deploy this script AFTER the maps api-->
 <script language="javascript" src="../_scripts/google-maps-3-vs-1-0.js" type="text/javascript"></script>
 <script language="javascript" type="text/javascript">
var map;
var cars;
var infowindow;
var rollovers = [];
var latlngprocessed = [];
function init() {
var mapOptions = {
    center: new google.maps.LatLng(51.55, 4.28), // default center
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
   map = new google.maps.Map($("#CVMap")[0], mapOptions);
   cars = getAllCars();
   $(cars).each(function () {
if (!latLngAlreadyProcessed(this)) { 
//  it's likely there exists more than one car at a particular latlng
var allmatches = getAllMatches(this);
var image = new google.maps.MarkerImage('../_css/img/org_dwn_arrow.png',
 new google.maps.Size(17, 19),
 new google.maps.Point(0, 0),
 new google.maps.Point(0, 19));
var shadow = new google.maps.MarkerImage('../_css/img/org_dwn_arrow.png',
 new google.maps.Size(40, 19),
 new google.maps.Point(0, 0),
 new google.maps.Point(0, 19));
var shape = { coord: [1, 1, 1, 17, 19, 17, 19, 1],  type: 'poly' };
var marker = new google.maps.Marker({
               map: map,
               position: getGoogleLatLng(this),
               shadow: shadow,
               icon: image,
               shape: shape,
               title: allmatches.length > 1 ? (allmatches.length) + ' cars' : this.titlelink.text
var $rollovercontent = $('<div class="carrollover" id="CarRollover"><h1></h1><ul></ul></div>');
           $.each(allmatches, function (idx, val) {
 var $item = $('<li></li>').html($(val.titlelink).clone())
        , $title = $('h1', $rollovercontent);
 if ($title.text() == '') {
                   $title.text('Cars in ' + val.location);
               $('ul', $rollovercontent).append($item);
// closure and a separate array of rollovercontent needed here, because there is only one infowindow per map
var i = rollovers.length; // get before push so we have index for closure below
           google.maps.event.addListener(marker, 'mouseover', (function (mark, idx) {
 return function () {
         , mark);
                   $('#CarRollover').parent().css('overflow-x', 'hidden');
 setTimeout(function () {
                       $fix = $('#CarRollover').parent().parent();
                       $fix.css({'top' : '28px'});
                   }, 200);
           })(marker, i));


The closure is nothing more than creating distinct function instances on the fly for each rollover, since google maps only have one InfoWindow, we need to replace the content of it with that particular marker's info.  Also we merge info so a marker with several cars sharing the same zip code would show as a list of links.

The rest is just some standard helper jQuery-fu functions.


function centerMap(allmatches) { // to first in resultslist
if ($.grep(allmatches, function (v) { return v.index == 0; }).length > 0) {
function createInfoWindow() {  // if not already created (google says only one per map)
if (!infowindow) {
          infowindow = new google.maps.InfoWindow({
              maxWidth: 400
function getAllCars() { 
var titlelinks = $("#hiddenformap .nameformap");
var descriptions = $("#hiddenformap .shortdescriptionformap").map(function () { return $(this).text(); }).get();
var locations = $(".hiddenlocationformap").map(function () { return $(this).text(); }).get();
var latlngs = $(".hiddenlatlngformap").map(function () { return $(this).text(); }).get();
var result = [];
      $.each(latlngs, function (idx, val) {
if (val != '') {
                        'index': idx,
                  'location': locations[idx],
                  'latlng': val,
                  'titlelink': titlelinks[idx],
                  'description': descriptions[idx]   });
return result;
function getAllMatches(car) {
return $.merge($.grep(cars, function (c) { return car.latlng == c.latlng && c != car; }), [car]);
function getGoogleLatLng(car) {
return new google.maps.LatLng(car.latlng.split(",")[0], car.latlng.split(",")[1]);
function getStringFromJqueryObject(obj) {
return $('<div>').append($(obj).clone()).html();
function latLngAlreadyProcessed(car) {
 var result = $.grep(latlngprocessed, function (ll) {
 return ll == car.latlng;
            }).length > 0;
 if (result == false) { latlngprocessed.push(car.latlng); }
 return result;
One other thing to mention was that I was querying google for latitude and longitude and storing it server side, so as not to pound their geolocation service, as they requested in terms of service and by applying a few different limits.  So rather than sending zipcode (if you read the code above notice it should not send zip) it sends latlng which it already has.  Here is the server side code for google's geo service (note my XML library calls, which I now replace with 3.5 xml literals [yay] since I just found out about them)...



Private Function GetGoogleLatLng(ByVal c As Car, ByVal trynumber As Int16) As String
Dim url As String = String.Format("{0}", HttpUtility.HtmlEncode(j.FunctionLocationPostalCode))
Dim x As XDocument = XDocument.Load(url)
Dim s As XElement = x.Descendants("status")(0)
If s Is Nothing Then
 Return String.Empty
End If
If s.Value = "OVER_QUERY_LIMIT" And trynumber < 4 Then
            System.Threading.Thread.Sleep(500) ' this sucks but what else can I do, actually it works well with google
            trynumber += 1
 Return GetGoogleLatLng(c, trynumber)
End If
Dim e As XElement = x.Descendants("geometry").Elements("location")(0)
If Not e Is Nothing Then
 Return String.Format("{0},{1}", Xml.GetField(e, "lat", 25), Xml.GetField(e, "lng", 25))
Else : Return String.Empty
End If
End Function 





Want intellisense for your google. namespace?


I added this to the top of my usercontrol above


<% #if (false) %>
 <script src="../_scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<% #endif %>

Urls are not strings

by MikeHogg2. September 2012 09:39

The idea occurred to me recently, that in a web project, if I do a ctrl F for "http://" and find anything that wasn't a third party link, then I might want to take a look at the way I perceive Urls.  There are two main concepts that occur to me at the same time.  The first is that my web project should be able to replicate every feature on every environment (with blue moon exceptions) including on my local machine in debug mode.  So easy stuff like every link should work, and I shouldn't have to worry about clicking any links in special places that might take me to, for instance, the production version of the site.  The Second premise for this, is that I remember reading through some .net framework intellisense, and finding that Uri is a full fledged class (not just another string), so the capability exists to do much more with it, and in web/mvc projects, links seem to me to be more than just strings, they are like... method calls if you will, on controller actions.


How would I go about using this idea?  On Application Startup, set a static HOSTNAME, PORT, SCHEME, whatever you intend to do with links, from webconfig (post transform), and then craft your Uris with that, handling specific ports (are you setting Cassini to use the same port on debug? there is a use for that).  the UriBuilder let's you craft every part of the url dynamically, instead of having to use one long hard coded string over and over. Wrap the specific functionality you need in a static class (one or two methods like GetSSLUrl(pathname) and GetNonSSLUrl(pathname)) and you can go back to writing one liners for your links, and even use them in razor templates. There is just so much in the Uri class that you should be able to handle all kinds of situations, with strong typed code, and have everything testable, 'inside the box', meaning write it once and never have to worry about it again.  "Will those links work on that page?"  "Will they work on that server?"  "when I change X, when I turn on SSL, when I send them in an email, when I publish to a new build server?"  Promote your hardcoded links to Uri's and - write it once and never have to worry about it again.


Migrating to your UAT host should be painless and all the links will now magically point to httporhttpsScheme://myuathost/:optionalport/urlstringhere.whatever.ext and migrating to your production host should be the same.  Want to set up a third environment to test some branch?  Just add the transforms.


by MikeHogg25. August 2012 12:18



LINQ is fantastically powerful. It has changed the way I approach almost every problem now in .net, from loosely typed collections like DataTables, and DataRows (only need these for interfaces now), to strong typed classes and IEnumerables, for dynamic filtering and creation of new collections with Lambdas.  Very powerful stuff.

But still I have found myself, a few times, passing a collection to a long list of methods, where in each one I pull a subset of objects that match a certain filter, over and over with each method doing just about the same thing, except for a different filter on the collection.  This time, I wanted to get closer to implementing the dynamic predicate (I think new in 4.0?), in a baby step, by passing the predicate as an argument. 

So where I initially did something like this:




IEnumerable<ACME_WEB.Models.FooEvent> events = ACME_WEB.lib.Repository.GetFooEvents();
            List<ACME_WEB.Models.FooEvent> _emailedevents = new List<ACME_WEB.Models.FooEvent>();




And then had six-plus methods following, all doing the same thing for different .Where(a=>a.lambdas).  Instead, I replaced it with one method, and the six calls just pass the lambdas:

IEnumerable<ACME_WEB.Models.Foo> foos = ACME_WEB.lib.Repository.GetFoos();
    List<ACME_WEB.Models.FooNote> _emails = new List<ACME_WEB.Models.FooNote>();
    _emails.AddRange(GetNotes(foos, ACME_WEB.Models.NoteType.Fee,
new Func<ACME_WEB.Models.Foo, bool>(
            f => f.HasFee == false && f.TypeId == ACME_WEB.lib.CONST.FEETYPEID &&
             f.Events.Count(e => e.EventTypeId == ACME_WEB.lib.CONST.FUNID &&
                            e.StartDate == DateTime.Now.Date.AddDays(10)) > 0)));
    _emails.AddRange(GetNotes(foos, ACME_WEB.Models.NoteType.Pho,
new Func<ACME_WEB.Models.Foo, bool>(
           f => f.HasPho == false && f.TypeId == ACME_WEB.lib.CONST.PHOID &&
            f.Events.Count(e => e.EventTypeId == ACME_WEB.lib.CONST.FUNID &&
                            e.StartDate == DateTime.Now.Date.AddDays(1)) > 0)));
// … and then, the single method
private static List<ACME_WEB.Models.Note> GetNotes(
         IEnumerable<ACME_WEB.Models.Foo> allfoos, 
         ACME_WEB.Models.NoteType notetype,
         Func<ACME_WEB.Models.Foo, bool> predicate)
            var emails = from ACME_WEB.Models.Foo d
 in System.Linq.Enumerable.Where(allfoos, predicate)
                         select new ACME_WEB.Models.Note(f, notetype);
 // and that’s it



A More Mature User (model)

by MikeHogg12. August 2012 09:52

My MVVM and MVC User models have usually been a hierarchy of different classes starting with the simplest name/password and adding more properties with each inherited subclass. 


(Side Note: I've noticed a tendency to add more properties to different versions of subclasses can get out of hand, mucking up a membership provider, when mixed with Roles, when what is really called for is a Profile provider for all those descriptive properties.  See Decorate Pattern and MS ProfileProvider.)




This time a client requirement surprised me by making even username/password optional, which I've never done.  As a matter of fact, most of my user hierarchy was built to support the base class of required properties using MVC DataAnnotation Required Attributes.  So


I rewrote it as one base User with no requireds, and then various subclasses more like ViewModels.  Also I Interfaced the User and changed all my Membership and Repository arguments to the interface.  Now this pattern seems much more flexible, simple, and easily extensible.  Don't know why I didn't see this before.



public interface IUserModel
int Id { get; set; }
string EmailAddress { get; set; }
string Password { get; set; } 
bool Active { get; set; }
string FirstName { get; set; }
string LastName { get; set; }
string PhoneNumber { get; set; }
bool GetsEmail { get; set; }
        IEnumerable<RoleModel> Roles { get; set; }
public class UserModel : IUserModel
public int Id { get; set; }
        [Display(Name = "Email Address")]
public virtual string EmailAddress { get; set; }
        [Display(Name = "Password")]
public virtual string Password { get; set; }
        [Display(Name = "Active")]
public bool Active { get; set; }
        [Display(Name = "First name")]
public virtual string FirstName { get; set; }
        [Display(Name = "Last name")]
public string LastName { get; set; }
        [Display(Name = "Phone Number")]
public string PhoneNumber { get; set; }
        [Display(Name = "Gets Emails?")]
public bool GetsEmail { get; set; }
        [Display(Name = "Roles")]
public IEnumerable<RoleModel> Roles { get; set; }
public class LogOnModel : UserModel
        [Display(Name = "Email Address")]
public override string EmailAddress { get; set; }
        [Display(Name = "Password")]
public override string Password { get; set; }
public class RegisterModel : LogOnModel
        [Required(ErrorMessage = "Please enter a first name")]
public override string FirstName { get; set; }
        [Display(Name = "Confirm Password")]
public string PasswordConfirm { get; set; }
public class ChangePasswordModel : UserModel
        [Display(Name = "Old Password")]
public string OldPassword { get; set; }
        [Display(Name = "Password")]
public override string Password { get; set; }
        [Display(Name = "Confirm Password")]
public string PasswordConfirm { get; set; }
public class FoundPasswordModel : UserModel
public override string EmailAddress { get; set; }
        [Display(Name = "Password")]
public override string Password { get; set; }
        [Display(Name = "Confirm Password")]
public string PasswordConfirm { get; set; }
public class ValidatedUserModel : UserModel
        [Required]        [StringLength(255)]
        [MyLibrary.Web.Mvc3.Attributes.EmailAddress] public override string EmailAddress { get; set; }
        [Required(ErrorMessage = "Please enter a first name")]
public override string FirstName { get; set; }
public ValidatedUserModel() { }
public ValidatedUserModel(IUserModel user)
            Active = user.Active;
            EmailAddress = user.EmailAddress;
            FirstName = user.FirstName;
            GetsEmail = user.GetsEmail;
            Id = user.Id;
            LastName = user.LastName;
            PhoneNumber = user.PhoneNumber;
            Roles = user.Roles;

Best of Datagrid plugins for web

by MikeHogg12. August 2012 09:43

After researching several datagrid mechanisms for mvc3 web page, looking for powerfule filtering and sorting and paging built in, I went with actually a javascript implementation called SlickGrid.


There was another js grid actually that got very positive reviews also.  I think there was a SO question asking for reviews but it's been a while since I did this research and I don't remember the name or why I chose this one over the others, or over .net controls.  I just want to document how I used it for the future. It offers powerfully fast sorting paging and even As You Type filtering on datasets upwards of 100k I am told, and believe, although I have not had need to use it for more than an order of hundreds yet.


besides adding the source (i use slick.core, .dataview, .formatters (might be mine), and .pager) to your project, you init the grid like any other plugin.  You set your Columns and options.  Columns here is the important point.


<link href="@Url.Content("~/Content/slick.grid.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/slick.pager.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/js/jquery.event.drag-2.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/slick.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/slick.grid.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/slick.dataview.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/slick.formatters.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/slick.pager.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/json2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/slick.mylib.js")" type="text/javascript"></script>
<script type="text/javascript">
var columns = [
     { id: "Name", name: "Name", field: "Name", width: 140, sortable: true },
                    { id: "Email", name: "Email", field: "Email", width: 140, sortable: true }, 
     { id: "Type", name: "Type", field: "Type", sortable: true }, 
                    { id: "Title", name: "Title", field: "Title", width: 150, sortable: true },
                    { id: "RequestDate", name: "Request Date", field: "RequestDate", formatter: Slick.Formatters.Date, filter: false, sortable: true },
                    { id: "DueDate", name: "Due Date", field: "DueDate", formatter: Slick.Formatters.Date, filter: false, sortable: true },
                    { id: "AnotherDueDate", name: "Another Due Date", field: "AnotherDueDate", formatter: Slick.Formatters.Date, filter: false, sortable: true },
                    { id: "Details", name: "Details", field: "Id", filter: false,
                        formatter: function (row, cell, value, columnDef, dataContext) {
 return '<a href="/Home/ViewDetails/' + dataContext['Id'] + '">Details</a>';  }   },
                    { id: "selector", name: "Has Approval", field: "HasApproval", formatter: Slick.Formatters.Checkmark, cssClass: "centered", filter: false, sortable: true },
                    { id: "HasDeadline", name: "Has Deadline", field: "HasDeadline", formatter: Slick.Formatters.Checkmark, cssClass: "centered", filter: false, sortable: true },
                    { id: "AddFiles", name: "Add Files", field: "HtmlUploads", cssClass: "icons centered", filter: false,
                        formatter: function (row, cell, value, columnDef, dataContext) {
 return '<span class="add-files" data-for="#add-files-text-' + dataContext['Id'] + '">Add</span>' +
                            '<span id="add-files-text-' + dataContext["Id"] + '" class="add-files-text">' +
                            value + '</span>'; }   },
                    { id: "HasCapital", name: "Has Capital", field: "HasCapital", cssClass: "centered", filter: false, sortable: true, formatter: Slick.Formatters.Checkmark },
                    { id: "DownloadFiles", name: "Download", field: "HtmlDownloads", width: 80, filter: false, formatter: function (row, cell, value, columnDef, dataContext) {
 return '' + value; }   }
 var options = {
                    enableColumnReorder: false,
                    forceFitColumns: true,
                    defaultColumnWidth: 60,
                    autoHeight: true,
                    rowHeight: 60,
                    showHeaderRow: true,
                    headerRowHeight: 37
<h2>Welcome to the Mike Hogg Something Manager</h2>
<div class="text clearfix">
    <div class="button-cluster centered wide clearfix">
        @Html.ActionLink("Submit New Something", "NewSomething", null, null, new { @class = "btn" })
        @Html.ActionLink("View Calendar", "Index", "Calendar", null, new { @class = "btn" })
    <br />
    <p>Below is a list of submitted somethings currently in your queue. To upload a xyz or abc file, select your something and click on the "Add File" icon. You can also sort the somethings by clicking on the column header, or filter by typing in  stuff</p>
    <input type="hidden" id="message" value="used in getExport() above"/>
    <div id="myGrid"></div>
    <div id="myPager"></div>


And then in your js you set up your ajax method to get the json that populates the column, and sets the data to a placeholder control on your page.  I think leiberman builds the sort event into the grid, but you need to write your own comparers, so mine is here.  I think the basic filter was included but needs to be extended for your needs.  I had a need for escaping HTML and found the escape map also on S.O.



var grid;
var sortcol = "RequestDate";
var sortdir = -1;
var columnFilters = {};
var dataView = new Slick.Data.DataView({ inlineFilters: true });
dataView.setPagingOptions({ pageSize: 8 });
// my freshmen filter
function filter(item) {
for (var columnId in columnFilters) {
if (columnId !== undefined && columnFilters[columnId] !== "") {
 var c = grid.getColumns()[grid.getColumnIndex(columnId)];
 //if (item[c.field] != columnFilters[columnId]) {
 var field = item[c.field], myfilter = columnFilters[columnId];
 if (field != null && myfilter != null) {
 if (field.toString().toLowerCase().indexOf(myfilter.toString().toLowerCase()) == -1) {
 return false;
            } else { return field == myfilter; }
return true;
// my freshmen attempt at comparer (for SORT)
function comparer(a, b) {
var x = isNaN(a[sortcol]) ? a[sortcol].toLowerCase() : a[sortcol];
var y = isNaN(b[sortcol]) ? b[sortcol].toLowerCase() : b[sortcol];
if (x == null || x == "") {
if (y == null || y == "") {
 return 0;
else return -1;
else if (y == null || y == "") return 1;
else return (x == y ? 0 : (x > y ? 1 : -1));
var entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
function escapeHtml(string) {
return String(string).replace(/[&<>"'\/]/g, function (s) {
return entityMap[s];


We had some cute image links for a popup menu in one of the cells but as you scroll and page through the grid, they needed to be recreated as this grid implementation actually dropped and added rows on and off the dom on the fly, so LoadButtons ...


// for those pencil icon popup menus for Add Files
function loadButtons() {
        autoOpen: false,
        title: "Add Files"
        icons: { primary: 'ui-icon-pencil' },
        text: false
    $(".add-files").click(function () {
return false;
// adds those filters to each column, special here to not add for certain columns, extended by 'filter:'
function updateHeaderRow() {
for (var i = 0; i < columns.length; i++) {
var header = grid.getHeaderRowColumn(columns[i].id);
if (columns[i].id !== "selector" && columns[i].filter != false) {
            $("<input type='text'>")
                    .data("columnId", columns[i].id)
        } else {
            $("<div><span style='height:39px;display:block;'></span></div>").appendTo(header);
if (grid.getOptions()["excelExport"] == true) {
// add Excel button
var header = grid.getHeaderRowColumn(columns[columns.length - 1].id);
        $("<input type='image' src='../Content/img/Excel-icon.png' title='Export to Excel' onclick='getExport();'/>").appendTo(header);
function getExport() {
        url: '/Home/DeploymentList',
        type: "post",
        data: JSON.stringify(dataView.getFilteredRows()),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (result) { getCSVFileFromFormPost(result); },  // ajax post json data which server can read automatically, responds with a string, which ajax then POSTs inside a FORM, to which the server adds headers and returns, so browser can treat it as a download (save/open)
        error: function (xhr, textStatus, errorThrown) {
            $("#message").html('Error occurred, ReadyState: ' + xhr.readyState +
                '; textStatus: ' + textStatus + '; ' + errorThrown);
return false;
function getCSVFileFromFormPost(result) {
    $('<form action="/Home/GetCSVFile" method="post"><input type="hidden" name="csv" id="csv" value="' + escapeHtml(result) + '" /></form>').appendTo("body").submit();


The Export to CSV function was a neat one, since we could send the dataset back to the server in json easily, and in MVC we could set up an Action to Deserialize that same json to a List of Models if we lined everything up right.


And "the call"...


$(function () {
    $.post('/Home/GetDepData', function (data, textstatus) {
        grid = new Slick.Grid("#myGrid", dataView, columns, options);
var pager = new Slick.Controls.Pager(dataView, grid, $("#myPager"));
        grid.onSort.subscribe(function (e, args) {
            sortdir = args.sortAsc ? 1 : -1;
            sortcol = args.sortCol.field;
 if ($.browser.msie && $.browser.version <= 8) {
 // using temporary Object.prototype.toString override
 // more limited and does lexicographic sort only by default, but can be much faster
                dataView.fastSort(sortcol, args.sortAsc);
            } else {
 // using native sort with comparer
 // preferred method but can be very slow in IE with huge datasets 
                dataView.sort(comparer, args.sortAsc);
// wire up model events to drive the grid
        dataView.onRowCountChanged.subscribe(function (e, args) {
            loadButtons();// when filtered to fewer rows than before and no rows were changed
        dataView.onRowsChanged.subscribe(function (e, args) {
            loadButtons();// when filtered or paged
        dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
 var isLastPage = pagingInfo.pageNum == pagingInfo.totalPages - 1;
 var enableAddRow = isLastPage || pagingInfo.pageSize == 0;
 var options = grid.getOptions();
        $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
            columnFilters[$(this).data("columnId")] = $.trim($(this).val());
// initialize the model after all the events have been hooked up
        dataView.setItems(data, "Id");// Id capital I to match my unique model id property
    }, "json");


At the end of the included slick.formatters.js I added a couple of my own, the javascript time function being a keeper...


function YesNoFormatter(row, cell, value, columnDef, dataContext) {
return value ? "Yes" : "No";
function CheckmarkFormatter(row, cell, value, columnDef, dataContext) {
return value ? "<img src='../Content/img/slickimages/tick.png'>" : "";
function DateFormatter(row, cell, value, columnDef, dataContext) {
if (value !== null) {
 var d = new Date(parseInt(value.substr(6, 13)));
 return (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear() + ' ' + getAMPMTime(d);
        } else return "";
Number.prototype.pad = function (len) {
return (new Array(len + 1).join("0") + this).slice(-len);
function getAMPMTime(d) {
var d = new Date(d);
var hour = d.getHours();
var min = d.getMinutes().pad(2);
var ap = "AM";
if (hour > 11) { ap = "PM"; }
if (hour > 12) { hour = hour - 12; }
if (hour == 0) { hour = 12; }
if (hour == 12 && min == 0 && ap == "AM") return '';
return hour + ':' + min + ' ' + ap;

CheckboxLists in MVC3

by MikeHogg2. August 2012 09:48


MVC does not really model bind checkboxes. The problem is html based; input checkboxes do not post in the form unless actually checked. MVC gets around this with their helper by creating a hidden for every checkbox, and I assume unobstrusively sets the hidden input whenever the associated checkbox is toggled.


This means that we cannot validate the checkbox as required, which isn't an easy case anyway since a bool defaults to false. It’s not a nullable type.  And we can't readily access the hidden input to validate that.  People have created several roll-your-own extensions and helpers out there… but I couldn’t find one that fit my needs exactly.


My main requirement was a list of boxes (a grouping so to speak) requiring at least one to be checked. With client validation (most examples on the web missed this one).  SO I found myself a little library project.


Two parts to this-

  • - [In your Model]: add your list of checkboxes like this: IEnumerable<MH.Mvc.Checkbox> { new {Name="Bank"} new {Name="Stocks", IsChecked?="true"}}
    • decorate your checkboxlist with [MH.Attributes.CheckBoxListServerValidator], and you will get server validation that at least one box is checked
    • In your View, use the HtmlHelper.CheckBoxListFor(m=>m.checkboxlist) which gives you the proper model binding
  • - [In your Model]: add a bool named something like this: CheckboxClientValidator
    • decorate your bool with [MH.Attributes.CheckBoxListClientValidator(listname)], and
    • add the MH/Content/scripts/custom-validators js to your page and you will get client side validation that at least one box is checked

Here is what my Model looks like:



public bool LiquidAssetClientValidator { get; set; } 
        [Display(Name = "Where do you have your liquid assets? (Check all that apply.)*")]
public IEnumerable<MH.Web.Mvc3.Models.CheckBox> LiquidAssetSourceList { get; set; }


In my Model constructor (isn't that where all lists should get instantiated?) I create the actual checkboxes



LiquidAssetSourceList = new List<MH.Web.Mvc3.Models.CheckBox>
                { new MH.Web.Mvc3.Models.CheckBox{ Name = "Bank" },
 new MH.Web.Mvc3.Models.CheckBox{ Name = "Stocks" },


... and Here is what my View looks like:


@Html.LabelFor(model => model.LiquidAssetSourceList)
Here's the simple checkbox object:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace MH.Models
public class CheckBox
public int ID { get; set; }
public string Name { get; set; }
public bool IsChecked { get; set; } 


And the HtmlExtension:

public static System.Web.Mvc.MvcHtmlString CheckboxListFor<TModel, TProperty>(this HtmlHelper<TModel> html,
            Expression<Func<TModel, TProperty>> checkboxlist, object htmlattributes = null)
             where TProperty : IEnumerable<Models.CheckBox>
            MemberExpression body = checkboxlist.Body as MemberExpression;
 string checkboxlistname = body.Member.Name;
            //Get currently selected values from the ViewData model
            IEnumerable<Models.CheckBox> cbs = checkboxlist.Compile().Invoke(html.ViewData.Model);
            StringBuilder sb = new StringBuilder();
            int idx = 0;
            foreach (Models.CheckBox cb in cbs)
 string id = String.Format("{0}_{1}__IsChecked", checkboxlistname, idx);
 string name = String.Format("{0}[{1}].IsChecked", checkboxlistname, idx);
                TagBuilder itemdiv = new TagBuilder("div");
                TagBuilder label = new TagBuilder("label");
                label.MergeAttribute("for", id);
                label.InnerHtml = cb.Name;
                itemdiv.InnerHtml += label.ToString(TagRenderMode.Normal);
                TagBuilder inputcheck = new TagBuilder("input");
 if (cb.IsChecked) inputcheck.MergeAttribute("checked", "checked");
                inputcheck.MergeAttribute("type", "checkbox");
                inputcheck.MergeAttribute("id", id);
                inputcheck.MergeAttribute("name", name);
                inputcheck.MergeAttribute("value", "true");
                itemdiv.InnerHtml += inputcheck.ToString(TagRenderMode.Normal);
                TagBuilder hiddencheck = new TagBuilder("input");
                hiddencheck.MergeAttribute("type", "hidden");
                hiddencheck.MergeAttribute("name", name);
                hiddencheck.MergeAttribute("value", "false");  // input checkboxes only post if checked, so we default to hidden with same id... mvc only takes first input of each id
                itemdiv.InnerHtml += hiddencheck.ToString(TagRenderMode.Normal);
                TagBuilder hiddenname = new TagBuilder("input");
                hiddenname.MergeAttribute("type", "hidden");
                hiddenname.MergeAttribute("name", String.Format("{0}[{1}].Name", checkboxlistname, idx));
                hiddenname.MergeAttribute("value", cb.Name);
                itemdiv.InnerHtml += hiddenname.ToString(TagRenderMode.Normal);
                TagBuilder hiddenid = new TagBuilder("input");
                hiddenid.MergeAttribute("type", "hidden");
                hiddenid.MergeAttribute("name", String.Format("{0}[{1}].ID", checkboxlistname, idx));
                hiddenid.MergeAttribute("value", cb.ID.ToString());
                itemdiv.InnerHtml += hiddenid.ToString(TagRenderMode.Normal);
            TagBuilder div = new TagBuilder("div");
            div.MergeAttribute("id", checkboxlistname);
            div.MergeAttribute("name", checkboxlistname);
            div.MergeAttributes(new System.Web.Routing.RouteValueDictionary(htmlattributes));
            div.InnerHtml = sb.ToString();
 return new System.Web.Mvc.MvcHtmlString(div.ToString(TagRenderMode.Normal));

The attribute for the validator:


Namespace Attributes{
public class CheckBoxListServerValidator : ValidationAttribute
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
 if (value != null) 
 if ((value as IEnumerable<Euro.Web.Mvc3.Models.CheckBox>).Any(l => l.IsChecked)) return ValidationResult.Success;
 return new ValidationResult("Please select an option.");
    [AttributeUsage(AttributeTargets.Property)]  // validon bool? i dont think it matters
public class CheckBoxListClientValidator : ValidationAttribute, IClientValidatable
public string ListName { get; set; }
public CheckBoxListClientValidator(string listname)
            ListName = listname;
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
 return ValidationResult.Success;
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
            ModelClientValidationRule rule = new ModelClientValidationRule()
                    ValidationType = "requiredcheckbox", // "requiredcheckbox" used in jquery
                    ErrorMessage = "Please select at least one"
            rule.ValidationParameters.Add("listname", ListName);
 return new[] { rule };

and the js for the validator:

In custom-validators.js
/// (do not put validators inside document.ready)
/// these two are for MH.Attributes.CheckBoxListClientValidator 
 function (value, element, parameters) {
 return $("#" + parameters.listname + " input:checked").length > 0;
$.validator.unobtrusive.adapters.add("requiredcheckbox", ["listname"], function (options) {
    options.rules["requiredcheckbox"] = options.params;
    options.messages["requiredcheckbox"] = options.message;



Static Repositories (vs Instance)

by MikeHogg30. July 2012 10:10

I find for small projects that I always used to create static repositories.  It can be a speedy mechanism to develop with, and I probably took the lead from MS' Membership classes and their treatment of Membership classes, plus years of working against Oracle databases when no .Net ORM existed that would go against Oracle...


I like static because I use them to return typed collections, and they, with linq if necessary, provide easy one liners in most cases where I interface with data access, and don't need to cache or watch my calls for performance, like in Web sites. But, in web cases, note that on each POST or GET, you are recreating all objects anyway, so I would just add predicate calls to static repo.  Here's what many of my repo Getxxx methods look like:



internal static IEnumerable<Models.FileModel> GetFileModels(string username = null)
            List<SqlParameter> parms = new List<SqlParameter>();
            parms.Add(new SqlParameter("@EmailAddress", username));
            IDataReader r = DatabaseHelper.GetDataReader("sp_GetFileModels", parms);
            DataTable t = new DataTable();
            var result = from DataRow row in t.Rows
                         select new Models.FileModel
                             Id = Convert.ToInt32(row["Id"]),
                             RequestDate = DateTime.Parse(row["RequestDate"].ToString()),
                             TitleName = row["TitleName"].ToString(),
                             SomethingId = Convert.ToInt16(row["SomethingId"]),
                             SomethingTypeId = Convert.ToInt16(row["SomethingTypeId"]),
                             FileName = row["Name"].ToString(),
                             FileTypeId =  Convert.ToInt32(row["FileTypeId"]),
                              FileTypeName = row["FileTypeName"].ToString(),
                              ContentEncoding = row["ContentEncoding"].ToString(),
                              ContentLength = Convert.ToInt32(row["ContentLength"]),
                             ActiveFlag = Convert.ToBoolean(row["ActiveFlag"]),
                             EnabledFlag = Convert.ToBoolean(row["EnabledFlag"]),
                             SomeCompanyName = row["SomeCompanyName"].ToString(),
                             SomeNumber = row["SomeNumber"].ToString(),
                             EstimatedNumberOfSomethings = MH.lib.DatabaseHelper.ConvertDBNullsToNInt(row["EstimatedNumberOfSomethings"]),
                             EstimatedDeadline = Convert.IsDBNull(row["EstimatedDeadline"]) ? new DateTime() : DateTime.Parse(row["EstimatedDeadline"].ToString()),
                             FinalDeadline = DateTime.Parse(row["FinalDeadline"].ToString()),
                             ActivityDate = DateTime.Parse(row["ActivityDate"].ToString()), 
 return result;



And then in my business layer I simply Getxxx and if I need a single or a filtered set I simply add a linq predicate.



model = lib.Repository.GetFileModels(UserNameOrNullIfAdmin()).FirstOrDefault(f =>
                    f.SomethingId == somethingid &&
                    (f.FileTypeId == filetypeid || ( filetypeid == 0 && f.SomethingTypeId == lib.CONST.ACONSTANTID &&// in case of xyz filetypeid arg is zero
                                                        (f.FileTypeId == lib.CONST.SOMECONSTANTID || f.FileTypeId == lib.CONST.ANOTHERCONSTANTID)))
                    && f.ActiveFlag == true);
 if (model == null)
                    Models.Something s = lib.Repository.GetSomethings(UserNameOrNullIfAdmin(), somethingid).FirstOrDefault();
                    model = new Models.FileModel
                      SomethingId = somethingid,
etc., etc.


I know this isn't pushing my predicate all the way to the database like Entity Framework so it is something to watch for.  In my experience, most small cases can get to the order of several hundreds of business objects and only require light attention to performance.  And this handles most non-business related applications.


But most of the MVC framework codebases and examples I have seen out there that is shared or posted on blogs, happen to use the instance repository pattern... And I hate not knowing Why something is the way it is, so … what are the reasons NOT to use static Repos?


I searched for a while, but I only found maybe one informative post, with a couple good answers.


It makes a lot of sense.  Instantiated Repositories can be mocked, and your front layers tested.  That is the number one reason.  I'm not sure that instantiation is a requirement for caching, but it makes sense if you are getting into a site that large.  Second reason – for me this is a big one – is that you can use the inheritance and interfaces to practice DRY and the Repository pattern and not have to write all of your boilerplate data access code in each repository. 


The first point speaks to testing, and I haven't seen or heard of any local developers who work at a place that actually promote unit tests.  But I do on occasion in some of my projects, and it helps my writing style.  Food for thought...


by MikeHogg5. July 2012 09:49


On my third web project, I got the opportunity to dive into jquery a little more.   We were rewriting an existing site in MVC3.  One of my tasks was to reproduce a standard sort of “Locations” page.  I had some javascript to work from, but we were adding a new “Location Features” feature, and a GPS feature, and the existing javascript wasn’t in any shape to be extended.  I only needed a small form, and my only server side code, my Location Features MVC3 call, was a three liner LINQ query against an Entity Framework db, so most of the task was my opportunity to rewrite some old mess of long cryptic javascript function into jquery, and figuring out a good readable, maintainable code flow.    In the first page here you will see my standard style of using the MVC model binding, even for two properties, and a very short clean page of html, with my CSS file referenced in the beginning, and my JS file referenced at the end.




@model SomeBase.Models.LocatorModel
<link rel="stylesheet" href="@Url.Content("~/Content/css/locator.css")">
<div class="locatordiv">
    @using (Html.BeginForm("Locator", "Home", FormMethod.Post, new { id = "locator" }))
        <p>  Enter a city and state, or zip code below.</p>
        @Html.HiddenFor(m => m.Gps)
        @Html.TextBoxFor(m => m.Zip, new { title = "Enter ZIP", @Class = "textbox" })
        <input type="submit" value="" class="findbutton" data-category="Find" data-event="Homepage Zipcode" />
        <a href="#" class="gpsbutton" onclick="do_geo();" title="GPS" data-category="Find" data-event="GPS"></a>
        <div id="gpsloading">Working ...<br /><img src="@Url.Content("~/Content/images/load-bar.gif")" /></div>
<div id="maploading">
    <img src="@Url.Content("~/Content/images/load-circle.gif")" />
<div id="results"></div>
<div id="mapDiv"></div>
<script type="text/javascript">
 var configMQAPIKey = '@Html.Raw(System.Configuration.ConfigurationManager.AppSettings["MQ:APIKey"].ToString())';
 var configMQOLOKey = '@Html.Raw(System.Configuration.ConfigurationManager.AppSettings["MQ:OLOKey"].ToString())';
 var configMQHostedDataTable = '@Html.Raw(System.Configuration.ConfigurationManager.AppSettings["MQ:HostedDatatable"].ToString())';
        <script src='//["MQ:APIKey"].ToString())'></script>
        <script src="@Url.SomeContent("~/Content/js/locator.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Content/js/jquery.cookie.js")" ></script>

The javascript wasn’t terribly complicated, but it was fun to get deeper into jquery and learn to use standard jquery element creation and manipulation methods, and the unobstrusive javascript pattern, as opposed to the old verbose javascript getelementById calls.   Here you will see my style of paying special attention to method and variable names, in place of comments.  I was taught that comments should be for WHY not WHAT, and if you name your objects clearly enough, you don’t need to comment WHAT you are doing.



function searchByGps() {
    $("#Zip").val(""); $("#Key").val("")
    search("" +
                    "?key=" + mq_key + "&radius=" + $("#inradius").val() + "&callback=processPOIs&maxMatches=" + inmatch +
           "&origin=" + encodeURIComponent($("#Gps").val()) + "&hostedData=" + intable);
function searchByZip() {
    $("#Gps").val(""); $("#Key").val("")
    search("" +
                    "?key=" + mq_key + "&radius=" + $("#inradius").val() + "&callback=processPOIs&maxMatches=" + inmatch +
           "&origin=" + encodeURIComponent($("#Zip").val()) + "&hostedData=" + intable);
function search(url){
function processPOIs(results) {
if (results.searchResults != null && results.searchResults.length > 0) {
if ($("#Key").val()) {
            $("#Zip").val(results.searchResults[0].fields.address + " " + results.searchResults[0] + ", " +
                          results.searchResults[0].fields.state + " " + results.searchResults[0].fields.postal);
        $.ajax('/Home/GetLocationFeatures', {
            data: JSON.stringify(parseToEntityObjects(results.searchResults)),
            dataType: "json",
            type: "post",
            contentType: "application/json",
            success: function (featuredata) { processFeatures(featuredata, results.searchResults); }
else if ( && == 610) {
// ambiguities
// results.collections[1] is To, 0 is From
        $("#Gps").val(results.collections[0][0] + ',' + results.collections[0][0].latLng.lng);
else {
        $('#results .frame').html("<h1>Oops! We couldn’t find any results. Please try your search again.</h1>");
function processOLOs(oloData, searchResults) {
    $.each(searchResults, function (i, result) { 
if (oloData != null) {
            $.each(oloData.restaurants, function () {
 if (this.telephone == result.fields.Phone) {
 var oloid = '#olo' + result.fields.RecordId;
                    $(oloid).append($("<a></a>", { href: this.url, "class": "ololinks", target: "_blank", text: "Place an Order" }));
            });  }   }); } 
function processFeatures(featureData, searchResults) {
    $.each(searchResults, function (i, result) { 
if (featureData != null) {
            $.each(featureData, function () {
 if (this.StoreNumber == result.fields.RecordId) {
 var fid = '#feature' + result.fields.RecordId;
                    $(fid).append($("<a></a>", {href:this.Url, "class":"featurelinks", target:"_blank", text:this.Label}));
                }   });         }  });  } 
function drawResultTable(results) {
    $('#results').html("<h1>Search Results</h1>");
    $.each(results, function (i, result) {
        $("<div></div>", { "class": 'resultrow' })
                     .append("<p class='addressrowresult'>" +
                result.fields.address + "<br/ >" +
       + ", " + result.fields.state + "<br/ >" +
                result.fields.Phone + "<br /></p>")
            .append("<div>" + getRoundedDistance(result) + " Mi." + getMapItLink(result) + "</div>") 
            .append("<div class='olos' id='olo" + result.fields.RecordId + "'></div>") // olo can find this span$(#olo#storenumber#) later
            .append("<div class='features' id='feature" + result.fields.RecordId + "'></div>") // feature can find this span$(#feature#storenumber#) later
    }); } 
function parseToEntityObjects(data) {
var locations = [];
    $.each(data, function () {
            StoreNumber: this.fields.RecordId,
            Address1: this.fields.address,
            ZipCode: this.fields.postal,
            Phone: this.fields.Phone
return locations;
function getRoundedDistance(result) { 
if (result.distance > 10) {
return Math.round(result.distance);
    } else if (result.distance > 1) {
return Math.round(result.distance * 10) / 10;
return Math.round(result.distance * 100) / 100;
function getMapItLink(result){ 
var destination = result.fields.address + ',' + + ',' + result.fields.state + ',' + result.fields.postal;
var link = $("<a>", { href: "#", "class": "mapitlink", title: "Map It!", onclick: "mapIt(getOrigin(), '" + destination + "');return false;", text: "Map It!" })
                .attr({ "data-category": "Find", "data-event": "Map Quest" });
return $('<div>').append(link.clone()).html();// hack to get string not js object for mqa
function getPOIRollover(result) {
var rollover = $("<div></div>", { "class": "poirollover" }).append($('<h4></h4>').text(result.fields.N))
        .append($('<br />')).append($('<span></span').text( + ", " + result.fields.state))
        .append($('<br />')).append($('<span></span>').text(result.fields.Phone))
        .append($('<br />')).append($('<span></span>').text(getRoundedDistance(result) + " Mi."))
return $('<div>').append(rollover.clone()).html(); // hack to get string not js object for mqa
function mapIt(origin, destination) {
// build a url and send to the Directions Web Service
    MQA.IO.doJSONP("" +
              "key=" + mq_key + "&" +
              "from=" + origin + "&" +
              "to=" + destination + "&" +
              "shapeFormat=raw&generalize=0.1&" +


My CSS file was mostly empty at the start.  But I wanted to make it easy to add style later, by applying classes and these empty placeholders for just about every element that we might want.



.gpsbutton {
background:url(../images/icon-gps.png) no-repeat;
background-size:42px auto;
{ display:none;
{ display: none;
{ float:left;
{ float:left;
{ margin:20px;
{ width:150px;
{ display:block;
{ display:block;
{ width: 210px;

About Mike Hogg

Mike Hogg is a c# developer in Brooklyn.

More Here

Favorite Books

This book had the most influence on my coding style. It drastically changed the way I write code and turned me on to test driven development even if I don't always use it. It made me write clearer, functional-style code using more principles such as DRY, encapsulation, single responsibility, and

This book opened my eyes to a methodical and systematic approach to upgrading legacy codebases step by step. Incrementally transforming code blocks into testable code before making improvements.

More Here