c# - 使用 jQuery 驱动的双向数据绑定(bind) "Chosen"下拉

Question

好吧，我有一个 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 时，我有 EventController 设置(注意此 Controller 基于上述 Controller )以下 View 方法。

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;
    }
}

最后，我在 View 中有了以下标记。

@Html.DropDownListFor(m => m.CategoryIds,
    ViewBag.AvailableCategories as MultiSelectList,
    new { multiple = "multiple", @class = "chzn-container" })

现在，正如我一开始所说，它可以正确显示并按预期列出所有类别。然而，即使 CategoryIds 属性实际上列出了两个选定的类别，它并没有将它们设置(或为此显示它们)作为加载时选择的下拉列表中的选定类别。

我不得不进一步假设，如果用户从“选择”下拉列表中选择了一个值，那么它也不会在发布时正确绑定(bind)，因为它不会在选择项目时更改 HTML。

所以，我的问题是，如何正确地将双向数据绑定(bind)到 MVC 中的 Chosen 下拉列表？

Answer 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" })

应该可以解决问题