在MVC中构造下拉菜单？

Question

我有一个存储在我的数据库中的汽车制造商列表。这是我的网站主布局的一部分，所以在我的layout.cshtml中。我有一个CarManufacturers控制器，它返回存储汽车制造商列表的数据库中的数据。

然后我有一个CarManufacturers查看像下面的模型：

public class CarManufacturersViewModel 
{ 
    public IEnumerable<SelectListItem> CarManufacturersList { get; set; } 

    public int SelectedCarManufacturer { get; set; } 
} 

从DB获得汽车制造商，并返回局部视图的方法如下：

[HttpGet] 
    [ChildActionOnly] 
    public ActionResult Index() 
    { 
     var carManufacturers = _dbService.GetAll<CarManufacturer>(); 

     var model = new CarManufacturersViewModel 
     { 
      CarManufacturersList = carManufacturers.Select(c => new SelectListItem 
      { 
       Value = c.Id.ToString(), 
       Text = c.Name 
      }) 
     }; 

     return PartialView("_CarManufacturersDropDown", model); 
    } 

当您选择一辆车制造商从cshtml视图中的下拉列表中查看控制器上的另一个动作 - 下面是：

[HttpPost] 
    public ActionResult Index(CarManufacturersViewModelwModel model) 
    { 
     return RedirectToAction("MyAction", "MyController", new { carManufacturerId = model.SelectedCarManufacturer }); 
    } 

我再在局部示意图如下：

@model MyProj.Models.CarManufacturersViewModel 
<script type="text/javascript"> 

    $(document).ready(function() { 

     $('#carmanufacturers').change(function() { 
      $(this).closest('form').submit(); 
     }); 

    }); 
</script> 

@using (Html.BeginForm("Index", "CarManufacturers", FormMethod.Post)) 
{ 
    @Html.DropDownListFor(model => model.SelectedCarManufacturer, Model.CarManufacturersList, "Car Manufacturer Details", new { id = "carmanufacturers" }) 
} 

这工作，但我想不使用@ Html.DropDownListFor，只是建立自己的自举下拉列表 - 有的像here这样的标记是：

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
</div> 

我怎样才能实现这与MVC - 所以我仍然从数据库检索下拉列表的数据，然后在下拉列表中的每个项目将传递自己的ID到Post方法？

Answer 1

你可以用两种方法做到这一点。

第一：

<div class="dropdown" id="manuDropWrap"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    @foreach (var manu in Model.CarManufacturersList) 
    { 
     <li role="presentation"><a role="menuitemm" href="#" data-id="@manu.Value">@manu.Text</a></li> 
    } 
    </ul> 
    <input type="hidden" value="@Model.SelectedCarManufacturer" name="@Html.NameFor(m => m.SelectedCarManufacturer)" id="selectedManu" /> 
</div> 

<script type="text/html"> 
    $("#manuDropWrap > li").each(function() { 
       $(this).click(function() { 
        var id = $(this).attr("data-id"); 
        $("#selectedManu").val(id); 
        $(this).closest('form').submit(); 
       }); 
      }); 
</script> 

二：

你可以准备自己的HtmlHelper扩展，产生正确的HTML。

备注：从记忆中写出，可能发生小错误。