How can I speed up large web page with many DB requests?

Question

Platform: Asp.Net (Website),C#, SQL Server 2012, Ajax.

I am developing an Asp.Net web application It will be used by many users (may be around 5000 or more). Where I have a webpage on which I display around 200 to 500 Grid Rows, each row contains around 20 to 25 controls like TextBox, Dropdown, Link Button & some HTML links to show/Hide information using JavaScript.

It's basically a data-entry page where user can edit/add records & finally save them.

I reloads the HTML on each Page load (as I have set the View State to false for this Literal Control). On Server side execution it generally takes 5 to 8 seconds, but it generally loads whole content in 12 to 18 seconds, but some times it takes around 40 seconds to over 1 minute (I guess this could be the concurrency issue but not sure as many times with some users it loads in 15 seconds approx.).

What I do for loading this HTML?

1st I fetch the list of combined items from DB, then I break it into hierarchy view, then I loop through each item & creates the HTML string. In each Items there are many sub Items like Getting Staff List to de displayed in DDL, also getting Distance for each Staff, etc (again I hit DB for each sub processing).

Some of these operations include very large DB Tables(having more than 50,000 rows) I have tune such stored procedures to avoid any use of like/Replace/etc operators.

Please guide me what approach should be taken in such a scenario? Can I use Threads to perform multiple operations in Web Applications to reduce the processing time?

Thanks

Answer 1

This seems like a big page with a lot of functionality. How do you manage your edits? Do you allow users to do multiple changes to multiple rows and then commit or do you commit to the server after each row edit?

I think that you could employ JavaScript and maybe leverage modern HTML5 features like local data etc to allow your users to edit and see the data locally cached on the page and then use JavaScript to push the updated data back to the server. By using Ajax you can push selectively only the updated data instead of a full page refresh through postback. That way your users get a better experience and you minimize the amount of data going back and forth the server.

I hope this points you to the right direction.

Answer 2

I would suggest to limit number of rows per page to 20-30 as you have mentioned you are displaying 200 to 500 Grid Rows. Also create separate page for edit instead of inline edit in grid where there are 20 to 25 controls are available to edit because it will increase page size as number of rows increase.

Answer 3

I think, you haven't find answer on your question here. Rather, there are common approaches for resolving this issue.

I think it is:

• -ajax
• -paging (separete your data result by pages)
• -data caching
• -creating summary view for current row (basic data set) with the possibility of other data-loading

It's first things that comes to my head.