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助手很糟糕并且不允许你检索当前的行索引,你可以使用 Haacked在他的博客帖子中显示的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
    ...
}