3
Answers

asp.net core razor pages - cascade dropdownlists

Marius Vasile

Marius Vasile
4y
2.2k
1
I tried to implement the example here 
 
https://www.c-sharpcorner.com/article/creating-simple-cascading-dropdownlist-in-asp-net-core-mvc-with-new-tag-helpers/
 
into my Razor page project but the second dropdown doesn't get any data. What I did is
 
View Page including script
 
  1. <div class="col-2">  
  2.     <label for="PTWReviewD.Category" class="form-control badge-primary">PTW Review Category</label>  
  3.     <select asp-for="PTWReviewD.Category" class="form-control border-warning" asp-items="Model.PTWRCList">  
  4.         <option value="">--Select PTW Review Category--</option>  
  5.     </select>  
  6.     <span asp-validation-for="PTWReviewD.Category" class="text-danger"></span>  
  7. </div>  
  8. <div class="col-2">  
  9.     <label for="PTWReviewD.SubCategory" class="form-control badge-primary">PTW Review Subcategory</label>  
  10.     <select asp-for="PTWReviewD.SubCategory" class="form-control border-warning" asp-items="@(new SelectList(string.Empty, "RSubCategoryID", "RSubCategoryS"))">  
  11.         <option value="">--Select PTW Review Subcategory--</option>  
  12.     </select>  
  13.     <span asp-validation-for="PTWReviewD.SubCategory" class="text-danger"></span>  
  14. </div>  
  15.   
  16. @Html.AntiForgeryToken()  
  17.   
  18. @section scripts{  
  19.   
  20. <script>  
  21.     $(function () {  
  22.         $("#Category").on("change", function func() {  
  23.             var url = '@Url.Content("~/")' + "PTWReview/OnGetSubCategoriesAsync";  
  24.             var idSource = "#RCategoryID";  
  25.   
  26.             $.getJSON(url, { RCategoryID: $(idSource).val() }, function (data) {  
  27.                 var items = '';  
  28.                 $("#SubCategory").empty();  
  29.                 $.each(data, function (i, ptwrsclist) {  
  30.                     items += "<option value='" + ptwrsclist.RSubCategoryID + "'>" + ptwrsclist.RSubCategoryS + "</option>";  
  31.                 });  
  32.                 $("#SubCategory").html(items);  
  33.             });  
  34.         });  
  35.     });  
  36. </script>  
  37.   
  38. }  
Getting the data with
 
  1. public async Task<IActionResult> OnGetAsync(int ptwNoId)  
  2.         {  
  3.               
  4.             //PTWRCategory  
  5.             PTWRCList = await _context.PTWRCategories.Select(a =>   
  6.                                        new SelectListItem  
  7.                                        {  
  8.                                            Value = a.RCategoryID.ToString(),  
  9.                                            Text = a.RCategoryS  
  10.                                        }).ToListAsync();  
  11.   
  12.   
  13.             return Page();  
  14.         }  
  15.   
  16.         public async Task<JsonResult> OnGetSubCategoriesAsync(int RCategoryID)  
  17.         {  
  18.             PTWRSCList = await _context.PTWRSubCategories.Where(a => a.RCategoryID == RCategoryID).Select(a =>  
  19.                                        new SelectListItem  
  20.                                        {  
  21.                                            Value = a.RSubCategoryID.ToString(),  
  22.                                            Text = a.RSubCategoryS  
  23.                                        }).ToListAsync();  
  24.   
  25.             return new JsonResult(new SelectList(PTWRSCList, "RSubCategoryID", "RSubCategoryS"));  
  26.   
  27.         }  
The first ddl is filled with data but the second is not and I have no errors. What am I doing wrong? 
 
 
 
 
 
 
Answers (3)
Next Recommended Forum