I have been asked to design & develop a page in asp.net which contains 7 tabs.Each table contains 2 Editable gridview & clicking on gridview cell should open a popup & that popup will open a new popup ( I would say nested popup). even when i switch from one tab to another. It should hold the griddata & whenever user will finish all the operations he/she will click on save button which will save all the data contained in the tabs.
The page is really too too too heavy. It will definitely take a long time to load as it contains gridview operations , popup related jobs, tab data & tab switching.
I am finding the best way i can achieve this with an acceptable speed of operation. Any suggestions or help would be greatly appreciated.
With all of the web-based controls (tabs, grids, anything that uses an intensive postback model) included in ASP.NET, plus those made by 3rd party vendors (Telerik, Infragistics, and the like), it is possible to make very big web pages. And I've made more than a few in my days. Tabs. Multiple update panels. Drop-downs created from dozens of sources. I have decided to remember one simple fact:
WEB_APPLICATION != CLIENT_SERVER
Just because you can, doesn't mean you should. If changing the UI is not an option, keep in mind the following
Look into paging your grid views. Limiting the amount of data rendered on the page will speed up the page.
You can look at caching operations. If you have access to modern browsers, you can make use of isolated local storage on the client. This will be even faster than caching on the server, but you're limited to the really new stuff.
Become a big friend of partial page loads and AJAX operations. You can still build a bigger UI, but keep the actual data operations small and focused. Data-driven drop downs on a hidden tab can be loaded after the visible components of the page have loaded.
I've made a lot of customers very happy because I keep my UI's incredibly fast, and they never break. I keep them fast by keeping them focused. A page is built for a single task. Design for simplicity into UI. You will not be sorry.
Paging.
Caching.
Lazy Loading (through Ajax).
I am not a ASP.net programmer but I think you need to go back to the basics. I am assuming that gridviews are tables.
You could look into the following basic optimizations:
each of your 7 tabs could be a separate http request, that would cut down your load times by 7 for starters
Possible use a combination of cookies and session objects to hold on to the data in the other 6 tabs.
Also, as #LordCover suggested:
Look into ASP.net caching options if any
Use Ajax where you can (editable table cells)
Also, think in terms of the HTML being generated from the ASP page rather than have a completely ASP centric mindset around this.
Also do not rule out a UI redesign, there are many ways to do the same thing. You may be able to break up the UI into simpler pages
Related
I am looking for some design "best practice" or heuristic to address performance issues on a webpage.
Basically, there are dropdown menus with up to 10,000 choices and each is in an tag. So I have many thousands of extra nodes in the DOM model. I think this is slowing down the javascripts that parse the document after it loads, but also it is slowing down the initial page load to get out all that data.
I would like to lift those drop downs off the page entirely, so instead of combobox style controls, it will have a link to a modal popup which will contain the picklist. I think preloading and caching these popups on the client will prevent the slowness of loading the initial page, and get all those 10,000s of off the DOM so that the existing script performance will improve.
With my limited experience in web development, I am not sure if the best thing is to create some sort of page/control/service/etc for the initial approach. Once I am confident I am using the correct approach, I should be able to work out the details.
Will the dropdown selections be changing frequently or static? If they're static, you could maintain the list as an enum in your VB code behind and have the dropdown use the enum as its data source.
If they're dynamic, I'd explore breaking the list up if at all possible into smaller chunks that could let the user "drill down" from general to more specific items. For example if this dropdown lists types of animals, you might have an initial dropdown subset:
Mammals
Reptiles
Amphibians
Upon selecting one of the above, say Mammals, then you'd hit the database for a more specific subset:
Apes
Marsupials
Finally the most specific subset, if they choose Apes:
Baboon
Chimpanzee
Human
Orangutan
If the list cannot be broken down in this way, then I'd try to implement a Google Instant style autocomplete functionality. If you read up on jQuery, there is an autocomplete control which serves this purpose; you should be able to tie that to the database to be able to query as the user types and thereby pare down the results.
I am developing a website using asp.net 4.0(Browser IE8).My page contains a tabcontainer with 5 tabs .Each tab contains a grid without paging i.e each grid can contain 250 to 300 records. I am loading tabs on demand but once all tabs are loaded. My UI becomes too slow. How do i manage to make my UI faster & smoother ?
What do you mean by loading tabs "On Demand"? If it just means that you populate grid data when tab is clicked then it explains your problem. Essentially, ASP.NET data bound control stores their data into view-state, so as you go on loading the grids, your view-state keep increasing and essentially, you have a large page size making page retrieval and post-back slower.
Quick solution will be to disable view-state for all grids and always bind the grid on current tab from actual data store (you may cache the data on server side in session or ASP.NET cache for improved performance). This will make sure that only one grid is populated at a time and there is no-burden on the view-state.
Alternate techniques will involve loading contents for only current tab but it involve arranging contents into user control etc and a bit tricky to get working in post-back scenarios etc.
Relatively simple approach is to use your own control/html to render tabs and each tab is a GET request to a separate page. For example, if you have four tabs then you will have one master page providing common layout including tabs and 4 content pages representing each tab.
If you want to avoid page refresh on tab switch then you may try loading content page using AJAX request.
I'm not certain if this will help your issue or not, but one option is to hide the grid contents (style.display='none') when the user switches to another tab. It's worth a shot.
I create Tabs (almost 18) Dynamically in my ASP.net application and these tabs are taking lot of time to load. I create these tabs during the Page Load event and Tabs mostly contain user controls.
There is no order in which these tabs will be rendered as use has the choice of changing the order. Any ideas/suggestions to improve the performance?
Tab creation is according to the user login. each user had ther on number of tabs. mostly 18 tabs. these tab names, user control names, and itz creating order is geeting from DB.
ArrayList tablist = ms.GetMemberScreenTabs(ClientId,UserId);
Session["TabList"] = tablist;
how can i load this as faster as possible.
I have had to deal with slow pages that contain tabs.. but in my case it was because the generated page was way too large. The HTML alone was going up to 2mb with the viewstate and all. And then add all the scripts and images etc. The page will seem like it is loading very slow but in reality the server side time was quite nominal.
You should try tracing the page and see how much time it actually takes to render. That would remove the network out of the equation.
Then if needed, you can follow the general page speedup methods like enable gzip, move the viewstate to use session, consolidate scripts/css to single requests, enable caching, lighter images via handlers etc.
Sorry if this seems off topic.
I have what I imagine to be a pretty standard web-interface.
There are 4 different ListViews (grid controls) which are accessed by a series of Tabs on the top.
I have implemented this as follows:
alt text http://img402.imageshack.us/img402/1530/pagedu8.jpg
Tab 1 will load Page 1 containing Grid 1 into Frame 2, Tab 2 will load Page 2 containing Grid 2 into Frame 2 etc.
However this then means that if you click on an item in the Grid, and I load DetailsPage1.aspx into Frame 2, then Frame 1 and the tabs are still visible and active.
I've been advised that I should just have one Frame, and load the Pages in dynamically based on the tab click, using HttpRequest (or WebRequest in asp.net).
Is this the correct approach to take? If you have any resources or tips at hand, it would be appreciated!
Thanks
Frames are an absolute no-no. There is no benefit to frames that can't be achieved using other techniques.
Does that mean you must use AJAX? Not necessarily. AJAX is a perfectly good solution if you feel the need to provide a rich, seamless interface, but it's not strictly necessary.
You could use server-side includes to separate your tabs into a another (common) sub-page, but since you mention ASP.NET, (assuming you are running on framework v2 or greater) you might want to use Master Pages, where your tabs are in one content section or in the Master itself, and your grids/details are in another content section.
The key difference between the two techniques is that using AJAX, the transition from tab to tab will be slick and seamless, but a) it takes a little extra work (particularly if you are unfamiliar with any give AJAX framework) and b) since you essentially have 4 pages rolled into one, the pages are 'heavier' and are more complex to maintain. If you opt for the non-AJAX route, the key difference is that there will be a small but distinct refresh effect when you click on each tab (since it loads a new page each time).
Of course, Master Pages are useful for maintaining a consistent site style and structure anyway, so there is no reason why you can't use AJAX with a Master Page system.
Frames are lame: you will get problems, if users want to set a bookmark and if users visit your site via google: Then your navigational frame is not visible. So you need a lot of dirty javascript. to check this. If you need javascript, do it right from the start and use AJAX
Ajax is the best pick. But keep in mind to make it browse-able via back/forward. The best pick is to change page hash. I used something like this:
domain.com/#tab1 for first tab
domain.com/#tab2 for second tab
and so on.
If you use jQuery, this can be a good start (i use that and i had NO problem with). I'm sure there is a solution for all popular framework though :)
Instead of using frames, you should just include your navigation page in all of your other pages. The browser will see that you're including the same document in all of your pages and cache it.
Have you tried the TabContainer or loading all 4 detail panes and just showing/hiding panels on tab selection change?
Depending on what screens your users will see, if you load the detail views dynamically (Ajax or postback) you may have trouble persisting any information that the user has entered, and you will incur a wait (users dont like to wait)
I would recommend using jQuery and jQuery UI plugin. No frames will be needed, just div containers.
Like StingyJack, I would suggest having a look at the TabContainer control, but you might want to take care that your ViewState doesn't get too large if you do.
So for example, don't load anything into a GridView until that Tab is being viewed and remove it contents if it is not (saving back to the database of course if required. Using the TabContainer's ActiveTabChanged event would be key to this strategy.You diable ViewState for the grids but leave it on for the container.
You're using ASP.NET, so just load all 4 controls into a mutliview and then on postback set the visible one to be which ever button has been clicked.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.multiview.aspx
DO NOT uses frames (or iframes for that matter) unless you absolutely must...
The only valid reasons I can think of to use (i)frames is file upload controls in fact, and I am not sure it's valid there either...
I've got a web application that I'm trying to optimize. Some of the controls are hidden in dialog-style DIVs. So, I'd like to have them load in via AJAX only when the user wants to see them. This is fine for controls that are mostly literal-based (various menus and widgets), but when I have what I call "dirty" controls - ones that write extensive information to the ViewState, put tons of CSS or script on the page, require lots of references, etc - these are seemingly impossible to move "out of page", especially considering how ASP.NET will react on postback.
I was considering some kind of step where I override Render, find markers for the bits I want to move out and put AJAX placeholders in there, but not only does the server overhead seem extreme, it also feels like a complete hack. Besides, the key element here is the dialog boxes that contain forms with validation controls on them, and I can't imagine how I would move the controls and their required scripts.
In my fevered imagination, I want to do this:
AJAXifier.AJAXify(ctlEditForm);
Sadly, I know this is a dream.
How close can I really get to a quick-and-easy AJAXification without causing too much load on the server?
Check out the RadAjax control from Telerik - it allows you to avoid using UpdatePanels, and limit the amount of info passed back and forth between server and client by declaring direct relationships between calling controls, and controls that should be "Ajaxified" when the calling controls submit postbacks.
I recommend that you walk over to your local book store this weekend, get a cup of coffee and find jQuery in Action by Manning Press. Go ahead and read the first chapter of this 300 page book in the store, then buy it if it resonates with you.
I think you'll be surprized by how easy jQuery lets you perform what your describing here. From ajax calls to the server in the background, to showing and hiding div tags based on the visitor's actions. The amount of code you have to write is super small.
There are a bunch of good JavaScript libraries, this is just one of them that I like, and it really is easy to get started. Start by including a reference to the current jQuery file with a tag and then write a few lines of code to interact with your page.
Step one is to make your "dirty" pieces self contained user controls
Step two is to embed those controls on your consuming page
Step three is to wrap each user control tag in their own Asp:UpdatePanel
Step four is to ensure your control gets the data it needs by having it read from properties which check against the viewstate for pre-existing values. I know this makes your code rely on ugly global variables but it's a fast way to get this done.
Your mileage may vary.