Click here to Skip to main content
Click here to Skip to main content

CheckBoxList ASP.NET MVC3

, 8 Sep 2012
Rate this:
Please Sign up or sign in to vote.
Custom CheckBoxList in ASP.NET MVC3

Introduction

ASP.NET MVC3 does not provide built in control for implementing CheckBoxList. While working in my project, I was assigned a User Story which required such an implementation. After searching a lot on the internet, I did not find the feasible solution. Hence, I tried this on my own and have banged my head a lot of times while implementing. Well, this is my first tip, hence excuse me for any mistakes and also help rectify them.

Background

This implementation is on ASP.NET MVC3, NHibernate, linq. It is best suited for fixed size CheckBoxList.

Using the Code

In the Model class, include the enum for which CheckBoxList is to be created. Enum value should be of the order 2^n as shown below:

[Flags]//Indicates that an enumeration can be treated as a bit field; i.e., as a set of flags
public enum ReportTemplateFormat
{
PDF = 1,
Excel = 2,
Word = 4,
CSV = 8
} 

Include another enum which has values similar to below:

public enum ReportFormat
{
PDF = 0,
Excel = 1,
Word = 2,
CSV = 3
}

Include bool list in the ViewModel.

public List<bool> ReportFormats { get; set; } 

In the Model, include an int property. Same to be included in the database.

public virtual int AvailableFormats { get; set; }

In the create viewmodel from the model:

  1. When creating viewmodel, pass AvailableFormats(int) from model and assign to List<bool> used for checking the checkbox:
    viewModel.ReportFormats = GetFormats(model.AvailableFormats);
  2. Method to return List<bool> from the AvailableFormats(int) value passed.
    public List<bool> GetFormats(int reportFormats)
    {
    var reportTemplateFormat = new List<bool>();
    var reportTemplateFormatValues = 
    (ReportTemplateFormat[])Enum.GetValues(typeof(ReportTemplateFormat));
    //For new template and for existing templates 
    //with null values, all formats should be selected. 
    if(reportFormats==0)
    {
    for (var i = 0; i < reportTemplateFormatValues.Count(); i++)
    {
    reportFormats += (int)reportTemplateFormatValues[i];
    }
    }
    for (var i = 0; i < reportTemplateFormatValues.Count(); i++)
    {
    reportTemplateFormat.Add(new bool());
    }
    foreach (var x in reportTemplateFormatValues)
    {
    //XORing and assigning true value to the bool List
    if ((int)x != 0 && (reportFormats & (int)x) == (int)x)
    {
    ReportFormat reportFormat;
    if (Enum.TryParse(x.ToString(), true, out reportFormat))
    {
    reportTemplateFormat[(int)reportFormat] = true;
    }
    else
    {
    throw new ArgumentException(string.Format("Invalid Format '{0}'!", x));
    }
    }
    }
    return reportTemplateFormat;
    }

In update model from viewmodel:

  1. Update the AvailableFormats property in the model by passing the List<bool> which contains the checked values from the checkbox list.
    model.AvailableFormats = GetAvailableFormats(viewModel.ReportFormats);
  2. Pass the List<bool> and return the evaluated AvailableFormats to be saved to model.
    //Evaluating selected values
    public int GetAvailableFormats(List<bool> reportTemplateFormats)
    {
    int reportTemplateFormat = 0;
    var reportTemplateValues = (ReportTemplateFormat[]) 
    	Enum.GetValues(typeof (ReportTemplateFormat));
    for (int i = 0; i < reportTemplateFormats.Count; i++)
    {
    if (reportTemplateFormats[i])
    reportTemplateFormat += Convert.ToInt32(reportTemplateValues[i]);
    }
    return reportTemplateFormat;
    }
  3. Implementation of the CheckBoxList in view.
    <div class="float-editor-row"> 
    <div class="float-editor-label">@Html.Label("* Report Format")</div> 
    <div class="float-editor-field">
    @for (var i = 0; i < Model.ReportFormats.Count; i++)
    {
    //Using ReportFormats List<bool> to check the checkbox
    @Html.CheckBoxFor(x => x.ReportFormats[i], new { @checked = "checked" })
    @Html.LabelFor(x => x.ReportFormats[i], ((ReportFormat)i).ToString())<text>&nbsp;</text>
    }
    </div>
    </div>

Points of Interest

Well, this is my first article and I am sure there's lot of mistakes. It's very nice to share knowledge with everyone, that's the way even I have learned and thanks to all of them. I am open to criticism and please suggest to me the points to improve my writing skills.

History

This was implemented in my current project. Soon I would like to create a basic project based on the comments.

Thanks.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

suhas.shiv

India India
No Biography provided

Comments and Discussions

 
Questionthank you Pinmemberantoxa.zimm2-Dec-12 21:05 
QuestionNice Article. PinmemberRajkumarBathula8-Sep-12 23:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140827.1 | Last Updated 9 Sep 2012
Article Copyright 2012 by suhas.shiv
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid