如何根据用户从下拉列表中的选择显示多个复选框选择？

Question

我想在我的 MVC3 razor 应用程序上显示一个下拉框，用户可以从中选择类别，并根据他的选择显示子类别，这些子类别是复选框，以便用户可以选择多个子类别。

谁能帮我弄到这个？

下面是我从 Web 服务收到的 json，我将其反序列化为对象，那么如何将该对象分配给两个不同的列表类别（下拉列表）和子类别（复选框）？

JSON：

 {
 "Code":0,
 "Status":"Done",
 "Categories":[
 {
  "ID":1,
  "Name":"Eat",
    "Subcategories":[
        {"Flag":false,"ID":100,"Name":"Food"},
        {"Flag":false,"ID":101,"Name":"Fast Food"},         
        {"Flag":false,"ID":102,"Name":"Other"}
    ]
        },
    {
    "ID":2,
    "Name":"Entertainment",
     "Subcategories":[
        {"Flag":false,"ID":100,"Name":"All"},               
        {"Flag":false,"ID":101,"Name":"Movie"},
        {"Flag":false,"ID":102,"Name":"Other"}
    ]
  },
  }
  ]
  }

实体：

public class MyData
{
  public int Code { get; set; }
  public string Status { get; set; }
  public List<Category> Categories { get; set; }
}

public class Category
{
  public string Name { get; set; }
  public int ID { get; set; }
  public List<Subcategory> Subcategories { get; set; }
}

public class Subcategory
{
  public string Name { get; set; }
  public int ID { get; set; }
  public bool Flag { get; set; }
}

Answer 1

您可以使用 AJAX。订阅下拉列表的更改事件并触发 AJAX 请求，以传递所选类别的控制器操作。该操作将在数据库中查询相应的子类别，并返回带有相应复选框的部分视图，该复选框将被注入到 DOM 中。

因此，假设您的视图中已经有一个类别的下拉列表：

@Html.DropDownListFor(
    x => x.CategoryId, 
    Model.Categories, 
    new { 
        id = "categories",
        data_subcategoriesurl = Url.Action("subcategories", "somecontroller")
    }
)

还有一些 div 将包含页面某处的子类别：

<div id="subcategories">
    @Html.EditorFor(x => x.SubCategories, "SubCategories")
</div>

然后你可以有一个 SubCategories.cshtml 部分，它将呈现复选框列表：

@model IList<CategoryViewModel>
@{
    // we change the HTML field prefix so that input elements
    // such as checkboxes have correct names in order to be able
    // to POST the values back 
    ViewData.TemplateInfo.HtmlFieldPrefix = "SubCategories";
}
@for (var i = 0; i < Model.Count; i++)
{
    <div>
        @Html.LabelFor(x => x[i].IsSelected, Model.CategoryName)
        @Html.CheckBoxFor(x => x[i].IsSelected)
    </div>
}

现在您可以在单独的 javascript 文件中订阅下拉菜单的更改事件：

$(function() {
    $('#categories').change(function() {
        var subcategoriesUrl = $(this).data('subcategoriesurl');
        var selectedCategoryId = $(this).val();
        $('#subcategories').load(subcategoriesUrl, { id: selectedCategoryId });
    });
});

最后是 SubCategories 操作，将使用 AJAX 调用：

public ActionResult SubCategories(int? id)
{
    var subCategories = Repository.GetSubCategories(id);
    return View(subCategories);
}