Change Data in DataTable with Select from Dropdownlist

Question

I have a view with a Datatable, and I want to change the data every time I select a category from a drop-down list.

I want to only display the albums from the selected category, or all albums from all categories, using Ajax and jQuery. The drop-down list must be placed above the table.

Here is my code:

@using System.Collections.Generic;
@using CakeStore.App.Areas.Admin.Models.Albums;
@using CakeStore.App.Services.Contracts;
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@inject IAlbumService AlbumService


@{ ViewData["Title"] = "Category Albums";
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
    var albums = ViewBag.CategoryAlbums as List<AlbumTableViewModel>;

}

<h1 class="text-center text-header-page">Category Albums</h1>
<hr class="hr-admin-divider" />
<div class="form-group">
    <a class="btn button-black-white d-flex justify-content-left" href="/Admin/Albums/Create">Create</a>
</div>
<hr class="hr-admin-divider" />

<div class="d-flex">

    <table class="table table-striped table-hover" id="myTable">
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Category</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        @for (int i = 0; i < albums.Count(); i++) {

            <tr>
                <td class="col-md-1">@albums[i].Id</td>
                <td class="col-md-3">@albums[i].Name</td>
                <td class="col-md-2">@albums[i].Category</td>
                <td><a class="btn button-table-edit" href="/Admin/Albums/Edit?id=@albums[i].Id">EDIT</a></td>
                <td><a class="btn button-table-delete d-flex justify-content-right" href="/Admin/Albums/Delete?id=@albums[i].Id">DELETE</a></td>
                <td><a class="btn button-table-view d-flex justify-content-right" href="/Admin/Products/CategoryAlbums?id=@albums[i].Id">PRODUCTS</a></td>
            </tr>
        }
    </table>
</div>
<div class="row d-flex align-items-end flex-column" style="font-size:12px">
    <a class="btn-link pull-right col-lg-2" asp-controller="Categories" asp-action="Category">Back to Categories</a>
</div>


@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Answer 1

You could use the Partial View ,I made the demo ,you could refer to it

Use ajax to call the GetCityList method to get the data corresponding to the countryId passed .

<div class="form-group">
<label class="col-form-label">Country</label>
<select class="form-control" asp-items="@ViewBag.Country" id="selectlist">
    <option>All</option>
</select>
</div>

<div class="form-group" id="cityListWrapper">
<partial name="_CityListPartial" model="@ViewBag.City" />
</div>

@section Scripts
{
<script type="text/javascript">
    $("#selectlist").change(function () {
        var countryId = $("#selectlist").val();
        $.ajax
            ({
                type: "GET",
                url: "/Countries/GetCityList?CountryId="+countryId,
                success: function (result) {
                    $("#cityListWrapper").html(result)
                }
            });

    });
</script>
}

Initial rendering the main view , show all albums when not selected

 public async Task<IActionResult> Index()
    {
        ViewBag.Country = new SelectList(_context.Country, "Id", "CountryName");
        ViewBag.City = _context.City.ToList();

        return View();
    }

The GetCityList action ,render the partial view using a statement that returns different values

 [HttpGet]
    public async Task<IActionResult> GetCityList(int? countryId)
    {
        if (countryId == null)
        {
            var CityList = await _context.City.ToListAsync();
            return PartialView("_CityListPartial", CityList);
        }
        var Cities =await _context.City.Where(c => c.Country.Id == countryId).ToListAsync();
        return PartialView("_CityListPartial", Cities);
    }

How it works