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

时间:2013-09-27 05:01:22

标签: c# asp.net-mvc-4

这是我的模特:

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分钟,并且用户看起来似乎甚至无法加载(鼠标只是旋转)。是否可以放入进度条?我认为大多数用户喜欢进度条,因为至少他们知道它有效,以及需要多长时间。

2 个答案:

答案 0 :(得分:1)

关于浏览器的工作方式,您需要了解一些事项:

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

我在这里看到的真正问题是,你正在寻找一个快速的解决方案,而不是试图在房间里拍摄大象。对于网站来说,2分钟是一个非常长的加载时间,这意味着控制器中正在发生的事情占据了大部分时间。发送HTML所需的时间在今天的互联网上快速点亮,因此这不是问题的根源。以下是帮助您找到问题的几个步骤:

  • 查看您的数据库调用。您是否多次为您可能已拥有的数据调用数据库?
  • 您加载的数据是否非常大。您是否正在加载整个表而不仅仅是您需要的列?你加入非常大的桌子吗?
  • 如果这依赖于说,一个文件来加载数据,是否有其他东西使用该文件并且程序正在等待访问?
  • 看看你的收藏品。你在排序,求助和再次排序吗?您是否在不同的集合类型之间进行转换(即LinkedList到Array to List)?如果你有大型集合,你试图通过C#进行排序,你可以在其他地方对它们进行排序,例如在数据库的查询中吗?
  • 您的网页在什么情况下会变慢?尽管拥有相同数量的数据,是否有更快打开的页面?如果是这样,瓶颈可能发生在一个非常特定的地方。
  • 你是在慢速服务器上运行它,即。在家?这会对性能产生巨大影响。

这些只是少数几个。 2分钟远远太长,随着您进一步开发网站将变得更糟。对于处理简单数据集合的简单网站,即使在忙碌的一天,也没有任何方法可以在没有一些潜在问题的情况下达到2分钟。如果您的网站使用频繁且代码很慢,请查看最常见的代码段并尝试先优化它们;然后继续优化其他较少使用的代码段。

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

答案 1 :(得分:0)

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

请查看以下ajax事件以供进一步参考。

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