Asp.net core mvc 使用从下拉列表中选择更改数据表中的数据

我有一个带有Datatable的视图，每次从下拉列表中选择一个类别时，我都希望更改数据

我只想使用Ajax和jQuery显示所选类别的相册，或者显示所有类别的所有相册。下拉列表必须放在表的上方

这是我的密码：

@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" />
}

---

你可以使用局部视图，我制作了演示，你可以参考它

使用ajax调用GetCityList方法来获取与传递的countryId对应的数据

<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>
}

初始呈现主视图，未选中时显示所有相册

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

        return View();
    }

在GetCityList操作中，使用返回不同值的语句呈现局部视图

 [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);
    }

工作原理

---

欢迎来到StackOVerflow。我在您的问题中包含了github参考中的代码，因为您可能会在以后更改github上的内容，这将对这个问题产生负面影响。请编辑您的问题以实际提问。注意，通常没有太多的热情为询问者编写代码。你至少应该展示你的尝试，告诉我们你在哪里遇到了问题。