Create DropDownList using Iteration Loop

Question

I will try my best to explain what I am looking for.

Let's say for argument's sake that I have a table in my database that has the properties ID, Item, Category...

the table is populated as so:

================================
|ID|    |Item       | Category |
================================
|  1    |  Batman   |   DC     |
|  2    |  Superman |   DC     |
|  3    |  Aquaman  |   DC     |
|  4    |  Spiderman|   Marvel |
|  5    |  Ironman  |   Marvel |
|  6    |  Thor     |   Marvel |
================================

Now, I want to create a dropdownlist with this information... but seperated by the category..

So it would look like this:

DC
- -Batman
- -Superman
- -Aquaman
Marvel
- -Spiderman
- -Ironman
- -Thor

Now it doesn't need to be as formatted as shown above but just a simple nested list with the emphasis on the Category

How would I iterate through the table and each time the Category changes to print that Category text once then print the Item's that correspond with that Category underneath it?

How about something like this: weblogs.asp.net/raduenuca/… — David Oesterreich
– David Oesterreich, Commented Apr 4, 2016 at 19:56
Then you can just use one of the overloads of SelectList that add the dataGroupField (or set the Group property of SelectListItem) and use @HtmlDropDownListFor() in your view — user3559349
– user3559349, Commented Apr 5, 2016 at 12:06

user3559349 · Accepted Answer · 2016-04-05 23:00:01Z

2

In MVC-5.2, you can use one of the overloads of SelectList that accepts string dataGroupField to group your options. For example, in the controller

model.OptionList = new SelectList(db.MyTable, "ID", "Item", "Category", null);
return View(model);

and in the view

@Html.DropDownListFor(m => m.MyProperty, Model.OptionList)

Alternatively you can build an IEnumerable<SelectListItem> and set the Group property, for example

List<SelectListItem> optionList = new List<SelectListItem>
var groups = db.MyTable.GroupBy(x => x.Category);
foreach(var group in groups)
{
    var optionGroup = new SelectListGroup() {Name = group.Key};
    foreach (var item in group)
    {
        optionList.Add(new SelectListItem { Value = item.ID.ToString(), Text = item.Item, Group = optionGroup });
    }
}

answered Apr 5, 2016 at 23:00

user3559349

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

Comments

Rion Williams · Accepted Answer · 2016-04-04 19:54:56Z

2

If you wanted to output your results as you initially provided, you could accomplish this by using a GroupBy call and then simply iterating through those groups (and subsequently the items within each group):

@foreach(var group in Model.GroupBy(g => g.Category))
{
     <ol>
        <li><b>@group.Key</b></li>
        <ul>
        @foreach(var item in group)
        {
            <li>- @item</li>
        }
        </ul>
     </ol>
}

This assumes that you already have the objects from your database within your Controller and are simply passing the collection of them into your View. Additionally, this example is performed within the View, which isn't ideal (you preferably want to handle this logic within the actual model itself).

As far as creating a DropDownList goes, you could really do the same if you wanted to preface each entry with its appropriate category :

<select id='Hero' name='Hero'>
@foreach(var hero in Model)
{
     <option value='hero.ID'>@hero.Category - @hero.Item</option>
}
</select>

edited Apr 4, 2016 at 19:54

answered Apr 4, 2016 at 19:51

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

9 Comments

Kevin Over a year ago

You're also presuming he is using MVC and I don't see anything in the question to indicate that. Not saying he isn't, just saying it isn't really indicated by the question. The question doesn't even indicate a web application.

Rion Williams Over a year ago

I only assumed this from the model-view-controller tag that was attached to the question.

Kevin Over a year ago

Ok, good catch, I didn't even look at the tags, just read the question.

Grizzly Over a year ago

@Kevin yes i am using MVC

Mike Over a year ago

why not use optgroup and nest the grouped options inside... <select> <optgroup label="DC"> <option> Superman</option> </optgroup> <optgroup label="Marvel"> </optgroup> </select>

|

Collectives™ on Stack Overflow

Create DropDownList using Iteration Loop

2 Answers 2

Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related