Click here to Skip to main content
16,016,022 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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)

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

What I have tried:

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> 
}
Posted
Comments
mtoha 6-May-23 22:18pm    
console.log("data is" + data);
what is the response?
have you succeed to get branch data based on country?

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



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