Ho to display multiple checkbox selection based on user's selection from dropdown?

Question

I want to display a dropdownbox on my MVC3 razor application from where user can select category and based on his selection i want to display subcategories which are checkbox so user can select multiple subcategories.

Can anyone help me how to get this?

Below is my json that i received from the web-service and and I deserialized that to the object, so how can i assign that object to two different list category(dropdown) and subcategory (check-boxes)?

JSON:

 {
 "Code":0,
 "Status":"Done",
 "Categories":[
 {
  "ID":1,
  "Name":"Eat",
    "Subcategories":[
        {"Flag":false,"ID":100,"Name":"Food"},
        {"Flag":false,"ID":101,"Name":"Fast Food"},         
        {"Flag":false,"ID":102,"Name":"Other"}
    ]
        },
    {
    "ID":2,
    "Name":"Entertainment",
     "Subcategories":[
        {"Flag":false,"ID":100,"Name":"All"},               
        {"Flag":false,"ID":101,"Name":"Movie"},
        {"Flag":false,"ID":102,"Name":"Other"}
    ]
  },
  }
  ]
  }

Entity:

public class MyData
{
  public int Code { get; set; }
  public string Status { get; set; }
  public List<Category> Categories { get; set; }
}

public class Category
{
  public string Name { get; set; }
  public int ID { get; set; }
  public List<Subcategory> Subcategories { get; set; }
}

public class Subcategory
{
  public string Name { get; set; }
  public int ID { get; set; }
  public bool Flag { get; set; }
}

Do you mean you want load the sub categories as a checkbox list based upon what category is selected? Do you need to hit the database to load the sub categories? — Daniel Lorenz
– Daniel Lorenz, Commented Mar 15, 2012 at 20:42
How about code.google.com/p/dropdown-check-list, or harvesthq.github.com/chosen — elclanrs
– elclanrs, Commented Mar 15, 2012 at 20:43
hide/show is very simple using a class system or ID system to match values of select... samples of html would help..much better description of objective would also help — charlietfl
– charlietfl, Commented Mar 15, 2012 at 20:45
@Daniel Lorenz, yes i'll have to make restful service calls to pull categories and subcategories. — updev
– updev, Commented Mar 15, 2012 at 20:49

Darin Dimitrov · Accepted Answer · 2012-03-16 07:40:20Z

1

You could use AJAX. subscribe to the change event of the dropdownlist and trigger an AJAX request to a controller action passing along the selected category. The action will query the database for corresponding subcategories and return a partial view with corresponding checkboxes which will be injected into the DOM.

So let's suppose that you already have a dropdownlist for the categories in your view:

@Html.DropDownListFor(
    x => x.CategoryId, 
    Model.Categories, 
    new { 
        id = "categories",
        data_subcategoriesurl = Url.Action("subcategories", "somecontroller")
    }
)

and some div which will contain the subcategories somewhere on the page:

<div id="subcategories">
    @Html.EditorFor(x => x.SubCategories, "SubCategories")
</div>

and you could then have a SubCategories.cshtml partial which will render the list of checkboxes:

@model IList<CategoryViewModel>
@{
    // we change the HTML field prefix so that input elements
    // such as checkboxes have correct names in order to be able
    // to POST the values back 
    ViewData.TemplateInfo.HtmlFieldPrefix = "SubCategories";
}
@for (var i = 0; i < Model.Count; i++)
{
    <div>
        @Html.LabelFor(x => x[i].IsSelected, Model.CategoryName)
        @Html.CheckBoxFor(x => x[i].IsSelected)
    </div>
}

Now you could subscribe to the change event of the dropdown in a separate javascript file:

$(function() {
    $('#categories').change(function() {
        var subcategoriesUrl = $(this).data('subcategoriesurl');
        var selectedCategoryId = $(this).val();
        $('#subcategories').load(subcategoriesUrl, { id: selectedCategoryId });
    });
});

and finally the SubCategories action which will be invoked with AJAX:

public ActionResult SubCategories(int? id)
{
    var subCategories = Repository.GetSubCategories(id);
    return View(subCategories);
}

edited Mar 16, 2012 at 7:40

answered Mar 16, 2012 at 7:13

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

updev Over a year ago

I am making restful call on my application to get categories & subcategories so what would be best approach to get them and show dropdown for categories? Can you explain after i get the jason response i will deserialize that object, then how should i get the category/subcategory values to my viewmodel, so i can display them when user calls(GET) the page where these categories will be displayed along with other textbox, and once the user submit the form then it posts all selection along with other textbox values.

Darin Dimitrov Over a year ago

@updev, there are 2 possible approaches here: either you use AJAX to query your RESTful service which will return JSON and then fill the dropdown options (which will initially be rendered empty), or have your controller action query the service or directly a repository to fill a view model that will be passed to the view and then rendered as a dropdown list using the DropDownListFor helper (it's what I have shown in my answer). As far as the sub categories is concerned using AJAX seems like a necessity since you want to refresh this list of checkboxes everytime when the selection changes.

updev Over a year ago

can you help with defining Model/ViewModel for this scenario?

Darin Dimitrov Over a year ago

You could have a view model with 2 scalar properties representing the selected category id and the selected sub category id and 2 IEnumerable<SelectListItem> properties representing the available Categories and the available SubCategories respectively. But of course I have no knowledge of what you are trying to achieve and the context and specific requirements of the application you are trying to build so I cannot help much.

updev Over a year ago

Thanks for helping me out with this one. I have added my json and entity that i use to deserialize json to an object. Now, how can I assign my object which contains both category and subcategories to both dropdown and check-boxes so all subcategories works based on category selection?

|

Collectives™ on Stack Overflow

Ho to display multiple checkbox selection based on user's selection from dropdown?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related