在刷新页面 MVC 上丢失的 JavaScript 中动态创建的内容

Posted

技术标签:

【中文标题】在刷新页面 MVC 上丢失的 JavaScript 中动态创建的内容【英文标题】:dynamically created content in JavaScript lost on refresh page MVC 【发布时间】:2021-09-30 05:33:03 【问题描述】:

我有一个页面,我在其中创建会话选项卡和会话选项卡内的 2 个子选项卡,子选项卡内有多个控件。这发生在某些事件上。在这种情况下,如果用户有多个事件,他可以有多个会话选项卡。当用户收到具有特定条件的事件时,我正在 java 脚本中创建这些选项卡。 问题是当用户单击刷新按钮时,所有选项卡都消失了。即使用户单击刷新按钮,我如何维护状态/选项卡。

【问题讨论】:

是的,这是一种自然行为。刷新后浏览器只显示从服务器接收到的代码。 我该如何避免呢?有什么方法可以存储这些详细信息并再次显示给用户? 通常情况下,它是动态的,因为我们不想一直在那里。出于某种原因,如果您必须在从该页面完成工作之前访问服务器并获取新数据。使用 AJAX 调用。但是,如果用户刷新,那么更改就会消失。有一些方法可以存储它们,但我不建议存储新的 html 内容并在页面重新加载时加载 预计用户在工作时不应刷新页面。但是我们无法控制用户行为。当用户单击动态内容内的按钮时,动态内容预计会消失/处置。如果用户单击刷新按钮,我需要存储/恢复这些详细信息。否则,我需要对这个动态内容使用弹出窗口,其中用户将没有刷新按钮,这在此处不是必需的。感谢您是否可以指导我存储这些内容,直到用户单击处置按钮。它是 Asp.Net MVC。 【参考方案1】:

我建议在修改新内容时使用设置为 true 的标志。如果用户试图离开/刷新,您可以使用 onunload/onbeforeunload 发出警告

var _isDirty = false;
//Set this flag to true when you are making changes
 _isDirty = true;

钩住方法并与用户核实,如果他/她真的想刷新

function confirmWinClose() 
 var confirmClose = confirm('Are you sure you want to refresh/leave?');
 return confirmClose;


window.onbeforeunload = confirmWinClose();

【讨论】:

以上是关于在刷新页面 MVC 上丢失的 JavaScript 中动态创建的内容的主要内容,如果未能解决你的问题,请参考以下文章

ASP MVC 数据库优先 - 刷新 EF 实体框架时丢失所有验证

如何防止 Vue.js 中的子路由在页面刷新时丢失样式

解决vuex在页面刷新后数据丢失的问题

vue: 解决vuex页面刷新数据丢失问题

vuex页面刷新数据丢失的解决办法

HTTP 错误:405(此页面不工作)当我刷新页面时(ASP.Net Core MVC)