javascript 如何在MVC中实现多个下拉列表

How to implement multiple dropdown lists in MVC

提问by iamchrisfryer

Let's say I want to show multiple Drop Down Boxes each with the same values within them within a View using the @Html.DropDownList. Is there an easy way to be able to render all of these Drop Down Boxes without having to bind something like the ViewBag to each of the months returned?

假设我想使用@Html.DropDownList 在一个视图中显示多个下拉框，每个下拉框都具有相同的值。有没有一种简单的方法可以渲染所有这些下拉框，而不必将 ViewBag 之类的东西绑定到返回的每个月份？

For example:

例如：

Controller

控制器

List<SelectListItem> items = new List<SelectListItem>();

var values = (from v in db.Values select v);

foreach (var value in values)
{
    items.Add(new SelectListItem { Text = value.Name, Value = value.Id });
}

ViewBag.Values = PopulateSelectList("Values");

View

看法

@Html.DropDownList("Values")

But what the goal would be is to have something like

但目标是拥有类似的东西

<div class="control-group">
    @Html.LabelFor(model => model.DesignStyle)
    <div class="controls">
        @Html.DropDownList("Values")    @Html.DropDownList("Values")
        @Html.DropDownList("Values")    @Html.DropDownList("Values")
        @Html.DropDownList("Values")    @Html.DropDownList("Values")
        @Html.DropDownList("Values")    @Html.DropDownList("Values")
        @Html.DropDownList("Values")    @Html.DropDownList("Values")
    </div>
</div>

My guess is I would need some sort of @foreach (item in Model)to populate each of the DropDowns on the View

我的猜测是我需要某种方式@foreach (item in Model)来填充 View 上的每个 DropDowns

Here is a sample of my initial thought on how to get something going.

以下是我关于如何开展工作的初步想法的示例。

List<SelectListItem> results = new List<SelectListItem>();
SelectListItem item = null;

var values = (from v in db.Values select v);

for (int i = 0; i <= 15; i++)
{
     item = new SelectListItem();

     item.Text = "Select a value";
     item.Value = "1";

     results.Add(item);

     foreach (var thread in threads)
     {
         item.Text = thread.Name;
         item.Value = thread.Id;

         results.Add(item);
     }
 }

What I don't want to do is duplicate the logic to populate a SelectListItem multiple times and put each of those in a separate ViewBag item.

我不想做的是重复逻辑以多次填充 SelectListItem 并将每个逻辑放在单独的 ViewBag 项目中。

采纳答案by iamchrisfryer

I ended up using the EditorTemplate functionality in order to solve / render this.

我最终使用 EditorTemplate 功能来解决/渲染这个问题。

The Model changed from this:

模型从此改变：

public class ValueModel
{
    public Guid Id { get; set; }
    public string Name { get; set; }
}

To this:

对此：

public class ValueModel
{
    public Guid Id { get; set; }
    public string Name { get; set; }

    public List<ValueDropDownModel> DropDown { get; set; }
}

public class ValueDropDownModel
{
    [Range(0, 15)]
    public int DropDown { get; set; }

    public int Id { get; set; }
    public string Name { get; set; }

    public List<SelectListItem> AvailableDropDown { get; set; }
}

Within the Viewsunder the folder for Value, there is now a sub folder called EditorTemplates. This contains 2 Views. A ValueModel.cshtmland a ValueDropDownModel.cshtml.

在Viewsfor 文件夹下Value，现在有一个名为EditorTemplates. 这包含 2 个视图。一个ValueModel.cshtml和一个ValueDropDownModel.cshtml。

ValueModel.cshtmlcontains:

ValueModel.cshtml包含：

@model SomeSolution.Web.Models.ValueModel

<div class="row-fluid">

    <div class="span6">
        <div class="control-group">
            @Html.LabelFor(m => m.Name)
            <div class="controls">
                @Html.EditorFor(m => m.Name)
                @Html.ValidationMessageFor(m => m.Name)
            </div>
        </div>

    </div>
</div>

<div class="row-fluid">
    <div class="span4">
        @for (int i = 0; i < 5; ++i)
        {
            @Html.EditorFor(m => m.DropDown[i])
        }
    </div>

    <div class="span4">
        @for (int i = 5; i < 10; ++i)
        {
            @Html.EditorFor(m => m.DropDown[i])
        }
    </div>

    <div class="span4">
        @for (int i = 10; i < 15; ++i)
        {
            @Html.EditorFor(m => m.DropDown[i])
        }
    </div>
</div>

ValueDropDownModel.cshtmlcontains:

ValueDropDownModel.cshtml包含：

@model SomeSolution.Web.Models.ValueDropDownModel

<div class="control-group">
    @Html.HiddenFor(m => m.DropDown)
    @String.Format("DropDown {0}", Model.DropDown)
    <div class="controls">
        @Html.DropDownListFor(m => m.Id, Model.AvailableDropDown)
        @Html.ValidationMessageFor(m => m.Id)
    </div>
</div>

The ValueControllernow includes some helper methods to populate the drop downs

在ValueController现在包括一些辅助方法来填充下拉菜单

    private void FillAvailableValues(ValueModel modelValue, Entities db)
    {
        var values = (from v in db.Values
                       orderby v.Name
                       select v);

        foreach (var model in modelValue.Values)
        {
            model.AvailableDropDown = new List<SelectListItem>();
            model.AvailableDropDown.Add(new SelectListItem()
            {
                Text = "Unassigned",
                Value = "0",
                Selected = (model.Id == 0)
            });

            foreach (var value in values)
            {
                model.AvailableDropDown.Add(new SelectListItem()
                {
                    Text = value.Name,
                    Value = value.Id,
                    Selected = (model.Id.ToString() == colour.Id)
                });
            }
        }
    }

    private void InitDefaultDropDown(ValueModel model)
    {
        model.DropDown = new List<ValueDropDownModel>();
        for (int i = 0; i < 15; i++)
        {
            model.DropDown.Add(new ValueDropDownModel()
            {
                DropDown = i + 1,
                Id = 0
            });
        }
    }

The FillAvailableValuesmethod is called on the CreateActionResultas well as the EditActionResultto initialize the Drop Downs. The InitDefaultDropDownmethod is called on the CreateActionResultto setup the Drop Downs on the page.

FillAvailableValues调用该方法CreateActionResult以及EditActionResult初始化下拉列表。该InitDefaultDropDown方法被调用CreateActionResult以在页面上设置下拉菜单。

回答by Alex

You can re-use the select list - just use the proper overlad of DropDownListor DropDownListFor. What you should (normally) do is give the dropdowns different names. For example:

您可以重新使用选择列表 - 只需使用DropDownList或的适当重叠DropDownListFor。你应该（通常）做的是给下拉菜单不同的名字。例如：

 @Html.DropDownListFor( m => m.PickedValue1, ViewBag.Values)
 @Html.DropDownListFor( m => m.PickedValue2, ViewBag.Values)

Or, if you prefer the non-strongly typed DropDownList:

或者，如果您更喜欢非强类型DropDownList：

 @Html.DropDownList( "PickedValue1", ViewBag.Values)
 @Html.DropDownList( "PickedValue2", ViewBag.Values)