在VS2022的.NET 8 ASP.NET Core MVC中实现AJAX筛选功能

当前实现 #

视图代码（展示DataTable数据） #

@model System.Data.DataTable

@for (int i = 0; i < Model.Rows.Count; i++)
{
    <div class="BluePrint">
        <img src="~/Images/@Model.Rows[i]["ThumbNail"]" class="BluePrintBild" />

        <p id="HouseName">@Model.Rows[i]["HouseName"]</p>

        <p id="Mod">Vanilla</p>

        <p id="Difficulty">MEDIUM</p>

        <img src="~/Images/STEN.jpg" id="Sten" />

        @if (Convert.ToBoolean(Model.Rows[i]["Featured"]) == true)
        {
            <p id="FeatureText">Featured</p>
        }

        @if (Convert.ToInt32(Model.Rows[i]["IsLiked"]) != 0)
        {
            <img src="~/Images/Liked.png" id="Like" />
        }
        else
        {
            <img src="~/Images/NotLiked.png" id="Liked" />
        }

        <p id="Price">@Model.Rows[i]["Price"]$ / 1 FREE PER MONTH</p>
        <p id="Size">@Model.Rows[i]["HouseSize"] Blocks</p>
        <p id="Floors">@Model.Rows[i]["Floors"] Floors</p>
        <p id="File">@Model.Rows[i]["FileSize"]MB</p>
    </div>
}

ApplicationDbContext代码 #

namespace OoOoO.Utilities
{
    using Microsoft.EntityFrameworkCore;
    using OoOoO.Models;

    public class ApplicationDbContext : DbContext
    {
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
        : base(options)
        {
        }

        public DbSet<BluePrintModel> BluePrintModel { get; set; }
    }
}

需求 #

需要创建按钮，通过AJAX实现数据筛选功能，目前不知从何入手。

1. 切换为强类型模型（替代DataTable） #

你已经定义了BluePrintModel和ApplicationDbContext，用强类型模型比DataTable更便于维护和筛选，先修改控制器和视图：

控制器代码（示例） #

public class HomeController : Controller
{
    private readonly ApplicationDbContext _context;

    public HomeController(ApplicationDbContext context)
    {
        _context = context;
    }

    public IActionResult Index()
    {
        var bluePrints = _context.BluePrintModel.ToList();
        return View(bluePrints);
    }
}

修改后的视图代码 #

@model List<OoOoO.Models.BluePrintModel>

<!-- 筛选控件放在这里 -->
<div class="filter-controls">
    <button id="filter-featured" class="filter-btn">只看推荐</button>
    <button id="filter-medium" class="filter-btn">中等难度</button>
    <button id="filter-reset" class="filter-btn">重置筛选</button>
</div>

<!-- 蓝图容器，用于AJAX更新 -->
<div id="blueprints-container">
    @foreach (var blueprint in Model)
    {
        <div class="BluePrint">
            <img src="~/Images/@blueprint.ThumbNail" class="BluePrintBild" />
            <p class="HouseName">@blueprint.HouseName</p>
            <p class="Mod">Vanilla</p>
            <p class="Difficulty">@blueprint.Difficulty</p> <!-- 假设模型已添加Difficulty属性 -->
            <img src="~/Images/STEN.jpg" class="Sten" />
            
            @if (blueprint.Featured)
            {
                <p class="FeatureText">Featured</p>
            }

            <img src="~/Images/@(blueprint.IsLiked != 0 ? "Liked.png" : "NotLiked.png")" class="Like" />
            <p class="Price">@blueprint.Price$ / 1 FREE PER MONTH</p>
            <p class="Size">@blueprint.HouseSize Blocks</p>
            <p class="Floors">@blueprint.Floors Floors</p>
            <p class="File">@blueprint.FileSize MB</p>
        </div>
    }
</div>

注意：循环中不能使用重复ID，已将所有id改为class，符合HTML规范。

2. 添加筛选接口（后端API） #

在控制器中新增处理筛选的Action，返回JSON格式数据：

[HttpGet]
public IActionResult FilterBluePrints(bool? featured, string difficulty)
{
    var query = _context.BluePrintModel.AsQueryable();

    // 筛选推荐项
    if (featured.HasValue)
    {
        query = query.Where(b => b.Featured == featured.Value);
    }

    // 筛选难度
    if (!string.IsNullOrEmpty(difficulty))
    {
        query = query.Where(b => b.Difficulty == difficulty);
    }

    var bluePrints = query.ToList();
    return Json(bluePrints);
}

3. 编写AJAX筛选逻辑 #

在视图底部添加jQuery和AJAX代码，实现按钮点击后的筛选更新：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function() {
        // 绑定筛选按钮事件
        $('#filter-featured').click(() => filterBluePrints(true, null));
        $('#filter-medium').click(() => filterBluePrints(null, "MEDIUM"));
        $('#filter-reset').click(() => filterBluePrints(null, null));

        // 通用筛选函数
        function filterBluePrints(featured, difficulty) {
            $.ajax({
                url: '@Url.Action("FilterBluePrints", "Home")', // 替换为你的控制器名称
                type: 'GET',
                data: { featured, difficulty },
                success: function(data) {
                    // 清空容器并重新渲染数据
                    $('#blueprints-container').empty();
                    $.each(data, (index, blueprint) => {
                        let html = `<div class="BluePrint">
                            <img src="~/Images/${blueprint.ThumbNail}" class="BluePrintBild" />
                            <p class="HouseName">${blueprint.HouseName}</p>
                            <p class="Mod">Vanilla</p>
                            <p class="Difficulty">${blueprint.Difficulty}</p>
                            <img src="~/Images/STEN.jpg" class="Sten" />`;
                        
                        if (blueprint.Featured) {
                            html += '<p class="FeatureText">Featured</p>';
                        }

                        const likeImg = blueprint.IsLiked !== 0 ? 'Liked.png' : 'NotLiked.png';
                        html += `<img src="~/Images/${likeImg}" class="Like" />
                            <p class="Price">${blueprint.Price}$ / 1 FREE PER MONTH</p>
                            <p class="Size">${blueprint.HouseSize} Blocks</p>
                            <p class="Floors">${blueprint.Floors} Floors</p>
                            <p class="File">${blueprint.FileSize} MB</p>
                        </div>`;

                        $('#blueprints-container').append(html);
                    });
                },
                error: (xhr, status, error) => {
                    console.error('筛选请求失败:', error);
                }
            });
        }
    });
</script>

关键注意事项 #

• 确保BluePrintModel的属性与数据库表字段完全匹配，比如新增Difficulty属性对应视图中的固定值。
• AJAX请求的Url.Action要替换为实际的控制器名称。
• 如果不需要强类型模型，也可以修改筛选接口返回DataTable的JSON格式，但强类型模型是更优方案。

内容的提问来源于stack exchange，提问作者Lelle