Good afternoon,
Currently I'm developing a web app using ASP.net Core MVC.
I would like to know if there is a way to load and show the query results one by one instead of wait until it is complete and show everything.
For example, in my application I have a query that usually returns more than 500~1,000 products. But my page stays loading until everything is completed and then display the content.
I used to develop in Clojure and there the products were loading one by one instead of waiting everything to be completed.
I am wondering if there is a way to fix this in ASP.net or maybe using AJAX.
Thank you
Sounds like you need some pagination. This way you can take only 25, or 100, or whatever number of rows you want at a time. Datatables works well for this in server side mode but it is going to take some work to setup.
I think you should use server side pagination, read article for this:
https://datatables.net/examples/data_sources/server_side.html
http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part
Related
I have created web page that retrieves data from MS SQL database and display it to the user in well formatted manner. Data retrieved depend upon criteria selected by the user. But sometimes data retrieved is very large. I want to display records to the user page wise, i.e. 100 records on first page and next 100 records displayed when user clicks next button. This means only 100 records should be retrieved when user first select search criteria, next 100 records retrieved when he clicks next button and so on, as to reduce data transferred from server to client.
Please suggest me how to achieve this as soon as possible. Thanks in advance.
What you are looking for is called paging.
This can be done a million ways. You mention jquery, javascript and asp.net. For displaying purpose that is quite all righ but for good performance you want to make sure that the actual selection of the page has to be done at the backend.
One approach is this:
http://msdn.microsoft.com/en-us/library/aa479347.aspx This is not jquery but it shows a way to do it.
You can use jqGrid or DataTables. Both are very popular grids
Ask user to set there criteria and then render the grid according to that.
If you want simple fast and way then think in using jQuery plugins like these
jpaging OR datatables.
you should search for design pattern for this.
kindly look at this Easily build powerful client-side AJAX paging, using jQuery
Your use of both asp.net and C# makes me (probably because I am partial to it) think "WebMatrix". If, indeed you are using WebMatrix, check out its Grid Helper. However, be warned that this method can generate some very serious overhead for your html page (by that I mean that if you query 1,000 rows and only use 100 per page, it will retrieve all 1,000, use 100, and waste the other 900). Also, using the WebGrid generates the results in a table, which may not be your preferred style.
Alternatively (still thinking "WebMatrix"), you could use this article here (this is my preferred method): http://www.mikesdotnetting.com/Article/150/Web-Pages-Efficient-Paging-Without-The-WebGrid
Don't worry, that article is explained with EXCELLENT brevity and accuracy (and explained better than I could, so I leave it to Mike to vicariously answer that one).
I'm working on a web app in ASP.NET MVC 3 using the Razor HTML 5 engine and C#. The client wants something pretty complex and I would like to know if there is any examples out on the web that might show me how to begin setting this up. Here's what they are looking for:
I have a very large SQL database (25,000 rows). They want to be able to select the data using three different views on the same page.
The first will be a tree and using similarities in certain columns of the table will be how the tree is broken in to sections.
The second will be a grid. This will be just one entire list of the everything in the database that you can scroll through. Of course there has to be some sort of virtual scrolling because loading 25,000 rows rather quickly isn't going to happen.
The third will be a search box where you can type in the code and select it that way.
All three of these need to be linked so that when you type a code in the search box it will select it in the grid and in the tree. If you select it in the tree then it will be selected in the grid, and if you select it in the grid then it will be selected in the tree.
They also want me to remember the last selection when you navigate away and be able to type a code n on a different page and go directly to this page with the item you typed selected. Therefore, I need to be able to use MVC's capabilities to establish a hyper link for every item in the list (I assume that would be the way to do this)
This is honestly the first time I've worked with ASP.net MVC and I feel like I may have bitten off more than I can chew with this project so any help would be greatly appreciated!
They would rather it if I didn't need to include any extra dll's so if there is a way to do this without third party tools that would be even better, but at this point I'm just looking for anything.
A few random ideas/thoughts about this:
This is kind of a big project as your first MVC app - hopefully you have some experience with HTML/Javascript/jQuery since it's going to require a fair amount of glue code to make everything work together. There is no "here, do this" solution.
There are a bunch of different free/open source projects for treeviews and grids. I've used jqGrid for a number of projects - it works well. It has a decent API and is fairly configurable (although it may take some digging to find the example code you need).
For a treeview, you can try jsTree. I haven't worked with it, though.
I'd suggest starting with just the treeview, or just the grid and get it working first. Then add the other control and get it working. Then add the search. Finally, I'd work on getting everything to work together.
To handle navigating to a specific selection, you can pull information off the query string from Javascript.
Realize that most of this is going to be happening in Javascript on the client side, not much server side.
Now this is going to be a very absurd question. But what can I do, it's the client's requirement. Basically, we have a grid (master-detail type) that goes up to about 15 thousand plus rows (has the potential to go up to 30-50 thousand rows in a few years time).
My client does NOT want any paging, does not want any data cropped as well. Also he isn't exactly using the latest hardware so rendering on browsers is a big issue. He wants to view everything by printing it out or looking through it on the browser. (You may all think how insane that sounds, and it sure is).
Now I want to resolve this issue by rendering html quickly. At the moment its a simple asp.net grid view w/o paging. That essentially renders HTML tables. My options that I think are:
- Manually rendering html using div (for quick loading)
- export it to pdf or excel (is there any way to export without the need to resort to third party controls?)
- give the finger (to the client :D j/k)
So to sum up, whats the best way to show 10,000 plus records of data on html?
consider using the "Scroller" plug-in for Datatables..
As part of DataTables 1.8 release a new plug-in called "Scroller" was
introduced as part of the download package. Scroller is an
implementation of virtual scrolling for DataTables, which presents a
vertically scrolling table, scrolling the full height of the table,
but drawing only the rows which are necessary for the visible display,
leading to a huge performance increase. This is quite an exciting
plug-in for DataTables not only for the performance increase, but also
because it effectively provide a new user interaction with the table,
allowing full scrolling of very large data sets.
I know this is almost a year late, but in case it helps someone.
Use SlickGrid - It uses divs instead of tables, which gives so much more performance in IE. Check this example
He wants to view everything by printing
This is imho the only viable solution to view all information. PDF or Excel is much better at handling a large number of rows.
Doing the rendering is quite easy. Just set the excel mime type and return a HTML table.
http://www.designdetector.com/archives/05/07/HTMLToExcelTheEasyWay.php
When it comes to PDF, you probably have to use an external library like PDFSharp.
You should do the paging - it does not mean that you need to show only one page of data at a time but rather you should retrieve and render pageful of data at a time (and keep continuously fetching pages one after one till data is finished).
For example, send the first page of data from the server in the initial request. Setup a js timer and use AJAX requests to retrieve subsequent pages of data and load that into the browser. You can have multiple (say 3-4) AJAX requests going on simultaneously for retrieving pages - only thing would be to achieve the ordering correctly in such approach.
I will personally avoid grid-view and render the html table using manual java-script (with help for jquery) or use some java-script template engine. I will use JSON for retrieving the data from the server.
my scenario is this; the user selects the list of reports they wish to print, once they select and click on the a button, i open up another page with the selected reports ready for printing. I am using a session variable to pass reports from one page to another.
first time you try it, it works fine, second time you try it, it opens the report window with the previous selected reports. I have to refresh the page to make sure it loads the latest selections.
is there a way to get the latest value from the session every time you use it? or is there a better way to solve this problem. open for suggestions...
Thanks
C# Asp.net, IE&7 /IE 8
After doing some more checking maybe if you check out COMET it might help.
The idea is that you can have code in your second page which will keep checking the server for updated values every few seconds and if it finds updated values it will refresh itself.
There are 2 very good links explaining the imlementation.
Scalable COMET Combined with ASP.NET
Scalable COMET Combined with ASP.NET - Part 2
The first link explains what COMET is and how it ties in with ASP.NET, the second link has an example using a chat room. However, I'm sure the code querying for updates will be pretty generic and can be applied to your scenario.
I have never implemented COMET yet so I'm not sure how complex it is or if it is easy to implement into your solution.
Maybe someone developing the SO application is able to resolve this issue for you. SO uses some real-time feature for the notifications on a page, i.e: You are in the middle of writing an answer and a message pops up in your client letting you know someone else has added an answer and to click "here" to refresh.
The proper fix is to set the caching directives on the HTTP response correctly, so that the cached response is not reused without validation from the server.
When you fail to specify the cache lifetime, the client has to "guess" how long the response is good for, and the browser's guess probably isn't what you want. See http://blogs.msdn.com/b/ie/archive/2010/07/14/caching-improvements-in-internet-explorer-9.aspx
It's better to use URL paramaters. So you have a view of value of the paramaters.
Hi
Let's say that I've to list thousands of records for my client.
How should I implement this? Some say that I have to retrieve just 300 or 400 records from the database and show those to the client. But I think there will be some problem with pagination. If I get all records from the database then I will have a performance problem. Some say to implement our own store procedure. How should I do this?
Thanks
You definitely have to use paging and not retrieve all the records at once, I recommend using some ORM tool to abstract the complexity of the required query for paging, if using LINQ it would be something very simple: ...Skip((pageNo-1)*pageSize).Take(pageSize)
I am in favor of sending ~100 records with the page, paginating through them by JavaScript, and retrieving further records in a batch by some higher number, say, 1000, when user navigates to unloaded data. All with no-script fallback links if you can't force user's to use JavaScript.
(Not sure how easy this is with C# frameworks; with Java's Wicket, this is quite easy.)
Paginate the records ! That will the the only solution (which you haven't yet tried by the way!). You could add Button controls to move between pages, and data loaded to a page when the page is loaded. Or the records could be loaded all at once and stored by the app, and just shown to the user when a page is shown.
Paging is definitely an answer to this. However - Do all your match inside SQL Stored Proc.. Instead of depending on the GridView default paging...
If you don't want to use Paging (some clients are very adamant to show all records) then you can use Scroll event to fetch records on the fly. If you using a Web Application, you can use Ajax Call to fetch next set of records by passing the pageNo,pagesize etc....