Sunday, November 13, 2011

we rolled our own control for radio button lists

Most of my time to date on our app has dealt with either implementing security (which often involved LinqSpecs) or implementing filtering of lists with LinqSpecs. I've blogged a lot about LinqSpecs, but I haven't discussed much about how the filtering takes shape at the UI level.

Let's say we have a list of secretaries that Rick Perry would do away with such as the Secretary of Commerce, and the Secretary of Education, and so on...

From a security perspective this list would be filtered down based on which line items a user was allowed to view. From a user-driven angle, this list could be filtered further by way of some controls in the web page above the list allowing users to narrow down the data that is displayed to lay their mitts on what they really want. Example:

@Html.EnumRadioOptionFor(typeof(DepartmentEnum), "SecretaryFilter.Department", Model.SecretaryFilterModel.Department)

 
 

How our convention would take shape in terms of classes:

  1. We would have a core object called Secretary.
  2. There would be a UI model called SecretaryListModel which would contain an IEnumerable<Secretary> as one getsetter ...and as another getsetter a SecretaryFilterModel called SecretaryFilter.
  3. The SecretaryFilterModel file would have the DepartmentEnum within it like so:

    using System;

       

    namespace OurApp.Web.UI.Models

    {

       public enum DepartmentEnum

       {

          Commerce = 99,
    //symbol of default value

          Education,

          
    //Environmental Protection Agency,

          Energy

       }

       

       public class SecretaryFilterModel

       {

          public DepartmentEnum Department { get; set; }

          public string Name { get; set; }

          public DateTime? BirthDate { get; set; }

          public Boolean IsUnderSecretary { get; set; }

          

          public SecretaryFilterModel()

          {

             this.Department = DepartmentEnum.Commerce;

          }

       }

    }

 
 

@Html.EnumRadioOptionFor will create a horizontal string of radio buttons with the Commerce option selected by default. The method below is in HtmlHelpers.cs in the Helpers folder of the OurApp.Web.UI project:

public static MvcHtmlString EnumRadioOptionFor(this HtmlHelper helper,

      Type enumType, string name, object value)

{

   var sb = new StringBuilder();

   

   foreach (var enumValue in Enum.GetValues(enumType))

   {

      var inputTagBuilder = new TagBuilder("input");

      inputTagBuilder.Attributes.Add("type", "radio");

      inputTagBuilder.Attributes.Add("name", name);

      inputTagBuilder.Attributes.Add("value", enumValue.ToString());

      

      if (value.ToString() == enumValue.ToString())

         inputTagBuilder.Attributes.Add("checked", "checked");

      

      if (enumValue.GetHashCode() == 99)

         inputTagBuilder.AddCssClass("defaultSelected");

      

      var spanTagBuilder = new TagBuilder("span");

      spanTagBuilder.SetInnerText(enumValue.ToString());

      

      sb.Append(inputTagBuilder.ToString());

      sb.Append(spanTagBuilder.ToString());

   }

   return new MvcHtmlString(sb.ToString());

}

No comments:

Post a Comment