如何使用另一個下拉列表過濾下拉列表中的選項

Question

我對ASP.NET很新，我正在使用ASP.Net的MVC 3框架。我試圖使用另一個下拉列表來篩選下拉列表的選項，但我無法做到這一點。我試圖通過填充主要類別和子類別的列表並將它們加載到頁面，然後將每個子類別的選項的類屬性設置爲它們的父類別。最後，從第一個下拉列表中單擊父類別，只顯示子類別並隱藏其餘部分（這是我以前在java中做過的）。但在ASP.Net MVC的HTML代碼是如此不同，我甚至無法設置下拉的每個選項的類屬性，它通常爲所有下拉菜單設置類而不是每個選項。這就是我現在所擁有的 這是我的看法

<p> 
@Html.LabelFor(model => model.CategoryId) 
@Html.DropDownListFor(x => x.CategoryId , new SelectList(Model.Categories, "CategoryId", "CategoryName"), new { onchange= "this.form.submit();"}) 
</p> 

<p> 
@Html.LabelFor(model => model.SubCategories) 
@Html.DropDownListFor(x => x.SubCategories, new SelectList(Model.SubCategories, "SubCategoryId", "SubCategoryName"), new { @class = "Category1.categoryname" }) 
</p> 

這是我的模型

public class TestQuestionsViewModel 
{ 
    public string CategoryId { get; set; } 
    public IEnumerable<Category> Categories { get; set; } 

    public string SubCategoryId { get; set; } 
    public IEnumerable<SubCategory> SubCategories { get; set; } 
} 

這是我的控制器類方法

public ActionResult Create() 
    { 

     var model = new TestQuestionsViewModel 
     { 

      Categories = resetDB.Categories.OrderBy(c => c.categoryid), 
      SubCategories = resetDB.SubCategories.OrderBy(sc => sc.subcategoryid) 
     }; 
    return View(model); 
    } 

我的問題是如何設置每個單獨選項的類屬性。或者，如果任何人有關於如何以不同方式做到這一點的建議，我願意提供任何解決方案。謝謝。

Answer 1

當頁面最初加載時，將所有子項加載到頁面，對我來說似乎不是一個好主意。如果您有100個分類，每個分類有200個子分類項目會怎樣？你真的想裝20000個物品嗎？

我認爲你應該做一個漸進的加載方式。提供主類別下拉列表中的值，讓用戶從中選擇一個項目。撥打服務器電話，讓子類別屬於選定的類別，然後將該數據加載到第二個下拉列表中。您可以使用jQuery ajax來做到這一點，以便用戶在選擇一個下拉列表時不會感覺到完整的頁面重新加載。這是我將如何做到的。

創建同時具有類別屬性

public class ProductViewModel 
{ 
    public int ProductId { set;get;} 
    public IEnumerable<SelectListItem> MainCategory { get; set; } 
    public string SelectedMainCatId { get; set; } 
    public IEnumerable<SelectListItem> SubCategory { get; set; } 
    public string SelectedSubCatId { get; set; } 
} 

讓你的GET操作方法返回強類型的觀點與MainCategory內容充滿

public ActionResult Edit() 
{ 
    var objProduct = new ProductViewModel();    
    objProduct.MainCategory = new[] 
    { 
     new SelectListItem { Value = "1", Text = "Perfume" }, 
     new SelectListItem { Value = "2", Text = "Shoe" }, 
     new SelectListItem { Value = "3", Text = "Shirt" } 
    }; 
    objProduct.SubCategory = new[] { new SelectListItem { Value = "", Text = "" } }; 
    return View(objProduct); 
} 

，並在你的強類型視圖，

視圖模型

@model MvcApplication1.Models.ProductViewModel 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
@using (Html.BeginForm()) 
{  
    @Html.DropDownListFor(x => x.SelectedMainCatId, new SelectList(Model.MainCategory,"Value","Text"), "Select Main..") 
    @Html.DropDownListFor(x => x.SelectedSubCatId, new SelectList(Model.SubCategory, "Value", "Text"), "Select Sub..")  
    <button type="submit">Save</button> 
} 
<script type="text/javascript"> 
    $(function() { 
     $("#SelectedMainCatId").change(function() { 
      var val = $(this).val(); 
      var subItems=""; 
      $.getJSON("@Url.Action("GetSub","Product")", {id:val} ,function (data) { 
       $.each(data,function(index,item){ 
       subItems+="<option value='"+item.Value+"'>"+item.Text+"</option>" 
       }); 
       $("#SelectedSubCatId").html(subItems) 
      }); 
     }); 
    }); 
</script> 

將GetSub操作方法添加到您的con troller返回所選類別的子類別。我們正在返回響應爲JSON

public ActionResult GetSub(int id) 
{ 
    List<SelectListItem> items = new List<SelectListItem>(); 
    items.Add(new SelectListItem() { Text = "Sub Item 1", Value = "1" }); 
    items.Add(new SelectListItem() { Text = "Sub Item 2", Value = "8"}); 
    // you may replace the above code with data reading from database based on the id 

    return Json(items, JsonRequestBehavior.AllowGet); 
} 

現在選定的數值會在你HTTPOST操作方法

[HttpPost] 
    public ActionResult Edit(ProductViewModel model) 
    { 
     // You have the selected values here in the model. 
     //model.SelectedMainCatId has value! 
    } 

Answer 2

您需要添加另一種方法來處理回發並篩選子類別選項。事情是這樣的：

[HttpPost] 
public ActionResult Create(TestQuestionsViewModel model) 
{ 
    model.SubCategories = resetDB.SubCategories 
      .Where(sc => sc.categoryid == model.SubCategoryId) 
      .OrderBy(sc => sc.subcategoryid); 
    return View(model);  
} 

編輯

順便說一句，如果你還需要爲類名設置爲其他下拉菜單，你不能那樣做。最簡單的方法是將「SelectedCategoryName」屬性添加到您的模型，並參考{@class = ModelSelectedCategoryName}。