3
Answers

asp.net core json and javascript not working properly

Marius Vasile

Marius Vasile
3y
443
1
I have four dropdownlists, for three of them data is provided by json. Two are working properly (first two) the other are not. I was looking for errors for couple of hours and I don't see it. I may be tired or I need more dioptries to my glasses :)
 
View
  1. <div class="col-3">  
  2.                     <select id="HazClass" class="form-control border-danger" asp-items="@Model.HazardClasses" >  
  3.                         <option value="">--Select Hazard Class--</option>  
  4.                     </select>  
  5.                     <span asp-validation-for="PTWHazId.HazClass" class="text-danger"></span>  
  6.                     <input hidden asp-for="PTWHazId.HazClass" id="hazClass" />  
  7.                 </div>  
  8.   
  9.                 <div class="col-3">  
  10.                     <select id="HazDetail" class="form-control border-danger" asp-items="@(new SelectList(string.Empty, "IdH", "HazDetail"))" >  
  11.                         <option value="">--Select Hazard Detail--</option>  
  12.                     </select>  
  13.                     <span asp-validation-for="PTWHazId.HazDetails" class="text-danger"></span>  
  14.                     <input hidden asp-for="PTWHazId.HazDetails" id="hazDetail" />  
  15.                 </div>  
  16.                 <div class="col-3">  
  17.                     <select id="ConClass" class="form-control border-danger" asp-items="@(new SelectList(string.Empty, "IdCC", "ConClass"))" >  
  18.                         <option value="">--Select Control Class--</option>  
  19.                     </select>  
  20.                     <span asp-validation-for="PTWHazId.ConClass" class="text-danger"></span>  
  21.                     <input hidden asp-for="PTWHazId.ConClass" id="conClass" />  
  22.                 </div>  
  23.                 <div class="col-3">  
  24.                     <select id="ConDetail" class="form-control border-danger" asp-items="@(new SelectList(string.Empty, "IdCC", "ConDetail"))" onchange="func4()">  
  25.                         <option value="">--Select Control Details--</option>  
  26.                     </select>  
  27.                     <span asp-validation-for="PTWHazId.ConDetail" class="text-danger"></span>  
  28.                     <input hidden asp-for="PTWHazId.ConDetail" id="conDetail" />  
  29.                 </div>  
json
 
  1. HazardClasses = await _context.HazardClasses.Include(s => s.HazardSource).Where(s => s.HazardSource.OrgID == orgid && s.HazardSource.HazSource == "Process").Select(a =>  
  2.                                         new SelectListItem  
  3.                                         {  
  4.                                             Value = a.IdHC.ToString(),  
  5.                                             Text = a.HazClass  
  6.                                         }).ToListAsync();  
  7.   
  8. .............  
  9.         //Hazard Identification dropdown lists  
  10.           
  11.         public async Task<JsonResult> OnGetHazDetailAsync(string id)  
  12.         {  
  13.             var hazDetails = await _context.HazardDetails.Where(s => s.IdHC == id).ToListAsync();  
  14.   
  15.             return new JsonResult(new SelectList(hazDetails, "IdH", "HazDetail"));  
  16.         }  
  17.         public async Task<JsonResult> OnGetControlClassAsync(string id)  
  18.         {  
  19.             var conClass = await _context.ControlClasses.Where(s => s.IdH == id).ToListAsync();  
  20.   
  21.             return new JsonResult(new SelectList(conClass, "IdCC", "ConClass"));  
  22.         }  
  23.         public async Task<JsonResult> OnGetControlDetailAsync(string id)  
  24.         {  
  25.             var conDetails = await _context.ControlClasses.Where(s => s.ConClass == id).ToListAsync();  
  26.   
  27.             return new JsonResult(new SelectList(conDetails, "IdCC", "ConDetail"));  
  28.         }  
javascript
 
  1. $(function () {  
  2.     $("#HazClass").on("change", function () {  
  3.         var categoryId = $(this).val();  
  4.         $("#HazDetail").empty();  
  5.         $("#HazDetail").append("<option value=''>--Select Hazard Detail--</option>");  
  6.         $.getJSON(`?handler=HazDetail&id=${categoryId}`, (data) => {  
  7.             $.each(data, function (i, item) {  
  8.                 $("#HazDetail").append(`<option value="${item.value}">${item.text}</option>`);  
  9.             });  
  10.         });  
  11.   
  12.         var data = $("#HazClass :selected").text();  
  13.         $("#hazClass").val(data);  
  14.     });  
  15. });  
  16. $(function () {  
  17.     $("#HazDetail").on("change", function () {  
  18.         var categoryId = $(this).val();  
  19.         $("#ConClass").empty();  
  20.         $("#ConClass").append("<option value=''>--Select Control Class--</option>");  
  21.         $.getJSON(`?handler=ControlClass&id=${categoryId}`, (data) => {  
  22.             $.each(data, function (i, item) {  
  23.                 $("#ConClass").append(`<option value="${item.value}">${item.text}</option>`);  
  24.             });  
  25.         });  
  26.   
  27.         var data = $("#HazDetail :selected").text();  
  28.         $("#hazDetail").val(data);  
  29.     });  
  30. });  
  31. $(function () {  
  32.     $("#ConClass").on("change", function () {  
  33.         var data = $("#ConClass :selected").text();  
  34.         var categoryId = data;  
  35.         $("#ConDetail").empty();  
  36.         $("#ConDetail").append("<option value=''>--Select Control Detail--</option>");  
  37.         $.getJSON(`?handler=ControlDetail&id=${categoryId}`, (data) => {  
  38.             $.each(data, function (i, item) {  
  39.                 $("#ConDetail").append(`<option value="${item.value}">${item.text}</option>`);  
  40.             });  
  41.         });  
  42.   
  43.         var data = $("#ConClass :selected").text();  
  44.         $("#conClass").val(data);  
  45.     });  
  46. });  
 
 
 
 
Answers (3)
Next Recommended Forum