Reputation: 607
What is the best way to render large data at the View? Is the some way to render it by portions?
Controller's action produce the large data set (1000x1000 matrix) and returns it to View. When I render it the browser hangs. The data is produced by the other service and I can not get it with a smaller portions.
Matrix is two dimensional array of INT values.
Controller code:
public ActionResult GetData()
{
var result = ThirdPartyService.GetData();
return View(result);
}
View code:
<table>
<% foreach (var x = 0; x < Model.Matrix.Count; x++) { %>
<tr>
<% foreach (var y = 0; y < Model.Matrix[x].Count; y++) { %>
<td><% = Model.Matrix[x, y] %></td>
<% } %>
</tr>
<% } %>
</table>
Upvotes: 0
Views: 1365
Reputation: 8352
You can render an empty table and get the data from the server for using ajax to populate it. This way, you will download the layout and the data, but not the <tr><td></td></tr>
content. If you do the math:
<tr></tr>
for each row gives you 9*1000 = 9000 bytes<td></td>
for each cell in each row gives you 9*1000*1000 = 9000000 bytesYou can reduce about 9 mb from the request and that's a lot!
Also, you can turn on GZip on the server so the data moves compressed.
Upvotes: 1
Reputation: 1754
I guess that matrix that size isn't rendered whole on page, so my suggestion is to dynamically manipulate DOM, as user scrolls, by attaching to scroll event. This worked for me quite amazing, by using SlickGird as data rendering component, with written custom plugin to handle auto-complete drop-down with more than 1k elements. Browser has no problem with handling large data sets (I've tested up to 400k JS objects), but it definitely hangs when trying to display them. So just render the portion of the screen you're user is positioned at.
Upvotes: 1