使用下拉列表中的 Select 更改 DataTable 中的数据

Question

我有一个带有数据的视图table，我想每次从下拉列表中 select 一个类别时更改数据。

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

上方

这是我的代码：

@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

你可以使用局部视图，我做了演示，你可以参考一下

使用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 操作，使用returns 不同值

的语句呈现部分视图

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

工作原理

使用下拉列表中的 Select 更改 DataTable 中的数据

Change Data in DataTable with Select from Dropdownlist

asp.net-ajax

asp.net-core-mvc