Ho根據用戶從下拉列表中選擇顯示多個複選框選擇？

Question

我想在我的MVC3剃鬚刀應用程序中顯示一個下拉框，用戶可以從中選擇類別並根據他的選擇我想顯示覆選框的子類別，以便用戶可以選擇多個子類別。

任何人都可以幫助我如何得到這個？

下面是我從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); 
}