Multiple UpdatePanels and onload - c#

I have a page that has 2 dynamically loaded user controls each within it's own update panel. On load of the user controls, I execute javascript that updates the css of the table cells.
ScriptManager.RegisterStartupScript(this.Page, typeof(Page), "Load_RunScript()", true);
Both user controls have a button each that causes a postback and on the server side executes JS for making some change. The issue I run into is when I click on the button on one of the user control (Say UCtlA), the postback causes the user controls to be reloaded dynamically which executes the onload script in UCtlB as well causing the page to perform slow.
Since the UCs are in UpdatePanels, my understanding was the UI should not be re-rendered on postbacks. Why is this happening and what is the solution?

UpdatePanels cause a Postback similar to the Page postback. To avoid unnecessary work in Pageload check the ScriptManager.IsInAsyncPostback property to detect the UpdatePanel Postback. Only the controls in the UpdatePanel causing the Postback should update their GUI.

Add the UpdateMode="Conditional" property and possibly ChildrenAsTriggers="false"
http://weblogs.asp.net/alessandro/archive/2008/01/30/reducing-updatepanel-bloat-by-utilizing-updatemode-quot-conditional-quot-and-childrenastriggers-quot-false-quot.aspx
Honestly I would say steer clear of UpdatePanels because they are dogs especially nested UpdatePanels.

Related

Issue with Postback and Custom Validators in asp.net

I need some help on an issue, related with asp.net validators and postback.
The issue is that I have a page say 'p1' and it has a master page 'm1'. In addition to these I also have a usercontrol 'u1'.
Now, the issue is that on master page 'm1', I have a button that initiates a postback. And on my usercontrol 'u1', I have some fields which I need to check/validate and stop the postback if the fields are invalid.
I have tried using customvalidators and forcefully calling Page.Validate() method. But by doing this, I can see the page.IsValid property is false but sill the postback happens. I have even tried to write a return statement if the control fields are invalid but it doesn't helps..
Please note that I do not want to make any changes in the masterpage as this may have high impact on the other pages.
If clicking a button causes postbacks even when the page is invalid (as in your case it is proven with Page.IsValid property is False), then this means the button isn't configured to check for validations on the client side.
Solution 1:
You need to intialize the "CausesValidation" Property of the Button with the value True"
However, this requires changing the markup of the "Button" on the markup. And this isn't something you wish to perform.
Solution 2:
You can from within your page, access the Button of the Master page from within the Load Event and Initialize the CausesValidation property of the button to True.
Have a look at the following link to find the button from within the master page:
https://msdn.microsoft.com/en-us/library/xxwa0ff0.aspx

UpdatePanel and modifying controls outside of the Panel

I have a control inside of an UpdatePanel. The UpdatePanel has an AsyncPostBack trigger associated with the inner control. This works just fine.
I have another control containing a SSRS ReportViewControl that I would like to conditionaly hide based on the results from the postback event of the UpdatePanel mentioned above.
The ReportViewerControl is not inside of an UpdatePanel and I would like to keep it this way. How can I hide the ReportViewerControl based on the postback event of an UpdatePanel inside of another control?
I am assuming that many problems would spring up if I place the ReportViewerControl inside of an UpdatePanel, anyone know for sure?
You could create a script inside you update panel content template and hide your control form javascript.
<script type="text/javascript">
Sys.Application.Add_load(MyFunctionThatHides);
</script
The ReportViewerControl is not inside of an UpdatePanel and I would
like to keep it this way.
I did a simple trick. I created a another Updatepanel and put a literal control side the update panel and this update panel code Is Above the "Control you want to hide"
something like this
<asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Always" >
<ContentTemplate>
<asp:Literal runat="server" ID="literal1"></asp:Literal>
</ContentTemplate>
</asp:UpdatePanel>
Then in Code behind I inject CSS
something like this
literalDvControl.Text = "<style> #YourControlID{ display:none;}</style>";
This seems to be working. Basically literal control is injecting style tag and browser is very quick to react.
but do read about this .
Using <style> tags in the <body> with other HTML
Hide the content through server side code but rather to use javascript (possibly injected by the server through a postback) as suggested by Machinegon.
Have a second UpdatePanel around the other content that you want to hide. (You can't make the current one bigger, but making a second shouldn't cause problems.) Have that second update panel set the same button as the trigger. (You can have a trigger that's outside of the update panel, you just can't update content outside of the update panel.) If the update is conditional (you only sometimes change the content when the button is clicked) then you can set the only trigger for the second panel to be a hidden button which you Click in code from the handler of the first button click.
You can use following code after processing the Async AJAX call on server and just before returning the response to client/browser
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowHideReportViewerJSScript", <JS code to show/hide reportviewer>, true);
I assume you have scriptmanager placed on the ASPX page

AsyncFileUpload, can't refresh page after upload is completed

I have an Ajax AsyncFileUpload on one of my pages (inside a update panel). The control works, however I want the page to reload after the upload is complete. I tried a Response.Redirect in the code behind for the OnUploadedComplete method and a location.reload(true) in the OnClientUploadComplete. Both result in javascript alert of `Server Response Error: 'Unknown Server error'
Do you want to see the response page?` and the page doesn't refresh.
Has anyone been able to do a full page refresh after the upload has completed?
Edit: I mistakenly said the AsyncFileUpload is in a control panel, I meant to say update panel.
Use asp:FileUpload control and register it as postback control with Scriptmanager's RegisterPostBackControl method. Or add postback trigger entry for this FileUpload to Triggers collection of UpdatePanel
This control panel that you told. Is this a UpdatePanel? If it is, you can try an upd.Update(); to refresh the panel.
Becareful, if you have Response on your backside you may be ending your page's life cycle right there. This is just a guess. Check to make sure that your code is even reaching the intended point. Look for things like Response.End which will will prevent anything thereafter from executing.

c# Ajax Lazy Loading

I need to populate 4 GridViews on an aspx page, but I only bind a datatable to one of them on page load. I need to pupulate the other 3 after page load.
does anyone know the best way to do this using ajax ?
Currently I'm using javascript to __doPostBack on a button that pupulates the 3 GridViews but unfortunately this forces a full page load even when using an update panel. I need the page to load, and then populate the GridViews as the datatables are returned.
any suggestions would be much apreciated.
The way you are doing it should work ok, although using jquery to populate a div via the $("#targetDiv").load("contentUrl"); function may be a cleaner way to do it. Anyway, in order to get your current implementation working, there could be a few things you want to look at:
I assume EnablePartialRendering is true on your ScriptManager (always worth checking!).
Make sure the eventTarget for the __dopostback call is set up as an async trigger for your update panels or that it is inside the UpdatePanel if you are only using one UpdatePanel. (See here for details)
Try returning false from the javascript code that executes in the onclick event handler if you have attached this to a button, to make sure the form is not being submitted normally by your browser when you click the button.
If I understand the question properly, you want the data to load after the page is in the browser. If this is the case, then you can fire an event with JavaScript when the page loads on the client.
One method I've used is to put a hidden (with CSS, not any property) button on the page and 'clicking' it with javascript. The event of the button click event will need to be wired in the page's code. Also the button would have to be in an update panel that either contains the grids you want to be bound or has the appropriate triggers to cause them to reload.
You might look at JQuery to get manage when this code gets fired. The $(document).ready(function(){ /* Your code here... */ }); method will fire after the entire DOM is available, which is faster than waiting on the entire page to load (images and so forth).

UpdateProgress with UpdatePanel not showing up in User control when page is loading

Is this typical behavior of the UpdateProgress for an ASP.Net UpdatePanel? I have an update panel with the UpdateProgress control inside of a user control window on a page.
If I then make the page in the background do some loading and click a button in the user control update panel the UpdateProgress does not show up at all. It's like the UpdatePanels refresh request is not even registered until after the actual page is done doing it's business. It's worth noting that it will show up if nothing is happening in the background.
The functionality I want is what you would expect. I want to loader to show up if it has to wait for anything to get it's refresh done when after the button is clicked.
I know I can get this functionality if I just use jquery ajax with a static web method, but you can't have static web methods inside of a user control. I could have it in the page but it really doesn't belong there. A full-blown wcf wouldn't really be worth it in this case either. I'm trying to compromise with an UpdatePanel but these things always seem to cause me some kind of trouble.
Maybe this is just the way it works?
Edit:So I'll clarify a bit what I'm doing.
What's happening is I have a page and all it has on it are some tools on the side and a big map. When the page initially loads it takes some time to load the map. Now if while it's loading I open up the tool (a user control) that has the update panel in question in it and click the button on this user control that should refresh the update panel with new data and show the loading sign (in the updateprogress) then the UpdateProgress loading image does not show up. However, the code run by the button click does run after the page is done loading (as expected) and The UpdateProgress will show up if nothing on the page containing the user control is loading.
I just want the loader to show up while the page is loading.
I thought my problem was that perhaps the map loading is in an update panel and my UpdateProgress was only being associated with the update panel for the user control's update panel. Hence, I would get no loading icon when the map was loading. This is not the case though.
I'm not completely following exactly what you're doing here, but I'm assuming you've taken what's in your user control and verified that it works correctly if placed directly in the page?
As a side note, I'm personally ripping out UpdatePanels and replacing with jQuery replacements due to the significant performance savings in addition to the fact that it's way more time-effective to figuring out jQuery et al. quirks instead of ASP.NET AJAX quirks. To be honest, I wish I could claw back the time I did invest in UpdatePanels/ASP.NET AJAX.
I believe I understand your issue after reading your OP several times. I have run into this situation myself with difficulty getting an UpdateProgress to work on Page_Load. The solution? Don't fire the server-side event initially on Page_Load. Add an AJAX Timer that is inside an UpdatePanel like below:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Timer ID="ajxTmr1" runat="server" Interval="1000" OnTick="ajxTmr1_Tick" />
</ContentTemplate>
</asp:UpdatePanel>
The on the timer tick event, do your server code as required. If you have an Update Progress wired up to the UpdatePanel above, everything should work properly.
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1" Visible="false">
<%--Panel or whatever goes here--%>
</asp:UpdateProgress>

Categories

Resources