Question

我正在尝试将DropDownList置于WebGrid内，但我无法弄清楚如何做到这一点：（

我尝试过的事情：

grid.Column("Id", "Value", format: ((item) =>
   Html.DropDownListFor(item.SelectedValue, item.Colors)))

和

grid.Column(header: "", format: (item => Html.DropDownList("Colors", item.Colors)))

和

grid.Column(header: "", format: Html.DropDownList("Colors"))

和其他各种各样，但我无法让它工作。非常感谢任何帮助。

模型

public class PersonViewModel
{
    public string Name { get; set; }
    public int Age { get; set; }
    public SelectList Colors { get; set; }
    public int SelectedValue { get; set; }
}
public class ColorViewModel
{
    public int ColorID { get; set; }
    public string ColorName { get; set; }
}

控制器

public ActionResult Index()
{

    var colorList = new List<ColorViewModel>() {
                        new ColorViewModel() { ColorID = 1, ColorName = "Green" },
                        new ColorViewModel() { ColorID = 2, ColorName = "Red" },
                        new ColorViewModel() { ColorID = 3, ColorName = "Yellow" }
                    };

    var people = new List<PersonViewModel>()
                {
                    new PersonViewModel() {
                        Name = "Foo", 
                        Age = 42, 
                        Colors = new SelectList(colorList)
                    },
                    new PersonViewModel() {
                        Name = "Bar", 
                        Age = 1337, 
                        Colors = new SelectList(colorList)
                    }
                };

    return View(people);
}

视图

@model IEnumerable<PersonViewModel>

@{
    var grid = new WebGrid(Model);
}

<h2>DropDownList in WebGrid</h2>
@using (Html.BeginForm())
{
    @grid.GetHtml(
        columns: grid.Columns(
            grid.Column("Name"),
            grid.Column("Age"),
            grid.Column() // HELP - INSERT DROPDOWNLIST
        )
    )    
    <p>
        <button>Submit</button>
    </p>
}

Answer 1

grid.Column(
    "dropdown", 
    format: @<span>@Html.DropDownList("Color", (SelectList)item.Colors)</span>
)

同样在您的控制器中，请确保设置SelectList的值和文本属性，而不是：

Colors = new SelectList(colorList)

你应该使用：

Colors = new SelectList(colorList, "ColorID", "ColorName")

对我来说，为所有行项定义相同的SelectList似乎有点浪费，特别是如果它们包含相同的值。我会稍微重构你的视图模型：

public class MyViewModel
{
    public IEnumerable<SelectListItem> Colors { get; set; }
    public IEnumerable<PersonViewModel> People { get; set; }
}

public class PersonViewModel
{
    public string Name { get; set; }
    public int Age { get; set; }
    public int SelectedValue { get; set; }
}

然后：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            // define the values used to render the dropdown lists
            // for each row
            Colors = new[]
            {
                new SelectListItem { Value = "1", Text = "Green" },
                new SelectListItem { Value = "2", Text = "Red" },
                new SelectListItem { Value = "3", Text = "Yellow" },
            },

            // this is the collection we will be binding the WebGrid to
            People = new[]
            {
                new PersonViewModel { Name = "Foo", Age = 42 },
                new PersonViewModel { Name = "Bar", Age = 1337 },
            }
        };

        return View(model);
    }
}

并在视图中：

@model MyViewModel

@{
    var grid = new WebGrid(Model.People);
}

<h2>DropDownList in WebGrid</h2>

@using (Html.BeginForm())
{
    @grid.GetHtml(
        columns: grid.Columns(
            grid.Column("Name"),
            grid.Column("Age"),
            grid.Column(
                "dropdown", 
                format: @<span>@Html.DropDownList("Color", Model.Colors)</span>
            )
        )
    )    
    <p>
        <button>Submit</button>
    </p>
}

更新：

由于我怀疑你没有将这些下拉列表用于绘画和乐趣，但是你希望用户在其中选择值，当他提交表单时你可能希望获取所选值，你需要生成这些下拉列表的专有名称，以便默认模型绑定器可以自动检索POST操作中的选定值。不幸的是，由于WebGrid帮助程序有点糟糕，并且不允许您检索当前行索引，因此Haughed在他的博客文章中显示了could use a hack：

grid.Column(
    "dropdown", 
    format: 
        @<span>
            @{ var index = Guid.NewGuid().ToString(); }
            @Html.Hidden("People.Index", index)
            @Html.DropDownList("People[" + index + "].SelectedValue", Model.Colors)
        </span>
)

现在您可以进行POST控制器操作，在提交表单时，您将在该操作中获取每行的选定值：

[HttpPost]
public ActionResult Index(MyViewModel model)
{
    // the model variable will contain the People collection
    // automatically bound for each row containing the selected value
    ...
}

Answer 2

..让我的下拉列表在加载时从列表中选择一个值。以下是可行的。我自己试了一下。有任何问题让我发布。

@Html.DropDownList("RejectReason", Model.SalesReasonList.Select(u => new SelectListItem
                {
                    Text = u.Text,
                    Value = u.Value,
                    Selected = u.Value ==@item.RejectReason
                }))

WebGrid（）中的MVC 3 DropDownList（）问题

模型

控制器

视图

2 个答案: