[RESOLVED]Drop Down with bootstrap can't format it… New help.

I have the following code and I’m not sure how to apply the bootstrap on the drop down.

Full code:

  <div class="form-inline">
            Find by Last Name or First Name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as String, new { style = "width:200px", @class = "form-control" })

            Location:

            @Html.DropDownList("LocationList", "All")

            <input type="submit" value="Search" class="btn btn-default" />
        </div>

Drop Down. Not sure what I have to modify here.

            @Html.DropDownList("LocationList", "All")

Generally, Bootstrap would use the "form-control" class to indicate a particular element should be a DropDown as your DropDownList helper should render a <select> element :

@Html.DropDownList("LocationList, new SelectList(...), "Select A Location", new { @class = "form-control" })

The second parameter for the DropDownList helper accepts a SelectList, which you’ll likely want to populate within your Controller Action and pass to your DropDownList using something like the following that would define a List of Roles :

// Build a List of Roles
ViewBag.Roles = new SelectList(await RoleManager.Roles.ToList(), "Name", "Name");
// Show your View
return View();

and :

@Html.DropDownList("Role, ViewBag.Roles, "Select A Role", new { @class = "form-control" })

I’ve also found that it’s quite easy to handle this manually as well :

<div class="dropdown">
    <select id='LocationList' name="LocationList" class="form-control">
        <!-- Add your elements either manually or using a Collection -->
        @foreach (var location in ViewBag.PossibleLocations)
        {
              <option value="@location .Value" @(location .Selected ? "selected" : "")>@location.Text</option>
        }
    </select>
</div>

You can see a very rough example of what this might look like here.

Leave a Reply