如何通过服务器端在 Chosen.js 上设置选项？

Question

我正在使用 ASP.NET MVC 5 开发一个网站，并使用 Chosen.js 进行多项选择。我的操作是这样的：

    [HttpGet]
    public ActionResult Get()
    {       
           var states = GetStates();      
            ViewBag.States = new SelectList(states.OrderBy(o => o.Id), "Value", "Name");
            return View();            
    }

在视图中：

 @Html.ListBoxFor(m => m.States,
        ViewBag.States as SelectList, new Dictionary<string, object>
        {
            {"multiple", "multiple"},
            {"class", "chosen-container-multi"},
            {"placeholder", "State"},
            {"id", "State"}
        });

它工作正常，但我想在加载页面之前预先选择用户状态。可能是这样的：

     ViewBag.States = new SelectList(states.OrderBy(o => o.Id), "Value", "Name","UserStateId");

但它不起作用。有没有办法做到这一点？

Answer 1

首先，您不能将ViewBag 属性命名为与模型属性相同。您的列表框绑定到您的模型属性States，因此选择的选项将基于States 的值。由于您没有将模型返回到您的视图States 为空，因此没有选择任何选项。

首先使用代表您要在视图中显示/编辑的内容的视图模型

public class MyViewModel
{
  public int[] SelectedStates { get; set; }
  public SelectList StatesList { get; set; }
} 

控制器（注意我在这里假设State 包含一个属性int Id（绑定到）和一个属性string Name（显示值），并且您希望使用Id=2 和Id=5)

[HttpGet]
public ActionResult Get()
{ 
  MyViewModel model = new MyViewModel();      
  var states = GetStates().OrderBy(o => o.Id);
  model.StatesList = new SelectList(states, "Id", "Name");  
  model.SelectedStates = new int[] { 2, 5 }; // set the value of the options you want to preselect
  return View(model);            
}

查看

@Html.ListBoxFor(m => m.SelectedStates, Model.StatesList, new { @class = "chosen-container-multi" })

假设您有 10 个状态，Id 介于 1 和 10 之间，那么现在将在第一次呈现页面时选择第 2 和第 5 个选项。当您提交表单时，SelectedStates 属性将包含用户选择的值的数组。

旁注：ListBoxFor() 已经添加了属性multiple="multiple" 和id="SelectedStates"

Answer 2

我采用了这种方法：

在模型上创建了一个名为UserState 的新字符串属性，然后我获取用户状态并将其分配给该属性：

ViewBag.States= new SelectList(states.OrderBy(o => o.Id), "Value", "Name");
var model = new ModelDTO {  UserState = states.Single(p => p.Id.Equals(stateId)).Value};
 return View(model);

然后在视图上我就明白了：

  @Html.ListBoxFor(m => m.States,
    ViewBag.States as SelectList, new Dictionary<string, object>
    {
        {"multiple", "multiple"},
        {"class", "chosen-container-multi"},
        {"placeholder", "State"},
        {"id", "State"}
    });

 <script>
    $(function () {
        $("#StatesListBox").chosen();
        $('#StatesListBox').val("@Model.UserState");
        $('#StatesListBox').trigger("chosen:updated");
    });
</script>