Question Ajax request not return branches drop down List based on company drop down list selected value?

[ahmedaziz]

I working on MVC razor page with .NET core 7 .I face issue Ajax request not return branches drop down list based on selected value from drop down list country .

with another meaning I need cascade branch drop down list based on country drop down list by using ajax request .

so data display data on branches drop down list will be

select iBranchCode,vBranchDesc from branchs where companyno=companyno (selected value on drop down list company)

I try but not give me result

1-create model branches

public class Branch

    {

        [Key]

        public string iBranchCode { get; set; }

        public string vBranchDesc { get; set; }

        public string CompanyNo { get; set; }

        public string CompanyName { get; set; }

    }

2- on razor page AddUser.cshtml.cs

public class AddUserModel : PageModel

    {

    [BindProperty]

    public UC.ADC.Core.Entities.SQL.User  User { get; set; }

    private readonly ADCContext _db;

        public AddUserModel(ADCContext db)

        {

            _db = db;

            userModel = new AddUserViewModel();

          

        }

  public void OnGet()

        {

            userModel.Branches  = _db.Branch.ToList();

            userModel.Companies = GetCompanies();

        }

public JsonResult GetRelatedBranches(string companyId)

        {

            var Branches = _db.Branch.Where(p => p.CompanyNo == companyId).ToList();



            return new JsonResult(Branches);

          

        }

    }

3-on html page of AddUser.cshtml

@page "/AddUser"

@model UC.ADC.Host.Pages.Users.AddUserModel

 <form method="post">

        <div class="form-group row">

            <label for="company-select" class="col-sm-1 col-form-label" style="font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">Company</label>
<div class="col-sm-3">
<select id="company-select" asp-for="User.CompanyNo" class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;">
<option value="">-- Select Company --</option>
                     @foreach (var company in Model.userModel.Companies)
                     {
      
<option value="@company.CompanyNo">@company.CompanyName</option>


                     }
</select>
</div>
</div>



        <div class="form-group row">

            <label for="branch-select" class="col-sm-1 col-form-label" style="font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">Branch</label>
<div class="col-sm-3">
<select id="branch-select" asp-for="User.iBranchCode" class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;">
<option value="">-- Select Branch --</option>
                 @*   @(model.br == branch.Id ? "selected" : "")*@
                     @foreach (var branch in Model.userModel.Branches)
                    {
<option value="@branch.iBranchCode">@branch.vBranchDesc</option>
                    }
</select>
</div>
</div>

</div>

@section scripts {

 <script>

        $(document).ready(function () {
$('#company-select').change(function () {
var companyId = $(this).val();
console.log("company id is" + companyId)
 if (companyId) {
$.ajax({
url: '@Url.Action("GetRelatedBranches", "AddUserModel")',
type: "GET",
dataType: "json",
data: { companyId: companyId },
success: function (data) {
console.log("data  is" + data);
$('#branch-select').empty();
$.each(data, function (i, item) {
$('#branch-select').append($('<option>', {
value: item.iBranchCode,
text: item.vBranchDesc
                                }));
                            });
                        }
                    });
                }
            });
        });
 </script>
}

Expected result when select company then select branches list related must show based on company no