Update Panel working very slow - c#

I'm writing an app in which user can register. While registering the one may choose several options and according to these regiester fields are visible or not and are required or not.
I came up with an idea that all fields will be in in the updatePanel and when users changes registration options I would set visibility of these fields on the server side.
It works but incredibly slow and whats more on the FF I have the given error:
The state information is invalid for
this page and might be corrupted
3 checkboxes with other fields are in the updatePanel
Each field is in dl tag with runat="server>
I had to do it like that cause for "required" option I simply add css class to this dl (need in in javascript validation. If field should be visible I set visible="false" for given dl and then that field for example FirstName with title and so on isn visible after postback.
Am I doing something wrong ? Why does it take so long (~4 min on localhost) and in firefox it doesnt really work (when I use debug I think that process completes without errors on ff, I dont understand that at all :)
If update Panel is so weak what would be other option to change visibility and adding required class to all dls. Logic is quite complicated and has to make query to DB so simple javascript would be quite tricky.
Thanks for any hints,
Oh and I'm using ASP.Net and cant upgrade on this project.
Thanks for help,
bye

Without code to look at, here are general things which will make an UpdatePanel slow:
Large amount of form data (such as Viewstate) being posted. Uploaded data is often slower than downloading data (depending on connection type, such as a home connection where uploads can be 5x slower than downloads). Even though you can't see it, every form field on the page is posted back to the server (even if its not in the UpdatePanel).
I would suggest going through your request/response data in Firebug and making sure that your async requests are less than 5K and your responses are no more than 20K.
A slow process on the server which is running when the UpdatePanel is posted. How does your code perform when the UpdatePanel is removed?
JavaScript errors (yours and Microsoft's). Here is a link to a known bug and a fix that I have used myself: http://support.microsoft.com/?kbid=2000262
Massive DOM manipulation (doesn't sound like this is the case for you).
BTW, searching for the error message you reported gives many possible causes:
http://www.google.com/search?aq=f&sourceid=chrome&ie=UTF-8&q=The+state+information+is+invalid+for+this+page+and+might+be+corrupted
As always, minimize or remove dependencies on ViewState...it's the source of many problems and enables poor design decisions.

You need to set update Panel properties update mode to Conditional instead of Always. Limit the number of controls you put into one update panel

You might want to check, Page events etc. Research on page directive and property AutoEventWireup
Since performance is the issue you highlighted, you might want to check that as well. Update panel mode should be conditional.
Check the triggers as well

Try with these properties values inPage directive. This is always at the top of your page. Let other properties be there as they were before. Update panels should not be slow like you are reporting.
<%# Page ViewStateEncryptionMode="Never" EnableViewStateMac="false"
EnableEventValidation="false" %>
I would also like to add that if your database query that you mentioned is complex, is taking a very long time, then the problem lies not with aspx page or update panel, but with your database query. You will then need to profile your query and check how much time it's taking to execute. The way to go in that case would be to fine tune your query at database level.

Related

RadWindowManager, RegisterScriptControl, and multiple controls with same ID issues

We just upgraded our Telerik controls from 2012.3.1308.45 to 2014.1.1403.45. As a result, a page that previously worked, doesn't now.
The initial error is as follows:
Script control 'RadWindowManager1' is not a registered script control. Script controls must be registered using RegisterScriptControl() before calling RegisterScriptDescriptors().
There are a couple of postings on the Telerik site about this. The preferred solution seems to be to set the RegisterWithScriptManager attribute on the control to false.
Doing this, then, makes another error pop up. So, I'm not sure if I'm moving forward or not. The new error is:
Multiple controls with the same ID 'RadWindowManager1_alerttemplate' were found. FindControl requires that controls have unique IDs.
The page has a bunch of Response.Write(...) ASP .NET expressions in the form of: <%=MyControl.ControlID%>. Every one of these expressions causes this error.
At this point, I'm stumped.
There was another posting on the Telerik site that suggested adding a Location element to the web.config for the Telerik.Web.UI.WebResource.axd would solve this. I tried that and it didn't do any good.
I also tried to use the Microsoft ScriptManager rather than the Telerik RadScriptManager, and that doesn't do any good.
I checked my web.config for duplicate entries, and there are none. I don't know what else to do. I'd appreciate any assistance on this issue.
For what it's worth, I've made some progress or dug myself deeper into a hole. I don't know:
Working with the second error, the multiple control issue, I discovered that we had on our page, a couple of controls that I got rid of.
First, I removed:
<telerik:RadCodeBlock runat="server"></telerik:RadCodeBlock>
primarily, this block appeared empty as there was nothing inside of it. Don't know if it's needed or not, but I removed it.
Second, I removed this:
<telerik:RadAjaxPanel ID="gridPanel" runat="server" LoadingPanelID="gridLoadingPanel">
<telerik:RadAjaxLoadingPanel ID="gridLoadingPanel" runat="server" Transparency="5">
<asp:Image ID="Image1" runat="server" AlternateText="Loading..." BorderWidth="0px" ImageUrl="~/App_Themes/Default/Images/Administration/Loading.gif"></asp:Image>
</telerik:RadAjaxLoadingPanel>
which existed, but wasn't being used at all.
When I did that, I got another new and exciting error:
RegisterForEventValidation can only be called during Render();
Using Google, I found out that one solution is to do this:
Add EnableEventValidation="false" to the Page directive.
Override the VerifyRenderingInServerForm in the code behind with nothing in it.
Did that, and now an even more newer and exciting error occurs.
Script control 'nameOfControl' is not a registered script control.
Script controls must be registered using RegisterScriptControl()
before calling RegisterScriptDescriptors().
The control in question is a RadNumericTextBox displayed within a table.
So, either I'm going deeper and deeper into a rabbit hole here, or I'm slowly working through multiple errors. I have no idea which it is.
Searching for this last error isn't giving me anything concrete to work with, though. Any additional help would be appreciated.
Make sure you do not have ClientIDMode set to Static for Telerik controls.
Then, if you use AJAX, wrap server code blocks in a RadCodeBlock tag (some server code blocks)
take away AjaxControlToolkit if you have it, it outputs changed MS AJAX scripts.
Don't use Response.Write() and the like if you use partial postbacks
If neither helps, strip down the page piece by piece to find the problem (e.g., some customization you have in place).
For me it helped to set the RegisterWithScriptManager="true".

JavaScript generated web page issue

I have a problem with javascript generated web page. I have a web page on the internet that is generated by javascript. I am working on changing a web page using wpf web browser control. I have to make some changes to the web page by inserting jquery, and changing css and hiding some elements.
Here is the issue.
Application works ok most of the time, but sometimes, for reasons unknown, it does not change the css or hides the elements. I presume that it has something to do with the javascript that actually generates the page. My code is executed, but no changes are made, so I presume that the script cannot find the elements in the page because they do not exist in the page, at the time of the execution of my scripts. This is just an assumption.
I need help resolving this issue. I have tried delaying the execution of my scripts for n seconds, waiting for body.ready, document.ready and window.ready, but nothing helped. Also, I use wpf web browsers LoadCompleted event, but... From time to time, the script simply makes no effect on the page. Did somebody have this issue, does anyone have any idea how to solve it?
Thank you very much in advance...
When building single page apps, always use a framework like Backbone or Sammy.js together with Mustachejs (or Hogan.js) for templating.
Since we don't have any code to look at, if you're using jQuery, I suggest you check out .live() and .on() for attaching event handlers to elements you plan on loading into a div (making them clickable) etc.

How to display multiple pages under tabs similar to a Browser tab retaining loaded pages

We have an application where we have a single level navigation menu with some heavy-duty pages on each link. The user can switch back and forth between these pages frequently to obtain information that he needs.
Once the page gets generated, it wouldn't change for the session. However, the page is specific to the user, hence we cant cache it.
I was trying to come up with a solution where we generate the page once, and keep it hidden in the background until its link is clicked, but haven't been able to get my head around this.
One of the ways I thought was to have multiple div tags (one for each page) on one page and keep toggling the visibility as the links are pressed, but that would end up making this single page very heavy. Someone also suggested using iFrames, but I am not really comfortable using the iFrames much and I'm not even sure, if it would be any helpful either.
Can you guys please suggest a few approaches to tackle the issue?
update: Just to clarify, we are fine with keeping the pages separate and navigate across using a standard menu bar. We were just looking for ways to optimize the performance as we know that the pages once generated wouldn't change and there should be some way to tap that benefit.
You can use Ajax tab control for this purpose
Try taking a look at this MSDN article which specifically tackles the issue of how to user-level cache. Also, it might be more manageable to break each tab into a user control. That way your ASP.NET page has just the tab control and 1 user control for each section under the tab. It makes managing tabs much easier.
EDIT:
What I would do in your case, since you say the data won't change for the user, is I would grab the static data from the database and then I would store that data in the Session cache. THe session cache is specific per user and you can try to retrieve the static data from there instead of repetitively calling the database.
Check out the ASP Multiview control. Just remember that even though the different views are hidden when not active, their viewstate is still being sent back and forth. Can be a benefit if you need to check control values across views though.

What are the MUSTS for having an asp.Net application to support BACK button of the browser?

Is there any pattern or kind of "least requirements list" to follow for ensuring an asp.NET application to support BACK button of the browser for each aspx page?
thanks
In general, the back button on the browser will take you to the previous HTML GET or POST that occurred. It navigates by page-wide transactions, so anything done dynamically cannot be navigated that way. Also, the back button doesn't rewind code execution, so if you are determining something based off of a Session variable or something similar, that won't be rewound either. Obviously, it won't rewind database transactions either.
In general, if you want to support the back button, you'll need to make sure to divide everything you need to navigate between with said button is divided by an HTML transaction of some sort.
Again, you're going to run into issues if your page display is dependent on server-side control that changes from one post to the next. This is one reason you see some forms feed a 'Page has expired' error when you try to navigate back to them.
Not really... It depends on your application flow.
There are things that make supporting the back button more awkward.
for example using pure ajax to change the majority of the content on the page,
will look like a 'new' page but wont be compatible with the back button (though you can fudge it)
another example is posting back to the same page more than once, as this can make it appear like the back button is not working, and at the same time re-doing your request (and therefore database transactions)
Fundamentally it depends on your application requirements.

jQuery within a Repeater

I'm very new to the world of jQuery and might be asking a fairly trivial question here. I'm curious as to what the community views as the best practice for a databound object with jQuery functionality.
As a specific example, I've currently created a repeater bound to a list of objects. Each object has properties such as "link", "thumbnail", "subtext", etc. This is a small repeater(<10 items at any time). When a user clicks on "link", a separate area of the page updates to reflect that object.
The approaches I've discovered so far involve:
Dynamically creating the necessary jQuery script from the C# codebehind
Creating a JSON service to respond to the link request and return the object to be loaded(an extra possibly unnecessary database hit)
To dynamically create a JS Struct within the C# codebehind (similar struct)
I guess the main reason I have for avoiding a JSON service in this scenario, is that the objects have already been bound once after being returned from the datasource. I'm not sure if another db hit is warranted, but I'm open to any and all suggestions.
Dynamically creating the necessary jQuery script from the C# codebehind might be unecessary as the JQuery code won't have to change. Bear in mind that unobtrusive JS is what jQuery is largely about.
I imagine the single piece of JS would look something like this:
$('.link-class', '#repeater-id').click(function(){
// Get the id of the link or the target using $(this).attr('id')
// Show a page section or call a service using the the discovered ID.
});
You can use the first comment to pull out the data you need to identify the data you wish to display.
The second comment can be either an Ajax call or a div toggle to some other section on your page. If this data is large then I'd be inclined to Ajax it. Otherwise I would keep it on the page and just toggle it on or off.
If you think users would be more inclined to click on several of the links then I would weight the non-ajax option a little more favourably even if the page was a little heavier. Especially if the user might return to a previously clicked link.
Does that make sense? Happy to elaborate further...
I assume this list has some basic details about some items and when you click on one you see some more data about that particular item.
I would definitely pick choices one (dynamic jQuery) or two (JSON service) depending on the size difference of the rendered page. If we're talking a difference in the vicinity of 10kb I would go with dynamic jQuery and just have all the data ready to go. If it's significantly more than that use a JSON service.
There's nothing wrong with an extra DB request and the delays it implies when the user expects it. If someone clicks on a web page item they're going to be fine with any delay less than half a second and perhaps a little over a second if you're nice enough to just say "please wait" to signal that a noticeable delay is normal.

Categories