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 帮助程序有点糟糕并且不允许您检索当前行索引，因此您 可以使用 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 [email protected]
                }))