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

Question

我正在使用 ASP.NET MVC 5 开发一个网站，其中多个 select 使用 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"}
        });

它工作正常，但我想在加载页面之前预 select 用户状态。也许是这样的：

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

但它不起作用。有办法吗？

Answer 1

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

首先使用代表您想要在视图中display/edit的视图模型

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>

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

How to set a option on Chosen.js via server side?

asp.net

asp.net-mvc

jquery

jquery-chosen