CODEWITHSUNDEEP
c#asp.net-mvc-4
rbs
rbs

Reputation: 13

How to use page load indicator/progress bar in MVC

Here is my model:

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;
        }
    }
}

Here's my Controller:

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

And here's my View:

@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>

The one thing that isn’t so good is that it took maybe 2+ minutes to load, and it appears to the user like it might not even load (the mouse just spins). Is it possible to put in a progress bar? I think most users like progress bars because at least they know it’s working, and about how long it will take.

Upvotes: 0

Views: 3097

Answers (2)

RGR
RGR

Reputation: 1571

Yes. You can use waiting popup for the loading time in your component. For eg. if you use waiting popup component, call the popup in the .ajaxStart() event and close the waiting popup in AjaxComplete event.

Please check the below ajax events for further reference.

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

Upvotes: 0

Serguei Fedorov
Serguei Fedorov

Reputation: 7953

There are a few things that you need to know about how browsers work:

  • If you are opening a page, nothing will display until the connection is closed. Images and other things are parsed later by the browser so they open after the initial page open
  • There is no way to determine the current state of the page open unless you know the size of the data being received. For that the page has to start sending data and you need to know exactly how large the data is. For instance, a file has a set size for the data so you can attach a progress bar to it using Javascript. All data is processed on the server while the browser is still waiting for a response.
  • You will need some kind of tracking on the front end (html side). This means that you atleast need to have some kind of basic shell of a page open that can keep track of the transaction. This can be done by loading portions of the website using AJAX and roughly estimating the amount of time this takes to open (and apply this to the progress bar in relation to time). Breaking down a progress bar to loaded segments (ie. 1/4 segments loaded, progress bar is 1/4th) will work in this setup.

The real problem I can see here is that you are looking for a quick solution and not trying to shoot the elephant in the room. 2 minutes is a very long load time for a website, which means that something is happening in your controller that is dominating that amount of time. The amount of time it takes to send HTML is lighting fast in today's internet, so this is not the root of your problem. Here are a few steps that you can follow to help find the issue:

  • Look at your database calls. Are you calling the database multiple times for a piece of data that you may already have?
  • Is the data that you are loading very large. Are you loading entire tables rather than just the columns you need? Are you joining very large tables?
  • If this relies on say, a file to load the data, is there something else using that file and the program is waiting for access?
  • Look at your collections. Are you sorting, resorting and sorting again? Are you converting between different collection types (ie. LinkedList to Array to List to something else)? If you have large collections you are trying to sort via C#, could you possibly sort them somewhere else, for instance in the query on the database?
  • Under what circumstances does your page slow down? Are there pages that open much faster despite having the same amount of data? If so, the bottleneck maybe happening in a very specific place.
  • Are you running this on a slow server, ie. at home? This can have a huge impact on performance.

These are just a few. 2 minutes is far far too long and will get even worse as you develop the website further. For simple websites that juggle simple data collections, there is no way you are hitting 2 minutes, even on a busy day, without some underlying issue. If your website is under heavy use and your code is slow, look at the most common code segments and try to optimize them first; then move on to optimize other, less used code segments.

If you are still having lots of trouble with performance, after optimizing the vast majority of the website, consider using AJAX with partial views. While they wont increase your total performance, it will allow you to open your website in segments, providing a lot more visual feedback telling the user that the page is still loading.

Upvotes: 2

Related Questions