Как отобразить выбор нескольких флажков на основе выбора пользователя из выпадающего списка?

Question

Я хочу отобразить раскрывающийся список в моем бритвенном приложении MVC3, из которого пользователь может выбрать категорию, и на основе своего выбора я хочу отобразить подкатегории, которые являются флажками, чтобы пользователь мог выбрать несколько подкатегорий.

Может кто-нибудь помочь мне, как получить это?

Ниже мой 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);
}