WebGrid（）中的MVC 3 DropDownList（）的问题 [英] Problems with MVC 3 DropDownList() in WebGrid()
问题描述
我试图在 WebGrid 中放置一个 DropDownList ，但我无法弄清楚如何做它：（
我尝试过的东西：
grid。列（Id，值，格式：（（item）=>pre>
Html.DropDownListFor（item.SelectedValue，item.Colors）））
和
grid.Column（header：格式：（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 ColorVie wModel
{
public int ColorID {get;组; }
public string ColorName {get;组;
}
控制器
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 =
颜色=新的SelectList（colorList）
}，
new PersonViewModel（）{
Name =Bar，
年龄= 1337，
颜色=新的SelectList（colorList）
}
};
返回查看（人）;
}
查看
@model IEnumerable< PersonViewModel>
@ {
var grid = new WebGrid（Model）;
}
< h2> WebGrid中的DropDownList< / h2>
@using（Html.BeginForm（））
{
@ grid.GetHtml（
列：grid.Columns（
grid.Column（Name），
grid.Column（Age），
grid.Column（）// HELP - INSERT DROPDOWNLIST
）
）
< p>
< button>提交< / button>
< / p>
}
解决方案
grid.Column（
dropdown，
格式：@< 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>颜色{get;组; }
public IEnumerable< PersonViewModel>人{get;组; }
}
public class PersonViewModel
{
public string Name {get;组; }
public int Age {get;组; }
public int SelectedValue {get;组;
}
然后：
public class HomeController：Controller
{
public ActionResult Index（）
{
var model = new MyViewModel
{
//定义用于渲染下拉列表的值
//每行
Colors = new []
{
new SelectListItem {Value =1 ，Text =Green}，
new SelectListItem {Value =2，Text =Red}，
new SelectListItem {Value =3，Text =Yellow}，
}，
//这是我们将绑定WebGrid到
的集合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> WebGrid中的DropDownList< / h2>
@using（Html.BeginForm（））
{
@ grid.GetHtml（
列：grid.Columns（
grid.Column（名称），
grid.Column（Age），
grid.Column（
dropdown，
格式：@< span> @ Html.DropDownList颜色，Model.Colors）< / span>
）
）
）
< p>
< button>提交< / button>
< / p>
}
更新：
而且，由于我怀疑您没有将这些下拉列表放在您的视图中，而是在绘画和乐趣中，但您希望用户在其中选择值，当您提交表单时，您可能希望获取所选值，您将需要生成这些下拉列表的正确名称，以便默认模型binder可以自动检索POST操作中选定的值。不幸的是，由于WebGrid帮助器有点吸引力，不允许您检索当前的行索引，因此您可以使用hack ，因为他的博客中的Haacked显示：
grid.Column（
dropdown，
格式：
@< span>
@ {var index = Guid.NewGuid（）。ToString（）;}
@ Html.Hidden（People.Index，index）
@ Html.DropDownList（People [+ index +] .SelectedValue，Model.Colors）
< / span>
）
现在您可以有一个POST控制器操作，您可以在其中获取所选值表单提交时的每一行：
[HttpPost]
public ActionResult索引（MyViewModel模型）
{
//模型变量将包含People集合
//为包含sele的每行自动绑定cted value
...
}
I'm trying to place a
DropDownListinside aWebGridbut I can't figure out how to do it :(Things I've tried:
grid.Column("Id", "Value", format: ((item) => Html.DropDownListFor(item.SelectedValue, item.Colors)))and
grid.Column(header: "", format: (item => Html.DropDownList("Colors", item.Colors)))and
grid.Column(header: "", format: Html.DropDownList("Colors"))and various others but I couldn't get it to work. Any help is much appreciated.
Model
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; } }
Controller
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); }
View
@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> }
解决方案grid.Column( "dropdown", format: @<span>@Html.DropDownList("Color", (SelectList)item.Colors)</span> )Also in your controller make sure you set the value and text properties of your SelectList and instead of:
Colors = new SelectList(colorList)you should use:
Colors = new SelectList(colorList, "ColorID", "ColorName")Also it seems a bit wasteful to me to define the same
SelectListfor all row items especially if they contain the same values. I would refactor your view models a bit: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; } }and then:
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); } }and in the view:
@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> }
UPDATE:
And since I suspect that you are not putting those dropdownlists for painting and fun in your views but you expect the user to select values inside them and when he submits the form you might wish to fetch the selected values, you will need to generate proper names of those dropdown lists so that the default model binder can automatically retrieve the selected values in your POST action. Unfortunately since the WebGrid helper kinda sucks and doesn't allow you to retrieve the current row index, you could use a hack as the Haacked showed in his blog post:
grid.Column( "dropdown", format: @<span> @{ var index = Guid.NewGuid().ToString(); } @Html.Hidden("People.Index", index) @Html.DropDownList("People[" + index + "].SelectedValue", Model.Colors) </span> )Now you could have a POST controller action in which you will fetch the selected value for each row when the form is submitted:
[HttpPost] public ActionResult Index(MyViewModel model) { // the model variable will contain the People collection // automatically bound for each row containing the selected value ... }
这篇关于WebGrid（）中的MVC 3 DropDownList（）的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
