ASP.NET MVC 5中不使用jQuery刷新局部视图的其他方法有哪些？

下面是两种基于ASP.NET MVC 5原生机制、无需外部库的实现方案：

1. 原生表单提交 + PartialViewResult（结合原生AJAX局部替换） #

将触发刷新的控件（下拉框、按钮）包裹在表单中，通过原生JS监听事件发起请求，控制器返回局部视图后，用原生DOM操作替换页面容器内容。

视图代码示例 #

<!-- 承载局部视图的容器 -->
<div id="dataTableContainer">
    @Html.Partial("_DataTable", Model)
</div>

<!-- 触发刷新的表单 -->
<form id="refreshForm" action="@Url.Action("GetFilteredData")" method="post">
    <select name="filterOption" id="filterSelect">
        <option value="all">全部数据</option>
        <option value="recent">最近7天数据</option>
    </select>
    <button type="button" id="refreshBtn">刷新表格</button>
</form>

<script>
    const form = document.getElementById('refreshForm');
    const refreshBtn = document.getElementById('refreshBtn');
    const container = document.getElementById('dataTableContainer');

    refreshBtn.addEventListener('click', function() {
        const formData = new FormData(form);
        const xhr = new XMLHttpRequest();
        
        xhr.open(form.method, form.action, true);
        xhr.onload = function() {
            if (xhr.status === 200) {
                container.innerHTML = xhr.responseText;
            }
        };
        xhr.send(formData);
    });

    // 下拉框切换自动刷新
    document.getElementById('filterSelect').addEventListener('change', function() {
        refreshBtn.click();
    });
</script>

控制器Action示例 #

[HttpPost]
public PartialViewResult GetFilteredData(string filterOption)
{
    // 根据筛选条件获取新数据，构建视图模型
    var viewModel = YourDataService.GetDataByFilter(filterOption);
    return PartialView("_DataTable", viewModel);
}

2. 纯原生XMLHttpRequest发起请求 #

直接通过原生AJAX请求控制器Action，获取局部视图的HTML后替换容器内容，完全脱离表单结构，更灵活。

视图代码示例 #

<div id="dataTableContainer">
    @Html.Partial("_DataTable", Model)
</div>

<select id="filterSelect">
    <option value="all">全部数据</option>
    <option value="recent">最近7天数据</option>
</select>
<button id="refreshBtn">刷新表格</button>

<script>
    const refreshBtn = document.getElementById('refreshBtn');
    const filterSelect = document.getElementById('filterSelect');
    const container = document.getElementById('dataTableContainer');
    const apiUrl = '@Url.Action("GetFilteredData")';

    function refreshTable() {
        const filter = filterSelect.value;
        const xhr = new XMLHttpRequest();
        
        xhr.open('POST', apiUrl, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
            if (xhr.status === 200) {
                container.innerHTML = xhr.responseText;
            }
        };
        // 发送筛选参数
        xhr.send(`filterOption=${encodeURIComponent(filter)}`);
    }

    // 绑定事件
    refreshBtn.addEventListener('click', refreshTable);
    filterSelect.addEventListener('change', refreshTable);
</script>

控制器Action #

和第一种方案的Action完全一致，返回目标局部视图即可。

这两种方案都完全基于ASP.NET MVC 5的原生能力和浏览器原生API，不需要引入任何外部库（比如jQuery），能实现点击按钮、下拉框切换触发局部视图（数据表格）的刷新。

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