Click here to Skip to main content
15,664,403 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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.

Using this article and others, 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 just fine. This is located in "Edit.cshtml.cs":
// Displays chosen employee's group and subgroup
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();
    subGroups.subgrp_nm = subgroupQuery;

    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();
    groups.grp_nm = groupQuery;

    return Page();
}


In my "Edit.cshtml" file, I have my 3 fields:
<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="groups.grp_nm" id="grptxt">Group</label>
    <input asp-for="groups.grp_nm" id="grpnm" class="form-control" disabled />
</div>
<div class="form-group">
    <label asp-for="subGroups.subgrp_nm" id="subgrptxt">SubGroup</label>
    <input asp-for="subGroups.subgrp_nm" id="subgrpnm" class="form-control" disabled />
</div>


and then my javascript:
<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'
        })
    }
</script>


Problem: It does nothing when I change the employee field. My handler is named correctly, it's an onpost method..
It works if I set it as the asp-page-handler on a button, but of course it would make more sense to use an ajax call to do display it automatically.

What I have tried:

Multiple articles such as this one and the code above.
Posted
Updated 30-Apr-19 14:55pm

The difference between the samples is all in what you are returning.

The last line in your controller action is return Page();, which will return a plain Page Result with no data being passed into it.

The last line of the samples are all return new JsonResult(lstString); which will return a JsonResult populated with the lstString model as a data source.

So what your task is going to be is to figure out how to get the results of your 2 queries into one model and pass that into the appropriate return action
 
Share this answer
 
Comments
Member 14164795 1-May-19 7:44am    
Thank you. I've set variable "result" to pass both of my variables as a JsonResult:
var result = new { subgroupQuery, groupQuery };
return new JsonResult(result);

My next question is, how do I set the result for my group and subgroup fields in the js/html now? The article I reference is confusing.
Member 14164795 1-May-19 8:11am    
Here's what I've attempted:

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);
}
}
})
}


Still, nothing happens
OnPostSearchCurrGroup() method needs to return Json object,hence it should be of type JsonResult instead actionresult and should return new JsonResult(lstString) instead return Page().
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900