如何在 MVC 中使用页面加载指示器/进度条

本文关键字：指示器 加载 MVC | 更新日期: 2023-09-27 18:33:10

这是我的模型：

public class Pitchermodels
{
InsideEdEntities ieEntity = new InsideEdEntities();
PitcherProfileEntities ppEntity = new PitcherProfileEntities();
Pitcher5model p5Mod = new Pitcher5model();
Pitcher6model p6Mod = new Pitcher6model();
public Pitcher5model pitcher5(long? _pid)
    {
        if (p5Mod.exist(_pid) == true)
        {
            p5Mod.playerinfo = ieEntity.ppsproc_playerinfo(_pid).FirstOrDefault();
            p5Mod.ListP5T1 = ppEntity.ppsproc_newP5_T1(_pid).ToList();
            p5Mod.ListP5T2 = ppEntity.ppsproc_P5_T2(_pid).ToList();
            return p5Mod;
        }
        else
        {
            return null;
        }
    }
 public Pitcher6model pitcher6(long? _pid)
    {
        if (p6Mod.exist(_pid) == true)
        {
            p6Mod.playerinfo = ieEntity.ppsproc_playerinfo(_pid).FirstOrDefault();
            p6Mod.ListP6T1 = ppEntity.ppsproc_P6(_pid).ToList();
            return p6Mod;
        }
        else
        {
            return null;
        }
    }
}

这是我的控制器：

public ActionResult AllPitchers(long? _pid)
    {
        Pitchermodels pMods = new Pitchermodels();
        return View(pMods);
    }

这是我的观点：

@model MVCdodgersplayerinfohub.Models.Pitchermodels
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>All Pitcher Reports</title>
<link href="~/LA.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <div>
        @Html.Partial("Pitcher5",Model.pitcher5(Convert.ToInt32(Request.QueryString["_pid"])))
    </div>
    <p style="page-break-before:always;"></p>
    <div>
        @Html.Partial("Pitcher6",Model.pitcher6(Convert.ToInt32(Request.QueryString["_pid"])))
    </div>
</body>
</html>

不太好的一件事是加载可能需要 2+ 分钟，并且在用户看来它甚至可能不会加载(鼠标只是旋转(。是否可以放入进度条？ 我认为大多数用户喜欢进度条，因为至少他们知道它正在工作，以及需要多长时间。

如何在 MVC 中使用页面加载指示器/进度条

关于浏览器的工作原理，您需要了解一些事项：

  • 如果要打开页面，则在关闭连接之前不会显示任何内容。图像和其他内容稍后由浏览器解析，因此它们在初始页面打开后打开
  • 除非您知道接收的数据的大小，否则无法确定页面打开的当前状态。为此，页面必须开始发送数据，并且您需要确切地知道数据的大小。例如，一个文件有一个设定的数据大小，所以你可以使用Javascript附加一个进度条。所有数据都在服务器上处理，而浏览器仍在等待响应。
  • 您将需要在前端(html端(进行某种跟踪。这意味着您至少需要打开页面的某种基本外壳来跟踪事务。这可以通过使用 AJAX 加载网站的某些部分并粗略估计打开所需的时间来完成(并将其应用于相对于时间的进度条(。将进度条分解为加载的段(即加载 1/4 个段，进度条为 1/4th(将在此设置中起作用。

我在这里看到的真正问题是，您正在寻找一种快速的解决方案，而不是试图射击房间里的大象。 对于网站来说，2 分钟的加载时间非常长，这意味着您的控制器中正在发生一些主导该时间的事情。在当今的互联网中，发送HTML所需的时间非常快，因此这不是问题的根源。您可以按照以下步骤操作来帮助查找问题：

  • 查看数据库调用。您是否为可能已经拥有的一段数据多次调用数据库？
  • 您正在加载的数据是否非常大。您是否正在加载整个表，而不仅仅是所需的列？您要加入非常大的桌子吗？
  • 如果这依赖于加载数据的文件，那么是否还有其他东西使用该文件并且程序正在等待访问？
  • 看看你的收藏。您是否正在重新排序，重新排序和排序？ 您是否在不同的集合类型之间进行转换(即。链接列表到数组到列表到其他内容(？如果您有大型集合，您尝试通过 C# 进行排序，您是否可以在其他地方对它们进行排序，例如在数据库的查询中？
  • 在什么情况下您的页面会变慢？是否有页面在具有相同数量的数据的情况下打开得更快？如果是这样，瓶颈可能发生在一个非常特定的地方。
  • 您是否在慢速服务器上运行它，即在家中？这可能会对性能产生巨大影响。

这些只是少数。2分钟太长了，随着您进一步开发网站，情况会变得更糟。对于处理简单数据收集的简单网站，即使在忙碌的一天，您也不可能在没有一些潜在问题的情况下达到 2 分钟。如果您的网站被大量使用并且您的代码很慢，请查看最常见的代码段并首先尝试优化它们;然后继续优化其他较少使用的代码段。

如果在优化绝大多数网站后，在性能方面仍然遇到很多问题，请考虑使用带有部分视图的 AJAX。虽然它们不会提高您的整体性能，但它将允许您分段打开您的网站，提供更多视觉反馈，告诉用户页面仍在加载。

是的。您可以使用等待弹出窗口作为组件中的加载时间。例如。如果使用等待弹出窗口组件，请在 .ajaxStart(( 事件中调用弹出窗口并关闭 AjaxComplete 事件中的等待弹出窗口。

请查看下面的 ajax 事件以获取进一步参考。

http://api.jquery.com/category/ajax/global-ajax-event-handlers/

相关文章：