I'm building a website that on its frontpage has different 'lists' of stories/articles.
You can compare it to Wordpress 'latest articles', 'spotlight articles' etc.
Now every list needs to be created, and filled from the repository.
Which means, that in my controller, I first create/retrieve all the lists, add them to the ViewBag, and then return the view.
In the View i'll then foreach over the items in that list to create a visual list to be shown on the frontpage.
However, when I load the page, I first get a blank page, when the page is loaded, and then at one point everything appears.
Traditionally, you would already see the basic html, text etc, and then the dynamic area's would appear later.
Is it possible to have a similar 'progressive loading' with MVC3?
Its not so much the performance I'm worrying about but more so the user experience of seeing a blank page for several seconds on data-heavy pages.
Thanks :)
If you've got heavy pages with long loading times you might consider loading the pieces more dynamically using an ajax approach.
Your page loads, you execute the requests for the data you require and use some standard loading icon in the meantime.
Related
So I'm working on a dashboard like app that has 8 different widgets that come up in the same page (index). All 8 pages talk to SQL server and might load slow at one point or another.
I'm looking for the best method to load the page first thing and display each widget as soon as the data is available, and not wait for all 8 widgets to be ready before i see anything but a blank page.
The current method uses includes and ajax but is not ideal and causes other problems.
JDash looks good but is quite too complex for my needs.
Using ajax to fetch dashboard item will be the best option.
You can try with calling the same function to the ajax success event with the next dashboard item.
I am using Asp.NET MVC4 with Razor.
I want to show a list of items/entries (coming from a database) over several pages where the user can navigate to the next page or a specific page and each page shows e.g. 30 entries. It should be similar to the way the questions are structured in stackoverflow with this little page navigator at the bottom. How would I do that? I would guess that an example already exists but I have not found any.
Right now I show all my items on one page using a partial view in my index-view:
#foreach (var item in Model) {
#Html.Partial("_ItemInList",item)
I could probably only show the first 30 items but how do I store on which page I am and make the links so that the user can navigate to the other pages?
You could use a pagination control. There are many such components. For example you may take a look at MvcPaging hosted on GitHub.
There's an awful lot of ready made pagination controls available if you're looking for a quick result... but you're probably better off rolling your own. You can restrict your result set to a given page size in your data access layer using Linq and populate your model with single page (plus totals, page number etc...).
Depending on how you've structured your application though, you may want to push paging down to the database level and limit the result set size there rather than higher up the stack.
continued from here..
In the application we are currently writing we have the ability like IStockPhoto to search for images.
In the case of IStockPhoto, after it searches only the view where the images are loaded are refreshed while the other sections of the site remains.
For us, when we search or click pagination, we load the whole site and this comes with quite a performance hit. Since we are loading the scripts, images and facets (and since many of them are nested inside another it has to be recursively loaded) every time someone searches or wants to go to a different page number.
I was thinking of creating an AJAX control for our section where we load the images so we don't have to refresh the whole page. Hence, no need to reload js files, and no need to recursively load facets (I think this is where we have the most performance hit)
So the question is, should I try to create the AJAX control for retrieving stored images? And if so, are there a lot of changes I have to make in my Views and Controllers?
Or would there be some way I can optimize our loading time?
ps. When Solr is hit the first time, the page loading takes about 15-20 seconds (if my memory serves me correct) and afterwards, it takes about 3-6 seconds to load a site with 25 images in the page. Is that normal? It takes about 1-2.5 seconds to load a section in iStockPhoto.
Thank you...
I have recently created an application where a lot of data is loaded into objects when the application starts up, and other data as it is required. For example if the user requests the catalogue page then it will load all the top level category data into objects of type Category. This will then stay there to be used by other users (who will therefore not have to load this data into objects) and can be altered by admin if they happen to login during the same application instance. I know this is not the most efficient solution, as pointed out below, but it works and the page load, at the moment, is not too long. It is very quick if most of the required data is already loaded into objects. It is also tailored to the business' needs - unlike other techniques such as Linq-to-SQL.
The problem I am facing is when a page is requested which requires lots of data to be displayed about different types of object. For example when a catalogue page is requested which displays information on a product which can be bought, it then loads all the products and categories (as the products make reference to the category object, not just the category name).
I would like to display a loading symbol with a message whilst all this data is being loaded into objects, so the user knows its not just in a loop or anything. Is there any way to do this? I am open to using JS / jQuery if I need to.
Thanks in advance.
Regards,
Richard
PS I am working on ways to make it more efficient - such as using HashTables or HashMaps. However this is taking time as there are so many different types of item (News, Events, Catalogue Item - Range, Collection, Design, RangeCollection, CollectionDesign, RangeCollectionDesign and RangeDesign - Users, PageViews and the list goes on).
Please correct me if I'm wrong, but I do believe that Javascript is required in order to display a "loading" image... Using server-side scriping alone would typically require an entire page load after all the content loads unless you want to start messing with IFrames.
This is a job for AJAX. A common solution to your problem is to have a small page that displays a loading icon. The page has some JavaScript that makes additional HTTP requests to the server to download the rest of the page. JQuery has a "$.ajax" method that is designed to simplify this process.
I would suggest looking at the documentation to the .ajax method in the jQuery documentation. Unfortunately, it seems to be a rather delicate process to get all the scripting code right and it takes a while to learn it all.
On a Drupal app, my goal is to display a page with a couple of CCK or taxonomy drop-down widgets, two Date Popup Calendar widgets and a "fake" submit button. The submit will use ajax to send the info to a PHP page that generates a BIRT report and returns the complete HTML back to the page, which I'll just inject into an empty div. I'd like to keep the controls on the page at all times and just use ajax to keep replacing the div containing my report as the user changes parameters and resubmits.
What's the best way to achieve this? I can handle a decent amount of PHP and JavaScript, but trying to leverage Drupal to create a page and display the controls is proving difficult to understand. Examples I've been reading are either too unrelated or too abstract to be helpful. Thanks!
No love from masses, but after a few more days of hammering on it, I've got BIRT 2.5 reports to play nicely in Drupal 6.16. You can read the whole story and see code samples here: I've completed integrating this with BIRT via a small custom module. You can read the full story with code samples here: http://nicholaiburton.com/blog/2010/creating-custom-reports-for-drupal