Как сделать каскадный выпадающий список в asp.net ядро mvc?

ProgramBox

Как сделать каскадный выпадающий список в asp.net ядро mvc?

Post author:admin
Запись опубликована:20 ноября, 2022
Post category:Вопросы по программированию

#asp.net-core #asp.net-core-mvc

#asp.net-ядро #asp.net-core-mvc

Вопрос:

Я пытался раньше, но не могу добиться успеха в этом.

Может кто-нибудь рассказать мне с примером?

1. множество руководств и видеороликов о том, как сделать это шаг за шагом, чтобы вы могли следовать следующим образом c-sharpcorner.com/article /…

2. вы можете использовать вызов jQuery Ajax при изменении родительского значения выпадающего списка. вот пример с раскрывающимся списком категорий и подкатегорий — geeksarray.com/blog /…

3. Я тоже пробовал этот метод, но не могу работать

Ответ №1:

Вы могли бы обратиться к следующим шагам для создания каскадного выпадающего списка в asp.net ядро MVC.

Создание моделей с отношениями:

  public class Category
 {
     public int Id { get; set; }

     [Required]
     [Display(Name = "Category Name")]
     public string CategoryName { get; set; }

     public ICollection<SubCategory> SubCategories { get; set; }
 }

 public class SubCategory
 {
     public int Id { get; set; }

     [Required]
     [Display(Name = "SubCategory Name")]
     public string SubCategoryName { get; set; }

     public int CategoryID { get; set; }

     public Category Category { get; set; }
 }

Затем используйте EF core migration для создания связанных таблиц в базе данных или создайте сервис для установки исходных данных. Здесь я создаю сервис:

  public interface IRepository
 {  
     List<Category> GetCategories(); 
 }

 public class Repository : IRepository
 {
     private readonly ApplicationDbContext db;
     public Repository(ApplicationDbContext context)
     {
         db = context;
     }
     //you can also query the database and get the data.

     public List<Category> GetCategories()
     {
         List<Category> categories = new List<Category>()
         {
             new Category(){ Id=101, CategoryName="Category 1", 
                 SubCategories= new List<SubCategory>(){
                 new SubCategory(){ Id=1001, SubCategoryName="SubCategory 1.1"},
                 new SubCategory(){ Id=1002, SubCategoryName="SubCategory 1.2"},
                 new SubCategory(){ Id=1003, SubCategoryName="SubCategory 1.3"},
                 }
             },
             new Category(){ Id=102, CategoryName="Category 2",
                 SubCategories= new List<SubCategory>(){
                 new SubCategory(){ Id=1001, SubCategoryName="SubCategory 2.1"},
                 new SubCategory(){ Id=1002, SubCategoryName="SubCategory 2.2"},
                 new SubCategory(){ Id=1003, SubCategoryName="SubCategory 2.3"},
                 }
             },
             new Category(){ Id=103, CategoryName="Category 3",
                 SubCategories= new List<SubCategory>(){
                 new SubCategory(){ Id=1001, SubCategoryName="SubCategory 3.1"},
                 new SubCategory(){ Id=1002, SubCategoryName="SubCategory 3.2"},
                 new SubCategory(){ Id=1003, SubCategoryName="SubCategory 3.3"},
                 }
             },

         };

         return categories;
     }
 }

Зарегистрируйте службу при запуске.Метод конфигурирования служб:
```
      services.AddTransient<IRepository, Repository>();
 
```

Затем в контроллере MVC, используя следующий код, чтобы получить категорию и подкатегорию:

  public class HomeController : Controller
 { 
     private readonly ApplicationDbContext _context; //db context.
     private readonly IRepository _repository;
     public HomeController( ApplicationDbContext context, IRepository repository)
     { 
         _context = context; 
         _repository = repository;
     }

     public IActionResult CreateIndex() {

         //get the categories.
         ViewBag.CategoryId = _repository.GetCategories().Select(c => new SelectListItem { Value= c.Id.ToString(),Text = c.CategoryName }).ToList();

         return View();
     }
     //get Subcategory based on the category id
     public IActionResult GetSubCategory(int cid)
     {
         var SubCategory_List = _repository.GetCategories().Where(s => s.Id == cid).FirstOrDefault().SubCategories.Select(c => new { Id = c.Id, Name = c.SubCategoryName }).ToList();
         return Json(SubCategory_List);
     }
     [HttpPost]
     public IActionResult CreateIndex(ProductViewModel product)
     { 
         return View();
     }

кодируйте на странице просмотра (createIndex.cshtml), заполняйте только выпадающий список категорий при загрузке страницы, затем с помощью jQuery вызывайте метод действия и заполняйте подкатегорию:

  @model MVCDemo.Models.ProductViewModel

 @{
     ViewData["Title"] = "CreateIndex";
 }

 <div class="row">
     <div class="col-md-4">
         <form asp-action="CreateIndex">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             <div class="form-group">
                 <label asp-for="Name" class="control-label"></label>
                 <input asp-for="Name" class="form-control" />
                 <span asp-validation-for="Name" class="text-danger"></span>
             </div>
             <div class="form-group"> 
                     <label asp-for="CategoryTypeId" class="control-label">Category Type</label> 
                     <select asp-for="CategoryTypeId" asp-items="ViewBag.CategoryId" class="form-control">
                         <option value="">Select Category</option>
                     </select>  
             </div>
             <div class="form-group"> 
                     <label asp-for="SubCategoryTypeId" class="control-label">SubCategory Type</label> 
                     <select asp-for="SubCategoryTypeId" class="form-control"></select> 
             </div>
             <div class="form-group">
                 <input type="submit" value="Create" class="btn btn-primary" />
             </div>
         </form>
     </div>
 </div>

 @section Scripts{ 
 <script>
     $(function () {
         $("select#CategoryTypeId").change(function () {
             var cid = $(this).val();

             $("select#SubCategoryTypeId").empty();

             $.getJSON(`/Home/GetSubCategory?cid=${cid}`, function (data) {
                 //console.log(data);
                 $.each(data, function (i, item) {
                     $("select#SubCategoryTypeId").append(`<option value="${item.id}">${item.name}</option>`);
                 });
             });
         })
     });
 </script>
 }

Скриншот, как показано ниже:

1. Как я могу сделать это с помощью извлечения данных из базы данных? ваш метод верен, но я попытался извлечь данные из своей базы данных, и он не сработал (с использованием EF)

2. Привет @DishankPatil, вы сталкиваетесь с какой-либо ошибкой при извлечении данных из базы данных? Из вашего описания вы используете EF вместо EF core, верно?

3. используя EF core, и у меня нет никаких ошибок при извлечении данных из базы данных, но моя подкатегория не может отображаться при использовании базы данных для извлечения данных. Ваш метод правильный и работает правильно, но с помощью базы данных я не могу получить вторые выпадающие данные после выбора первого выпадающего списка

4. Во-первых, вы могли бы установить точку останова в методе действия GetSubCategory и проверить, можете ли вы получить правильный идентификатор категории. Затем, на основе идентификатора категории для запроса таблицы подкатегорий, код, подобный этому: var SubCategory_List=_db.SubCategory.Where(s => s.CategoryId == cid).Select(c => new { Id = c.Id, Name = c.SubCategoryName }).ToList(); , вы также можете установить точку останова для проверки результата, а затем вернуть этот список. Наконец, если все еще не работает, установите отладчик в методе jquery, убедитесь, что вы получаете данные и используете правильный JS-селектор для заполнения записей.

Ответ №2:

В этом не должно быть ничего особенного в ASP.Net Core, поскольку представления по-прежнему создаются на основе базовых HTML и CSS, и вы можете использовать JS.

Я бы рекомендовал следовать этому руководству от W3Schools по теме: https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp

Как вы можете видеть, в руководстве этот вложенный массив используется в качестве выпадающих данных:

 var subjectObject = {
  "Front-end": {
    "HTML": ["Links", "Images", "Tables", "Lists"],
    "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
    "JavaScript": ["Variables", "Operators", "Functions", "Conditions"] 
  },
  "Back-end": {
    "PHP": ["Variables", "Strings", "Arrays"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}

Если ваши выпадающие данные статичны, вы можете напрямую поместить их в код JS, но я бы рекомендовал сгенерировать их на стороне сервера, а затем либо:

передайте его как данные представления, сериализуйте его в json и замените инициализацию массива в коде JS вашей буквальной строкой json
выполните второй запрос от клиента к серверу (например, используя XHR) к какой-либо конечной точке API и загрузите выпадающие данные в формате json, затем десериализуйте их и поместите данные в выпадающий массив данных. (В этом случае не забудьте перезагрузить фактические параметры выпадающих элементов)

Не стесняйтесь обращаться за разъяснениями, если что-то было нелегко понять.