Построение выпадающего списка в 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 и просто построить свой собственный список начальной загрузки Dropdown - некоторые, как 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 - так что я все еще извлекаю данные для раскрывающегося списка из базы данных, а затем каждый элемент в раскрывающемся списке передает свой идентификатор методу 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.

Замечания: письменные данные из памяти могут возникать небольшие ошибки.