MVC视图中如何高效存储客户端值以支持跨页面访问？

我之前在做MVC项目的时候也碰到过这个一模一样的问题——Index页面表格数据量大，用前端输入控件加JavaScript做本地过滤确实高效，不用频繁给服务器发Get请求，体验流畅得很，但头疼的是，跳转到编辑页面再返回Index时，之前输入的过滤条件就直接丢失了，找了一圈也没发现特别简便的现成方案。后来摸索出用MVC的Session来存储客户端的过滤值，就能完美保留跨页面访问的状态，给你分享下具体实现：

具体实现步骤 #

1. 前端页面（Index.cshtml）处理 #

首先在页面上添加过滤输入框，绑定输入事件触发前端过滤逻辑，同时在页面加载时从Session中读取之前的过滤值并填充到输入框，自动执行过滤：

<input type="text" id="filterInput" placeholder="输入关键词过滤表格..." />
<table id="dataTable">
    <!-- 这里是你的表格内容，比如从Model绑定的行数据 -->
    <tbody>
        @foreach(var item in Model)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
                <td>@item.Description</td>
                <td><a href="@Url.Action("Edit", new { id = item.Id })">编辑</a></td>
            </tr>
        }
    </tbody>
</table>

<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // 页面加载时从后端Session获取保存的过滤值
        var savedFilter = '@Session["TableFilter"]';
        if (savedFilter) {
            $("#filterInput").val(savedFilter);
            // 自动执行过滤逻辑
            filterTable(savedFilter);
        }

        // 输入时触发过滤，并把当前过滤值存到Session
        $("#filterInput").on("input", function() {
            var filterText = $(this).val().trim();
            filterTable(filterText);
            // 通过AJAX提交过滤值到后端存Session
            $.post("@Url.Action("SaveFilter", "Home")", { filter: filterText });
        });

        // 前端表格过滤核心逻辑
        function filterTable(filterText) {
            const lowerFilter = filterText.toLowerCase();
            $("#dataTable tbody tr").each(function() {
                const rowText = $(this).text().toLowerCase();
                $(this).toggle(rowText.includes(lowerFilter));
            });
        }
    });
</script>

2. 后端控制器（HomeController.cs）处理 #

添加一个HttpPost的Action来接收前端传过来的过滤值，并存入Session：

using System.Web.Mvc;

namespace YourProjectNamespace.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            // 这里是你的数据加载逻辑，比如从数据库获取列表
            var data = YourDataService.GetAllItems();
            return View(data);
        }

        public ActionResult Edit(int id)
        {
            var item = YourDataService.GetItemById(id);
            return View(item);
        }

        [HttpPost]
        public void SaveFilter(string filter)
        {
            // 把过滤值存入Session，Session是用户隔离的，不用担心多用户冲突
            Session["TableFilter"] = filter;
        }
    }
}

3. 编辑页面返回逻辑 #

当你在编辑页面完成操作后，用RedirectToAction("Index")返回Index页面即可：

[HttpPost]
public ActionResult Edit(ItemModel model)
{
    if (ModelState.IsValid)
    {
        YourDataService.UpdateItem(model);
        // 重定向回Index页面，此时Session里的过滤值还在
        return RedirectToAction("Index");
    }
    return View(model);
}

一些注意点 #

• Session默认是用户隔离的，不同用户的过滤值不会互相干扰；
• 可以在Web.config里配置Session的有效期，避免过期导致状态丢失；
• 如果觉得实时AJAX提交太频繁，可以改成输入框失去焦点时再提交，减少请求次数；
• 如果项目用的是.NET Core MVC，Session的配置方式略有不同，但核心思路一致——用Session存储用户的临时过滤状态。

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