Click here to Skip to main content
14,267,930 members
Rate this:
Please Sign up or sign in to vote.
See more: , +
(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":
// Updates chosen specialist's group and subgroup
[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();
    //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;

    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.
Posted
Updated 1-May-19 11:05am
Comments
Dominic Burford 1-May-19 11:02am
   
At what point does the AJAX request fail? Are you hitting the Razor page handler? Are you hitting the AJAX success method? What response does your AJAX request get from the page handler?

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Do you know how to use Chrome debugging tools? You should use them to watch this code, see what the request returns and see what happens when it succeeds.

Your code looks to me like it defines two functions in your success method, it doesn't actually call anything? What is OnSuccessed?

As you're using jquery, you should use jquery to set your elements. But overall, I'd recommend drifting away from 2004 and looking into using React or Angular, or even Handlebars, to template your UI rather than looking up the DOM all the time
   

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

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100