CODEWITHSUNDEEP
c#asp.net-mvcasp.net-mvc-4checkboxcheckboxlist
foo-baar
foo-baar

Reputation: 1104

how to handle a list of checkbox?

I am developing a page which display data from service on the View and allow users to filter it. There is a column for Countries, which allow users to filter.

I am not able to figure out a way to create a list of checkbox so that I can grab all selected values in one param like string[] countries (in the action method).

Can't use classic way :

<input type="checkbox" name="countries" value="USA" />USA<br />
<input type="checkbox" name="countries" value="Canada" />Canada<br />

This does pass the values in URL but doesn't set them back on post back (keeping checked onpostback).

I tried using checkboxlist (http://goo.gl/TUvZzu) but seemed to complicated for my Modal.

Since mine is a very straight forward Model :

public string Title { get; set; }
public string Website { get; set; }
public string Address1 { get; set; }
public string Address2 { get; set; }
public string City { get; set; }
public string Zip { get; set; }
public string State { get; set; }
public string Country { get; set; }

I appreciate your time and help.

Upvotes: 2

Views: 1740

Answers (1)

hutchonoid
hutchonoid

Reputation: 33305

You need to include a collection of countries within your view model to hold the selected values and allow them to be sent in the post.

I would also create a Country object to hold the Id, Name and Selected values.

In order for the model to be posted back you need to index each item in the view, this allows the model binder to pick it up.

Models

public class AModel
{
    public AModel()
    {
        Countries = new List<Country>();    
    }

    public string Title { get; set; }
    public string Website { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string Zip { get; set; }
    public string State { get; set; }
    public string Country { get; set; }
    // Country collection
    public List<Country> Countries { get; set; }

}

    public class Country
    {
        public int ID { get; set; }
        public string Name { get; set; }                
        public bool Checked { get; set; }           
    }

View for loop

@for(var i = 0; i < Model.Countries.Count; i++)
{

    <dt>
        @Html.HiddenFor(m => Model.Countries[i].ID)
        @Html.HiddenFor(m => Model.Countries[i].Name)
        @Html.CheckBoxFor(m => Model.Countries[i].Checked)
    </dt>
    <dd>
        @Model[i].Name
    </dd>

}

Note the for loop instead of foreach to enable model binding and the hidden fields to allow the values to be posted back to the controller

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/

Controller post

[HttpPost]
public ActionResult Index(AModel model)
{
    //All the selected countries are available in the model

    return View(model);
}

Working example

Upvotes: 3

Related Questions