WebGrid() 中的 MVC 3 DropDownList() 问题

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 助手有点糟糕并且不允许您检索当前行索引，因此您 could use a hack 正如 Haacked 在他的博客文章中所展示的那样：

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
                }))