CODEWITHSUNDEEP
c#twitter-bootstraprazortwitter-bootstrap-3html-helper
Dolaps
Dolaps

Reputation: 279

Render Bootstrap dropdown menu with c# html dropdown list helper

I have created a search input for my website that is attached to a dropdown menu. But I need to populate the items in the dropdown menu with items from a html helper select list which is essential for the search function. Is it possible to render the items of the search list in a bootstrap dropdown menu that is posted to a controller?

HTML Search Function

<div class="col-lg-6">
@{using (Html.BeginForm("Results", "Searchv2", FormMethod.Get)) {
  <div class="input-group">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
      <ul class="dropdown-menu">
      @Html.DropDownList("Searchby", new SelectList(new[] { "User", "Restaurant", "Cuisine" }))
      </ul>
    </div>
    <input type="text" class="form-control" placeholder="Search" name="SearchString" id="SearchString">
  </div>
}}
</div>

Upvotes: 1

Views: 1304

Answers (1)

James Lawruk
James Lawruk

Reputation: 31337

Use the conventional hyperlink tags in the bootstrap dropdown-menu: 

<ul class="dropdown-menu">
@foreach (var searchType in new[] { "User", "Restaurant", "Cuisine" })
{
    <li><a href="#">@searchType</a></li>
}
</ul>

Then use JQuery to set a hidden input value when these hyperlinks are selected:

<input type="hidden" name="SearchBy" />
<script>
    $(".dropdown-menu a").click(function() {        
        $("input[name='SearchBy']").val($(this).html());            
    });
</script>

Upvotes: 1

Related Questions