(After making changes based on
this question I made yesterday)
My goal is to dynamically update two fields every time there's a change made to a dropdown list. In my example, the dropdown is a list of employees, and I need the group/subgroup fields to update every time it changes. I'm attempting to call the C# method I've created which runs 2 linq queries and sets the result to the fields. I've verified that this method works properly.
I now have the following method in my file "Edit.html.cs":
[BindProperty]
public GroupModel Group { get; set; }
public class GroupModel
{
public string subGroup { get; set; }
public string group { get; set; }
}
public ActionResult OnPostSearchCurrGroup()
{
var subgroupQuery = (from c in _context.ppcc_matrix
from e in _context.employees
from s in _context.subGroups
where c.employeesID == e.Id
where e.subGroupsID == s.Id
select s.subgrp_nm).FirstOrDefault();
var groupQuery = (from c in _context.ppcc_matrix
from e in _context.employees
from s in _context.subGroups
from g in _context.groups
where c.employeesID == e.Id
where e.subGroupsID == s.Id
where s.groupsID == g.Id
select g.grp_nm).FirstOrDefault();
var result = new GroupModel { subGroup = subgroupQuery, group = groupQuery };
return new JsonResult(result);
}
I have these three fields in "Edit.cshtml":
<div class="form-group">
<label asp-for="ppcc_matrix.employeesID" class="control-label"></label>
<select asp-for="ppcc_matrix.employeesID" class="form-control" id="employee" asp-items="ViewBag.employeesID">
<option disabled selected value="0" style="display:none">--select--</option>
</select>
</div>
<div class="form-group">
<label asp-for="Group.group" id="grptxt">Group</label>
<input asp-for="Group.group" id="grpnm" class="form-control" disabled />
</div>
<div class="form-group">
<label asp-for="Group.subGroup" id="subgrptxt">SubGroup</label>
<input asp-for="Group.subGroup" id="subgrpnm" class="form-control" disabled />
</div>
Using the three id's I've assigned to them, I run this javascript and ajax request in the same file:
@* Dynamically updates the view to show chosen specialist's group and subgroup*@
<script language="javascript" type="text/javascript">
var employee = document.getElementById('employee');
employee.addEventListener('change', UpdateGroup);
function UpdateGroup() {
$.ajax({
type: 'post',
url: '/edit?handler=searchcurrgroup',
contenttype: "application/json; charset=utf-8",
datatype: 'json',
data: '{}',
async: 'true',
success: function (data) {
OnSuccessed(data.subGroup) {
document.getElementById('subgrpnm').append(subgroupQuery);
}
OnSuccessed(data.group) {
document.getElementById('grpnm').append(groupQuery);
}
}
})
}
</script>
Still, nothing happens and I receive no errors.
What I have tried:
Multiple articles, submitted as a comment on my similar previous question as well.
This article has been helpful, but figuring out how to display the results is confusing to me.