Cascading drop down lists in .NET Core 6-CodePudding

I am just getting started with .NET Core 6 and VS2022. I've created a C# MVC website with Razor pages and have run into a problem. I've no idea how I can produce cascading lists, I guess I need to setup an event handler and maybe subscribe. Is AJAX still an appropriate method for solving this problem? I have seen JsonResult being returned from methods as a possible solution. Can somebody please advise?

FYI, I have bound my lists fine using services and Entity Framework, all is working apart from this UI bit. Thanks.

HTML markup:

<label>Course</label>
<select id="ddlCourse" name="ddlCourse">
    @foreach (var row in Model.Courses)
    {
        <option value="@row.Id.ToString()">@row.Course</option>
    }
</select>

<label>Course Distance</label>
<select id="ddlDistance" name="ddlDistance">
    @foreach (var row in Model.MedianTimes)
    {
       <option value="@row.RowId">@row.Distance</option>
    }
</select>

C# code in cshtml.cs:

public List<Courses> Courses { get; set; }
public List<MedianTimes> MedianTimes { get; set; }

public void OnGet()
    {
        if (DataInMemoryCache.GetFromCache(_courseCacheKey) != null)
        {
            Courses = (List<Courses>)DataInMemoryCache.GetFromCache(_courseCacheKey);
        }
        else
        {
            Courses = _courseDbContext.Courses.ToList();
        }
        DataInMemoryCache.AddToCache(_courseCacheKey, Courses);

        if (DataInMemoryCache.GetFromCache(_medianTimesCacheKey) != null)
        {
            MedianTimes = (List<MedianTimes>)DataInMemoryCache.GetFromCache(_medianTimesCacheKey);
        }
        else
        {
            MedianTimes = _medianTimesDbContext.MedianTimes.ToList();
        }
        DataInMemoryCache.AddToCache(_medianTimesCacheKey, MedianTimes);
    }

CodePudding user response：

Here is a working demo to produce cascading lists with js:

cshtml:

<label>Course</label>
<select id="ddlCourse" name="ddlCourse">
    @foreach (var row in Model.Courses)
    {
        <option value="@row.Id.ToString()">@row.Course</option>
    }
</select>

<label>Course Distance</label>
<select id="ddlDistance" name="ddlDistance">
    @foreach (var row in Model.MedianTimes)
    {
        <option value="@row.RowId">@row.Distance</option>
    }
</select>
@section Scripts{ 
<script>
    $("#ddlCourse").change(function () {
        $.getJSON("?handler=MedianTimes", { Id: $("#ddlCourse").val() }, function (data) {
            var items = '';
            $("#ddlDistance").empty();
            $.each(data, function (index, MedianTimes) {
                items  = "<option value='"   MedianTimes.rowId   "'>"   MedianTimes.distance   "</option>";
            });
            $('#ddlDistance').html(items);
        });
    });
</script>
}

cshtml.cs:

public List<Courses> Courses { get; set; }
public List<MedianTimes> MedianTimes { get; set; }

public void OnGet()
    {
        if (DataInMemoryCache.GetFromCache(_courseCacheKey) != null)
        {
            Courses = (List<Courses>)DataInMemoryCache.GetFromCache(_courseCacheKey);
        }
        else
        {
            Courses = _courseDbContext.Courses.ToList();
        }
        DataInMemoryCache.AddToCache(_courseCacheKey, Courses);

        if (DataInMemoryCache.GetFromCache(_medianTimesCacheKey) != null)
        {
            MedianTimes = (List<MedianTimes>)DataInMemoryCache.GetFromCache(_medianTimesCacheKey);
        }
        else
        {
            MedianTimes = _medianTimesDbContext.MedianTimes.ToList();
        }
        DataInMemoryCache.AddToCache(_medianTimesCacheKey, MedianTimes);
    }
public JsonResult OnGetMedianTimes(int Id) {
            //get MedianTimes with Id
            //MedianTimes =.....
            return new JsonResult(MedianTimes);
        }