jQuery MultiSelect dropdownlist 如何访问结果？

Question

如何从 mvc3/razor 调用的 JQUery 多选下拉列表中获取结果？

http://abeautifulsite.net/blog/2008/04/jquery-multiselect/

Answer 1

多选插件使用 []符号将选定的值发送到服务器。一如既往，我们从编写 View 模型开始:

public class MyViewModel
{
    public IEnumerable<string> SelectedValues { get; set; }

    public IEnumerable<SelectListItem> Items
    {
        get
        {
            return new[]
            {
                new SelectListItem { Value = "1", Text = "item 1" },
                new SelectListItem { Value = "2", Text = "item 2" },
                new SelectListItem { Value = "3", Text = "item 3" },
            };
        }
    }
}

然后是一个 Controller :

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

相应的 View :

@model MyViewModel

<script src="@Url.Content("~/Scripts/jquery.multiSelect.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#SelectedValues").multiSelect();
    });
</script>

@using (Html.BeginForm())
{
    @Html.ListBoxFor(x => x.SelectedValues, Model.Items)
    <button type="submit">OK</button>
}

最后是与 IEnumerable<string> 关联的模型绑定(bind)器类型，它将与 [] 一起使用插件使用的符号:

public class MultiSelectModelBinder : DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var model = (MyViewModel)base.BindModel(controllerContext, bindingContext);
        var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName + "[]");
        if (value != null)
        {
            return value.RawValue;
        }
        return model;
    }
}

最后一部分是在 Application_Start 中注册模型绑定(bind)器:

ModelBinders.Binders.Add(typeof(IEnumerable<string>), new MultiSelectModelBinder());