如何在ASP.NET Core Modal弹窗中实现搜索筛选功能

问题根因 #

现有代码仅实现了模态框初始加载和保存提交逻辑，缺少搜索触发的表单提交逻辑，输入搜索内容后没有主动发起请求拉取筛选后的数据，因此搜索功能无法生效。

修复步骤 #

1. 给搜索组件绑定触发标识 #

在View的搜索输入框上新增id用于事件绑定，也可根据需求额外添加搜索按钮：

<!-- 仅新增id属性，其他保持不变 -->
<input type="text" id="searchInput" value="@ViewData["CurrentFilter"]" class="form-control" name="SearchString" placeholder="搜索…">

<!-- 可选：如果需要点击搜索按钮触发，新增以下代码 -->
<div class="col-auto">
    <button type="button" id="searchBtn" class="btn btn-primary">搜索</button>
</div>

2. 新增搜索提交的JS逻辑 #

在现有JS代码中补充搜索触发逻辑，提交搜索参数后替换模态框内容，保持弹窗不关闭：

$(function () {
    var PlaceHolderElement = $('#PlaceHolderHere');
    // 原有模态框初始化逻辑保持不变
    $('button[data-toogle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            PlaceHolderElement.html(data);
            PlaceHolderElement.find('.modal').modal('show');
        })
    })

    // 原有保存提交逻辑保持不变
    PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var sendData = form.serialize();
        $.post(actionUrl, sendData).done(function (data) {
            PlaceHolderElement.find('.modal').modal('hide');
            location.reload();
        })
    })

    // ********** 新增搜索逻辑开始 **********
    // 回车触发搜索
    PlaceHolderElement.on('keydown', '#searchInput', function(e) {
        if (e.keyCode === 13) {
            e.preventDefault();
            submitSearch();
        }
    });
    // 点击按钮触发搜索（如果加了搜索按钮就保留这段）
    PlaceHolderElement.on('click', '#searchBtn', function(e) {
        e.preventDefault();
        submitSearch();
    });

    // 公共搜索提交方法
    function submitSearch() {
        var form = $('#modal-team').find('form');
        $.get(form.attr('action'), form.serialize()).done(function (res) {
            PlaceHolderElement.html(res);
            PlaceHolderElement.find('.modal').modal('show');
        })
    }
    // ********** 新增搜索逻辑结束 **********
})

3. 后端逻辑校验 #

确认Controller中BrowseTrans方法的入参包含SearchString、TxtCategory两个字段，且RefreshData方法的筛选逻辑可正常根据入参返回匹配的数据集即可。

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