使用 jQuery 驱动的“选择”下拉的双向数据绑定

Posted 2023-04-13

【中文标题】使用 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" )

应该做的伎俩