ASP.NET Core 7 MVC Datatable分页下载文件后浏览器空白页问题求助

1. 解决点击下载后页面空白问题 #

点击下载链接时，浏览器默认会导航到下载接口的URL，尽管文件能成功下载，但当前页面会被替换为空白（因为接口返回的是文件流而非HTML内容）。核心解决思路是避免当前页面跳转，可通过以下两种方式实现：

方式一：给下载链接添加target="_blank"

直接修改<a>标签，让下载请求在新窗口打开，原页面不受影响：

<a asp-action="DownloadFile"
   asp-controller="Document"
   asp-route-id="@item.DocumentId"
   class="action-icon docTypes"
   target="_blank">
   @item.Title
</a>

方式二：用JavaScript阻止默认跳转并在新窗口打开

如果保留原有onclick写法，可修改为：

<a class="action-icon docTypes" onclick="window.open('@Url.Action("DownloadFile", "Document", new { id = item.DocumentId })'); return false;">@item.Title</a>

return false会阻止<a>标签的默认跳转行为，确保当前页面不会被替换。

2. 修复动态加载元素的hover效果（可选但必要） #

DataTable客户端分页时，第二页及以后的内容是通过AJAX动态插入DOM的，初始的$(".docTypes").hover()只会绑定第一页的元素，后续分页的元素不会触发光标变化效果。推荐用CSS替代JavaScript，更简洁高效：

.docTypes {
    cursor: pointer;
}

如果坚持使用JavaScript，需改用事件委托：

$(document).on('mouseenter', '.docTypes', function() {
    $(this).css('cursor', 'pointer');
}).on('mouseleave', '.docTypes', function() {
    $(this).css('cursor', 'auto');
});

原因分析 #

• 第一页内容是服务器渲染的静态DOM，点击下载时浏览器可能因缓存或渲染机制未立即显示空白；后续分页是动态加载的DOM，浏览器处理跳转时会直接显示空白页，本质两种情况的跳转行为一致，仅表现有差异。
• DataTable动态加载的元素无法被初始的jQuery事件绑定捕获，必须用事件委托或全局CSS样式处理交互效果。

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