Render Bootstrap dropdown menu with c# html dropdown list helper

Question

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>

James Lawruk · Accepted Answer · 2014-03-20 13:23:51Z

1

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>

answered Mar 20, 2014 at 13:23

James Lawruk

31.5k19 gold badges135 silver badges141 bronze badges

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

2 Comments

Dolaps Over a year ago

This renders the in the select list in the drop down menu. But it doesn't pass the value of searchBy into the controller. How would I do this?

James Lawruk Over a year ago

Do you see the value being passing in the Url when you click submit? You can access by adding a string parameter called SearchBy to the controller method. You can also simply use Request.QueryString["SearchBy"]

Collectives™ on Stack Overflow

Render Bootstrap dropdown menu with c# html dropdown list helper

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related