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
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
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> }
The expected result when select company then select branches list related must show based on company no