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.
Related
I am doing simple web application with a little business logic. Now I have Drop down list with about 25 000 product and user can choose it.
The application will be probably slow for users who has slow internet speed. (in company it`s ok)
Is there any component (in Visual Studio) or what is the best way to server so many product to users?
I also try with ComboBox ajax, but in IE 8 CPU was unable to process.
Is there a reason that you need to display all 25,000 items at once? I imagine that this will be a usability issue even if it works flawlessly. With such a massive list, users already must have some sort of idea of what they are choosing.
How about a simple text box that uses ajax to drop down suggested results (similar to google search)?
Edit
You could also break your items into multiple categories and then have a drop down list of categories. Once the user chooses a category, a second drop down list can display all items in that category or maybe something to break the category down even more. Similar to: http://www.kbb.com/whats-my-car-worth/
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.
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.
I have this GUI that shows, let's say Customer Orders. When my client nailed down the requirements, he asked me to keep pagination like this,
Show Items Per Page : 10/50/150
For each customer there could be thousands of orders and each order will have atleast 50 attributes to show up in the screen. So, assume a 50 column html table with 2000 or 3000 records associated with it spanning across multiple database tables (anyway, this is a different story)
Things were breeze until yesterday, now my client has come up with new change requests, in that he specified Show Items like this,
Show Items Per Page : 10/50/150/All
Yes, he wanted to see 2000 or 3000 records by just select "All" option. Internally, this is not a big change, I would go back and remove the filters I apply on rowcount etc., but when it is loaded in GUI it really sucks ... view state was huge etc., etc.,
I know, this is a standard problem. How you guys deal with it? I cannot convince my client to remove this "All" option, he got stick to it. (the reason is simple, he got a big 42" screen where he can easily see 1000 items in one page)
I also tried to use javacript to prepare DOM in a ajax call .. but still, inserting 2000 TDs is really slow.
Any help is greatly appreciated.
Some Extra Info
This application is a intranet application or else accessed through VPN connection
This problem is about browser performance.
I suppose you can do two things.
1) you can use <div> instead of <table> (this is possible with CSS) because browser do not render table until closed tag. So it will take long to load page but it will render first results faster.
2) If you use Ajax+Json and render every <tr> piece by piece, you can render whole thing and only than put it in DOM. That will be faster because browser will not render every time you put another row
If you want you can load the data in sort of installments. Sort of like how pagination works but it is not quite pagination to be precise. You can label your installments/pages with a proper ID. Load the page one after another via ajax calls. You can even show a progress bar to show how much data is actually loaded. Append this data to the table you are displaying the data in. I would not go about using server controls for this...you have to handle this via javascript or jquery.
You might want to append table rows incrementally.
When client scrolls close to page bottom - fire an ajax call, return next page and render it.
But best solution would be to convince your client - this is not how web applications works. We had similar situation - pure nightmare.
Instead of an ASP.NET GridView, you'd be better to use a DataRepeater.
Better yet, if you are not constrained by technology, you can use Microsoft Ajax Preview 4 with WCF REST Services. You would just need to find some hacks to "stream" data from the service and display it.
Also there is JQuery Grid (if you don't want to use Microsoft Ajax Preview 4) that supports JSON serialization.
I use asp.net 3.5 and have also begun looking at 3.5 sp1
I like the clean urls that mvc tends to have but use asp.net webforms for my primary development. I normally use a url rewriter in order to accomplish this type stuff. When I say clean urls I mean like /products to get a list of products and /products/Product_One to look at the info about product called Product_One. I've used this on sites where the listing is on one page and when you pick the item it goes to a different page that shows the info about the item selected.
but
I also like the way that the update panel works and changing stuff on screen with out flashing the screen. When I do this I tend to have a list on the left with the different items that are selectable and then have on the left the data about the selected item, then I use an update panel so that when the item on the left is selected it's data shows up on the left without flashing.
I need opinions on what you all think of the two different methods of displaying a list and seeing the item that is selected's data.
1) Which is better in your opinion?
2) What do you all do to display a list and show the data on one of the items?
3) Is there another way of doing this?
4) Is it possible to combine the update panel method and the nice urls? (i.e. change the url to match the url that would get you to the current displayed data even though the update panel was used, and add to the history the new clean url for the current page)
What you are referring to is AJAX URL history management but you will not be able to modify the URL besides the "#" anchor.
At least not without reloading the page.