Question

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

然后我有一个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，只是构建我自己的bootstrap 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实现这一点 - 所以我仍然从数据库中检索下拉列表的数据，然后下拉列表中的每个项目都会将自己的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。

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

构建MVC中的下拉列表？

1 个答案: