渲染引导下拉菜单与c# html下拉列表助手

本文关键字：html 下拉列表 下拉菜单 | 更新日期: 2023-09-27 17:50:58

我已经为我的网站创建了一个搜索输入，它附加到一个下拉菜单。但是我需要用html helper选择列表中的项填充下拉菜单中的项，这对搜索功能至关重要。是否有可能在发布到控制器的引导下拉菜单中呈现搜索列表的项目?

HTML搜索函数 

<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>

渲染引导下拉菜单与c# html下拉列表助手

在bootstrap下拉菜单中使用常规的超链接标签:

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

当这些超链接被选中时，使用JQuery设置一个隐藏的输入值:

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