使用 jQuery 驱动的“选择”下拉的双向数据绑定
Posted
技术标签:
【中文标题】使用 jQuery 驱动的“选择”下拉的双向数据绑定【英文标题】:Two-Way Data Binding using jQuery Driven "Chosen" Drop Down 【发布时间】:2012-10-07 06:14:15 【问题描述】:好的,我有一个 jQuery 版本的 Chosen 应用于 select
在我的页面上正确显示,我使用以下代码完成了此操作。首先我有一个BaseController
,它设置了一个ViewBag
属性,列出了所有可能的类别:
protected override void OnActionExecuted(ActionExecutedContext filterContext)
try
_connection.Open();
this.ViewBag.AvailableCategories = new MultiSelectList(_connection.Query<Category>("select * from Category"), "CategoryID", "Name");
catch (Exception ex)
throw new HttpException(500, ex.Message);
finally
_connection.Close();
base.OnActionExecuted(filterContext);
接下来,当导航到/Event/View/1
时,我使用以下View
方法设置EventController
(注意此控制器基于上述控制器)。
public ActionResult View(int id)
Event evt = null;
try
evt = Event.Where(_connection, id);
if (evt == null)
throw new HttpException(404, "Oops! The event you're looking for does not exist.");
catch (Exception ex)
throw new HttpException(500, ex.Message);
return View(evt);
如您所见,它将模型设置为以下模型。
public class Event
public int EventID get; set;
public int BusinessID get; set;
public string Name get; set;
public string Description get; set;
public int NeighborhoodID get; set;
public IEnumerable<int> CategoryIds
get
if (Categories == null) return new List<int>();
return Categories.Select(c => c.CategoryID).AsEnumerable();
public List<EventCategory> Categories get; set;
public List<EventHours> Hours get; set;
public static Event Where(IDbConnection connection, int id)
Event result = null;
try
connection.Open();
var sql =
@" select * from Event where EventID = @EventID
select * from EventCategory where EventID = @EventID
select * from EventHours where EventID = @EventID";
using (var multiResult = connection.QueryMultiple(sql, new EventID = id ))
result = multiResult.Read<Event>().FirstOrDefault();
if (result != null)
result.Categories = multiResult.Read<EventCategory>().ToList();
result.Hours = multiResult.Read<EventHours>().ToList();
finally
connection.Close();
return result;
最后我在视图中有以下标记。
@html.DropDownListFor(m => m.CategoryIds,
ViewBag.AvailableCategories as MultiSelectList,
new multiple = "multiple", @class = "chzn-container" )
现在,正如我一开始所说,它可以正确显示并按预期列出所有类别。然而,尽管CategoryIds
属性确实列出了两个选定的类别,但它并没有将它们设置(或显示它们)在加载时选择下拉列表中选择。
我不得不进一步假设,如果用户从 Chosen 下拉列表中选择了一个值,它也不会在 post 上正确绑定,因为它不会在选择项目时更改 HTML。
那么,我的问题是,如何正确地将双向数据绑定到 MVC 中的选择下拉菜单?
【问题讨论】:
能不能看一下生成的html,看看选择列表有没有值? @kabaros,是的,SELECT 和生成的 HTML 都有项目。那么,我是不是误会你了,你说的是 value 属性? 是的,我说的是 Select>Option 中的 value 属性 @kabaros,他们确实都有价值。 您的问题到底是什么? Mutliselect 在页面上正确显示,但在 POST 回用户选择时未传回? 【参考方案1】:ListBoxFor
是您应该用于多选列表的助手
替换
@Html.DropDownListFor(m => m.CategoryIds,
ViewBag.AvailableCategories as MultiSelectList,
new multiple = "multiple", @class = "chzn-container" )
与
@Html.ListBoxFor(m => m.CategoryIds,
ViewBag.AvailableCategories as MultiSelectList,
new multiple = "multiple", @class = "chzn-container" )
应该做的伎俩
【讨论】:
以上是关于使用 jQuery 驱动的“选择”下拉的双向数据绑定的主要内容,如果未能解决你的问题,请参考以下文章