Как отфильтровать параметры выпадающего списка с помощью другого выпадающего списка

Question

Я очень новичок в ASP.NET, и я использую структуру MVC 3 для ASP.Net. Я пытался отфильтровать варианты выпадающего списка, используя другой снимок, и я не могу этого сделать. Сначала я пытался сделать это, заполнив список основных категорий и подкатегорий и загрузив их на страницу. Затем установите атрибут класса для каждой подкатегории в свою родительскую категорию. Наконец, при щелчке родительской категории из первого раскрывающегося списка отображается только дочерняя подкатегория и скрыть остальные (так я это сделал ранее в 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

Загрузка всех элементов Sub на страницу, когда страница загружается изначально, для меня это не очень хорошая идея. Что делать, если у вас есть 100 категорий, и у каждой категории есть 200 предметов подкатегорий? Вы действительно хотите загрузить 20000 предметов?

Я думаю, вы должны сделать дополнительный способ загрузки. Укажите раскрывающееся меню «Основная категория» со значениями. Позвольте пользователю выбрать один из них. Сделайте звонок на Сервер и получите подкатегории, принадлежащие выбранной категории, и загрузите эти данные во второй раскрывающийся список. Вы можете использовать jQuery ajax для этого, чтобы пользователь не почувствовал полную перезагрузку страницы, когда он выбрал один снимок. Вот как я это сделаю.

Создайте ViewModel, который имеет оба свойства категории

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 Action возвращает это сильно типизированный с содержанием для 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 чтобы вернуть подкатегории для выбранной категории.Мы возвращаем ответ как 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);  
} 

Редактировать

Btw, если вам все еще нужно установить имя класса в другой в раскрывающемся списке, вы не можете сделать это, как это. Самый простой способ - добавить свойство «SelectedCategoryName» к вашей модели и ссылаться как {@class = ModelSelectedCategoryName}.