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

Я очень новичок в 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);
    }

Мои вопросы: Как установить атрибуты класса для каждого отдельного параметра. Или если у кого-то есть предложение о том, как это сделать по-другому, я открыт для любого решения. Спасибо.

Ответ 1

Загрузка всех подэлементов на страницу, когда страница загружается изначально, для меня это не очень хорошая идея. Что делать, если у вас есть 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, чтобы вернуть подкатегории для выбранной категории. Мы возвращаем ответ как 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!
    }

Ответ 2

Вам нужно добавить другой метод для обработки обратной передачи и фильтрации опций подкатегорий. Что-то вроде этого:

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

Edit

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