How to put bootstrap select inside a loop in ASP.NET MVC?

Question

I am putting some data as buttons which are limited to 3, and rest of the data in dropdown. So e.g if I have 7 types in data so 3 will be buttons and rest 4 will as dropdown options.

 @if(Model.Rounds)
                        {
                            var url = Url.Action("Round", "Home", new { area = "Rounds" });

                            <div id="round">
                                <div class="btn-group">                                        
                                            @{int btnCount = 0;}
                                            @foreach (var rt in Model.Rounds)
                                            {
                                                if (btnCount < 3)
                                                {
                                                    <button type="button" class="btn btn-default" data-url="@url" data-type="@rt.Value">
                                                        @rt.Key
                                                    </button>
                                                    btnCount++;
                                                }
                                                else
                                                {
                                                  <div class="controls">
                                                    <select class="form-control">
                                                    <option data-url="@url" data-type="@rt.Value">@rt.Key</option>
                                                    </select>
                                                }
                                            }                                            
                                    </div>
                                </div>
                            </div>
                        }

The problem is after 3 buttons, 4 seoarate dropdowns are coming instead of a single dropdown with 4 options. What am I doing wrong?

pritaeas · Accepted Answer · 2018-06-11 07:44:32Z

1

I'd recommend splitting the logic:

<div id="round">
    <div class="btn-group">                                        
        @foreach (var rt in Model.Rounds.Take(3))
        {
            <button type="button" class="btn btn-default" data-url="@url" data-type="@rt.Value">
                @rt.Key
            </button>
        }                                            
        <div class="controls">
            <select class="form-control">
                @foreach (var rt in Model.Rounds.Skip(3))
                {
                    <option data-url="@url" data-type="@rt.Value">@rt.Key</option>
                }
            </select>
        </div>
    </div>
</div>

Your version has select in the foreach loops, thus creating a new dropdown every time.

answered Jun 11, 2018 at 7:44

pritaeas

2,0935 gold badges37 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

How to put bootstrap select inside a loop in ASP.NET MVC?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related