asp.net core razor pages - cascade dropdownlists

Marius Vasile

5y2.6k.NET

I tried to implement the example here

https://www.c-sharpcorner.com/article/creating-simple-cascading-dropdownlist-in-asp-net-core-mvc-with-new-tag-helpers/

into my Razor page project but the second dropdown doesn't get any data. What I did is

View Page including script

class="col-2">
for="PTWReviewD.Category" class="form-control badge-primary">PTW Review Category
for="PTWReviewD.Category" class="form-control border-warning" asp-items="Model.PTWRCList">
"">--Select PTW Review Category--
for="PTWReviewD.Category" class="text-danger">

class="col-2">

for="PTWReviewD.SubCategory" class="form-control badge-primary">PTW Review Subcategory

for

="PTWReviewD.SubCategory" class="form-control border-warning" asp-items="@(new SelectList(string.Empty, "RSubCategoryID", "RSubCategoryS"))">

"">--Select PTW Review Subcategory--

for

="PTWReviewD.SubCategory" class="text-danger">

@Html.AntiForgeryToken()

@section scripts{

}

Getting the data with

public async Task OnGetAsync(int ptwNoId)
{
//PTWRCategory
PTWRCList = await _context.PTWRCategories.Select(a =>
new SelectListItem
{
Value = a.RCategoryID.ToString(),
Text = a.RCategoryS
}).ToListAsync();
return Page();
}
public async Task OnGetSubCategoriesAsync(int RCategoryID)
{
PTWRSCList = await _context.PTWRSubCategories.Where(a => a.RCategoryID == RCategoryID).Select(a =>
new SelectListItem
{
Value = a.RSubCategoryID.ToString(),
Text = a.RSubCategoryS
}).ToListAsync();
return new JsonResult(new SelectList(PTWRSCList, "RSubCategoryID", "RSubCategoryS"));
}

The first ddl is filled with data but the second is not and I have no errors. What am I doing wrong?

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Marius Vasile5y ago
Got it finally
"post">
    class="col-2">
        for="PTWReviewD.Category" class="form-control badge-primary">PTW Review Category
        "CategoryID" asp-for="PTWReviewD.Category" class="form-control border-warning" asp-items="Model.PTWRCList">
            "">--Select PTW Review Category--

        for="PTWReviewD.Category" class="text-danger">
class="col-2">
for="PTWReviewD.SubCategory" class="form-control badge-primary">PTW Review Subcategory
"SubCategoryID" asp-for="PTWReviewD.SubCategory" asp-items="@(new SelectList(string.Empty, "RSubCategoryID", "RSubCategoryS"))" class="form-control border-warning">
"">--Select PTW Review Subcategory--
for="PTWReviewD.SubCategory" class="text-danger">

and script

and Json

public async Task OnGetSubCategoriesAsync(int id)
{
var ptwrscList = await (from a in _context.PTWRSubCategories where a.RCategoryID==id
select a).ToListAsync();
return new JsonResult(new SelectList(ptwrscList, "RSubCategoryID", "RSubCategoryS"));
}

Marius Vasile5y ago
I manage to have something with
$(function () {
        $("#RCategoryID").on("change", function () {
            var categoryId = $(this).val();
            $("#RSubCategoryID").empty();
            $("#RSubCategoryID").append("Select SubCategory");
            $.getJSON(`?handler=SubCategories&id=${categoryId}`, (data) => {
                $.each(data, function (i, item) {
                    $("#RSubCategoryID").append(`"${item.RSubCategoryID}"> ${item.RSubCategoryS}`);
                });
            });
        });
    });
and
"post">
    class="col-2">
        for="PTWReviewD.Category" class="form-control badge-primary">PTW Review Category
        "RCategoryID" class="form-control border-warning" asp-items="Model.PTWRCList">
            "">--Select PTW Review Category--

        for="PTWReviewD.Category" class="text-danger">
class="col-2">
for="PTWReviewD.SubCategory" class="form-control badge-primary">PTW Review Subcategory
"RSubCategoryID" class="form-control border-warning">
"">--Select PTW Review Subcategory--
for="PTWReviewD.SubCategory" class="text-danger">

Marius Vasile5y ago
I also added id="Category" for first ddl and id="SubCategory" for the second. Same result
0