ASP.NET Core 2.0如何提交过滤参数并重载页面展示结果

你的核心问题在于：用AJAX POST请求拿到了过滤后的页面HTML，但AJAX本身不会触发页面跳转，只是异步获取数据。下面是几种解决思路，你可以根据场景选择：

方案1：直接用表单提交（最适合全页面跳转需求） #

如果你的目标是跳转到完整的过滤后页面，完全不需要用AJAX，直接用HTML表单提交更简单可靠，浏览器会自动处理页面跳转和渲染。

实现步骤： #

1. 把所有筛选条件（包括ideaId、分页、过滤项）放到一个<form>中，设置method="POST"和正确的action地址。
2. 动态添加过滤项时，确保输入框的name属性符合ASP.NET Core的模型绑定规则（比如data[0].Property、data[0].Operator这样的格式）。
3. 点击「筛选」按钮时，直接提交表单即可。

代码示例： #

<!-- 表单容器 -->
<form id="filterForm" method="POST" action="/Feature/Index">
    <!-- 隐藏域传递ideaId -->
    <input type="hidden" name="ideaId" value="@Model.IdeaId" />
    <!-- 分页默认值 -->
    <input type="hidden" name="page" value="1" />

    <!-- 初始的过滤条件组 -->
    <div class="filter-row">
        <input type="text" name="data[0].Property" placeholder="属性名称" />
        <select name="data[0].Operator">
            <option value="Equals">等于</option>
            <option value="Contains">包含</option>
            <option value="GreaterThan">大于</option>
        </select>
        <input type="text" name="data[0].Value" placeholder="属性值" />
    </div>

    <!-- 添加过滤条件的按钮 -->
    <button type="button" id="addFilterBtn">+ 添加过滤条件</button>
    <!-- 提交按钮 -->
    <button type="submit">筛选</button>
</form>

<script>
// 动态添加过滤条件组的逻辑
let filterIndex = 1;
document.getElementById('addFilterBtn').addEventListener('click', () => {
    const filterRow = document.createElement('div');
    filterRow.className = 'filter-row';
    filterRow.innerHTML = `
        <input type="text" name="data[${filterIndex}].Property" placeholder="属性名称" />
        <select name="data[${filterIndex}].Operator">
            <option value="Equals">等于</option>
            <option value="Contains">包含</option>
            <option value="GreaterThan">大于</option>
        </select>
        <input type="text" name="data[${filterIndex}].Value" placeholder="属性值" />
    `;
    document.getElementById('filterForm').insertBefore(filterRow, document.getElementById('addFilterBtn'));
    filterIndex++;
});
</script>

优点：无需处理AJAX的异步回调，浏览器自动处理页面跳转，模型绑定直接生效，刷新页面时过滤条件不会丢失（因为POST数据会被重新提交）。

方案2：用AJAX获取HTML后替换页面内容（适合局部刷新） #

如果一定要用AJAX（比如需要做加载动画、局部更新），可以在成功回调里把返回的HTML替换当前页面的内容，同时更新浏览器URL让用户可以刷新。

代码示例： #

$.ajax({
    url: '/Feature/Index',
    data: finalParams,
    type: 'POST',
    beforeSend: () => {
        // 可选：显示加载动画
        $('#loading').show();
    },
    success: function (response) {
        // 替换整个页面的内容
        document.documentElement.innerHTML = response;
        // 更新浏览器URL（可选，让用户刷新时能保留过滤条件）
        const newUrl = `/Feature/Index?ideaId=${finalParams.ideaId}&page=${finalParams.page ?? 1}`;
        history.pushState({}, '', newUrl);
        // 隐藏加载动画
        $('#loading').hide();
    },
    error: function () {
        alert("筛选失败，请重试！");
        $('#loading').hide();
    }
});

注意点：

• 替换整个页面后，原来页面的脚本不会重新执行，如果返回的HTML里有新的脚本，需要手动处理（比如重新绑定事件）。
• 用history.pushState更新的URL只是表面的，刷新页面时会发送GET请求，如果你想让刷新生效，需要把控制器改成支持GET请求（参考方案3）。

方案3：改用GET请求并直接跳转（适合需要分享/保存过滤链接的场景） #

如果希望用户可以复制、分享过滤后的页面链接，或者刷新页面时保留过滤条件，可以把控制器改成支持GET请求，然后构造带参数的URL直接跳转。

第一步：修改控制器方法 #

添加[HttpGet]特性（或者保留[HttpPost]同时添加[HttpGet]，支持两种请求方式）：

[HttpGet]
public async Task<IActionResult> Index(Guid ideaId, int? page, List<FilterItemViewModel> data) {
    // 你的过滤逻辑不变
    return View(await PagedList<FeatureViewModel>.CreateAsync(model.AsNoTracking(), page ?? 1, int.Parse(_configuration["Pagination:ItemsPerPage"])));
}

第二步：JavaScript构造URL并跳转 #

// 构造URL搜索参数
const searchParams = new URLSearchParams();
searchParams.append('ideaId', finalParams.ideaId);
searchParams.append('page', finalParams.page ?? 1);

// 遍历过滤条件数组，添加到参数中
finalParams.data.forEach((item, index) => {
    searchParams.append(`data[${index}].Property`, item.Property);
    searchParams.append(`data[${index}].Operator`, item.Operator);
    searchParams.append(`data[${index}].Value`, item.Value);
});

// 跳转到过滤后的页面
window.location.href = `/Feature/Index?${searchParams.toString()}`;

优点：URL中包含所有过滤参数，用户可以分享链接、刷新页面，过滤条件都会保留；不需要AJAX，实现简单。
缺点：GET请求的URL长度有限制，如果过滤条件非常多或者值很长，可能会超过浏览器的URL长度限制（一般是2048字符），这种情况下还是用方案1的POST表单更合适。

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