I have a question about how ASP.NET AJAX partial rendering actually works. Does it:
1) Renders the whole page on the server, transmits the whole page to the client, the client then merges just the area contained in the update panel.
2) Renders the whole page on the server, transmits and merges just the area contained by the update panel.
3) Renders, transmits and merges just the area contained by the update panel.
Thanks,
AJ
2 is the answer - Partial-Page Rendering Overview:
An asynchronous postback behaves much
like a synchronous postback. All the
server page life-cycle events occur,
and view state and form data are
preserved. However, in the rendering
phase, only the contents of the
UpdatePanel control are sent to the
browser. The rest of the page remains
unchanged.
It depends on which method you use. If you use an UpdatePanel then it is almost like a full postback, the page goes through its entire lifecycle and then just the content of the UpdatePanel is sent back to the browser. You could also use something like PageMethods to only send the data that your method needs, and have that method return the new html that you can then place in the page (most likely in some div). This is much more efficent, but takes a little more time to setup. Check out this link for a comparison of UpdatePanel versus PageMethods and how to implement each.
Related
I would like to take one decision based on the question described. I had already used PageMethods in clientside code. If it triggers postback then I wanted to replace it with ajax call from client side. Can anybody clarify it?
A web method of the given page when called by a ajax call client side does NOT cause a post-back. But, keep in mind that such web methods can't referance any control on the page, nor can you use ViewState. You can use session() in a web method.
Often, in some cases, you can then adopt a update panel, and put the controls in that update panel, and thus when you click a button, or any event code from a control?
Then you don't get nor see a full page post-back. So often, a update paneal is a great way to prevent and not have full page post back. But, do keep in mind that a update panel DOES cause a partial page post-back, and even your page load event fires again.
But, a web method? No page post back occures. You often require this since a jQuery.UI pop dialog can disply things, but if that dialog needs server side code, then you can't have a post-back (since then the dialog will collapse, since you getting a new fresh re-rendered page. And even using a up-date panel will also collapse a dialog.
however, if you don't have some pop dialog showing? Then it MUCH less work and effort to just use a update panel, and not bother with all the work to wire up a ajax call to a web method.
So, in most cases I don't make the time + effort to build a ajax call.
So, look into a update panel first - often less work.
But, if you just need some value from the server, don't want a post-back, and don't want (or can't use a update-panel), then a web method is great choice. (since no post-back occurs). The big down side of a web method is no use of controls or anything from the web page can be used in that ajax call to the web method (so, you have to have the data you need client side, or pass some value(s) to the server side web method.
A pagemethod also does not cause a post-back.
I have a listview with 250 rows and 4 columns in my ASP.Net 4.0/C# application. The Rendered page size (from Trace) is 650,000 Bytes. The entire listview is in an update panel.
The listview facilitates view/add/edit/delete operations on the listview records.
Every POSTBACK action (i.e. edit click, delete click) causes a POSTBACK request of size 112,000 Bytes and an AJAX Response of ~650,000 Bytes.
The listview gets the data from a declarative data source (SQLDataSource) on the page. And the listview is bound on each round trip.
I want to reduce the data going back and forth in every call because on a slow connection, these AJAX calls take 2-3 minutes to complete.
What I have tried -
Removed the update panel over the entire listview and added an update panel over each:
ItemTemplate contents
AlternateItem Template contents
Edit Template contents
Insert Template contents
I was hoping that with the template in each row, it would reduce the size of the AJAX response since only the HTML for the update panel would come back. Unfortunately, it does not seem to work that way.
Any inputs on how the problem in my case can be solved?
Thanks in advance for looking this up.
The problem with an UpdatePanel is that you are not using real AJAX. Instead ASP.NET uses some really clever hacks to create the illusion of a partial page update. On the background, your whole page life cycle is executed. This also means that your complete ViewState is send back and forth.
If you want a faster experience, you should not use UpdatePanels. Instead, use plain HTML controls (preferably not even server controls) and use JavaScript and a server side webservice (such as WebAPI or a WCF service) to respond to the client side requests.
Those requests and response will only contain some JSON data and no markup. Your data can be kept to a minimum. If for example, a user removes a row, you only have to send the Id of the row to your service and it will return success or failure. The client will use JavaScript and maybe something like KnockoutJS to render the result. This will give you minimal overhead and a better performance.
The best possible way to do this is to not use the ASP.NET user controls and instead do this cleanly using JavaScript, JSON, HTML and a server side web service/http handler
That way you don't have to send large HTML responses from the server to client. You can also control when need to refresh and rebind your data.
I bet the whole size issue has to do ViewState. The reason being that on every postback, even if it's an AJAX postback the ViewState travels with it on every request. The only thing you can do, without making any changes, is to enable compression on the IIS side. This, at least, will send the response compressed and the browser will take care of decompressing it.
The best approach is not to use UpdatePanel and ScriptManagers at all and instead make AJAX requests using jQuery (or whatever framework you prefer) by invoking a WCF Web service. This will not trigger the full page lifecycle and will not send the ViewState on every request.
suppose i have many heavy control is on the page. as for example i have three gridview populated on the page and one gridview & button is inside the updatepanel. from this scenario we can understand that there will be huge viewstate on the page. so i want to know that if i click on button inside the updatepanel then all the viewstate will be submitted to server during partial postback or not. if huge viewstate submit to server and comes back to client then what is the advantage of partial postback because response time will be slower. so tell me how could i tune up the code that only required things will only submit to server. discuss the partial postback concept in detail as a result we can take right action to have good performance. thanks.
+1 to geek!
If you are concerned about the performance of your page(s), I would also recommend using ListView instead of GridView:
https://web.archive.org/web/20211020153238/https://www.4guysfromrolla.com/articles/122607-1.aspx
http://weblogs.asp.net/scottgu/archive/2007/08/10/the-asp-listview-control-part-1-building-a-product-listing-page-with-clean-css-ui.aspx
http://basgun.wordpress.com/2007/12/27/listview-control-in-aspnet-35-1/
http://basgun.wordpress.com/2007/12/28/listview-control-in-aspnet-35-2/
http://basgun.wordpress.com/2007/12/29/listview-control-in-aspnet-35-3/
http://basgun.wordpress.com/2007/12/30/listview-control-in-aspnet-35-4/
You can also visit Matt Berseth's blog to see how ListView can get very handy (and neat) for different types of development scenarios:
http://mattberseth.com/blog/listview/
it's important to keep in mind that an UpdatePanel's partial postback invokes a full page life-cycle on every single async request.
Please check out following links for pros and cons of the update panel.
Why ASP.NET AJAX UpdatePanels are dangerous
Why you should not place your whole site in an UpdatePanel
Are you making these 3 common ASP.NET AJAX mistakes?
so i want to know that if i click on button inside the updatepanel then all the viewstate will be submitted to server during partial postback or not
Yes, it will. The entire page's view state is transmitted (in its entirety) to the server on partial page postback, and the new view state is sent back (in its entirety) from the server back to the client on response.
I'd suggest you use a tool like Fiddler to examine the HTTP traffic between the browser and your server when making a partial page postback. This article provides an overview of using Fiddler - Troubleshooting Website Problems by Examining the HTTP Traffic.
In short, the UpdatePanel is meant as a quick and dirty way to get partial page postbacks without having to worry about client-side script or writing logic on the server to specifically handle a partial page postback. Such simplicity comes at a cost, as you've discovered. :-)
For more control over the content that is sent to and from the server on a partial page postback you need to write client-side script and create server-side methods or services to handle the Ajax requests. These articles offer various techniques for providing such functionality:
Accessing JSON Data From an ASP.NET Page Using jQuery
Using Ajax Web Services, Script References, and jQuery
Using WCF Services with jQuery and the ASP.NET Ajax Library
I'm retro-fitting a .aspx page with AJAX functionality (using VB, not C#). The codebehind populates the page with data pulled from a web-service. The page has two panels that are populted (with different data, of course) in this way. On a full page refresh, one or both panels might need to be populated. But populating Panel 2 can take a long time, and I need to be able to update panel 1 without refreshing Panel 2. Hence the need for AJAX (right?)
The solution I've come up with still has the old .aspx page with .aspx.vb codebehind, but introduces a Generic Handler (.ashx) page into the mix. Those first two components do the work on the user's first visit or on a full page refresh, but when AJAX is invoked, the request is handled by the .ashx page.
First question: Is this sound architecture? I haven't found a situation online quite like mine. Originally, I wanted to make the .aspx page into the AJAX handler by having the codebehind implement IHttpRequest, and then providing "ProcessRequest" and "IsReusable" methods, but I found I couldn't separate a regular visit to the page from an AJAX request, so my AJAX handlers took over even on the first visit to the page. Second question: Am I right to think that this approach (making the .aspx page do double-duty as the AJAX handler) will never work? Is it impossible to tell whether we're getting a full-page request or a partial-page (AJAX) request?
If the architecture is good, then I need to dynamically generate a lot of HTML in the .ashx file, right? If that is right, should I send HTML back to the client, or should I encode it in some way? I've heard of JSON encryption, but haven't figured out how to use it yet. So, Third question: Is "context.Response.Write" the only pipeline for sending data back to the client? And, if so, should I send back HTML or some kind of JSON-encoded objects?
Thanks in advance.
It sounds as if the page requires some AJAX functionality added to the UI.
Suggest using an UpdatePanel for each web form element that needs to have AJAXy refresh
functionality. That'll save you from having to refactor a bunch of code, and introduce a whole lot of HTML creation on your .ashx.
It'll be more maintainable over the long run, and require a shorter development cycle.
As pointed out by others, UpdatePanel would be a easier way - but you need to use multiple update panels with UpdateMode property set as conditional. Then you can trigger the update-panel refresh using any button on the page (see AsyncPostBackTrigger) or even using java-script (see this & this). On the server side, you may decide what has triggered the partial post-back and act accordingly by bypassing certain code if not needed.
You can also go with your approach - trick here is to capture the page output using HttpServerUtility.Execute in your ashx and write it back into the response (see this article where this trick has been used to capture user control output). Only limitation with this approach is that you can only simulate GET requests to your page and so you may have to change your page to accept parameters via query string. Personally, I will suggest that you create a user control that accept parameters via method/properties and will generate necessary output and then use the control on your page and in ashx (by dynmaically loading it in a temperory page - see this article).
EDIT: I am using jquery to illustrate how to do it from grid-row-view.
$(document).ready(function() {
$("tr.ajax-grid-row").click(function() {
$("#hidden-field-id").val($(this).find(".row-id").val()); // fill hidden filed
$("#hidden-button-id").click(); // simulate button click
});
});
You can place above script in the head element in markup - it is assuming that you have decorated each grid-row-view with css class "ajax-grid-row" and each row will have hidden field decorated with css class "row-id" to store row identifier or the value that you want to pass to server for that row. You can also use cell (but then you need to use innerHTML to get the value per row). "hidden-field-id" and "hidden-button-id" are client ids for hidden field and submit button - you should use Control.ClientID to get actual control ids if those are server controls.
JSON is not for that purpose, it is to pass objects serialized with a nice light weight notation, is you need to stream dinamically generated html using ashx, response.Write is what you have. You may want to take a look at MVC
Or you could use jquery if it's just html, the simpliest would be the load function, or you can look into Ajax with jquery. Since the ashx can be served as any resource it can be used in the load function.
I agree with #p.campbell and #R0MANARMY here. UpdatePanel could be the easiest approach here.
But then like me, if you don't want to go the UpdatePanel route, I don't see anything wrong with your approach. However, generating the html dynamically (entirely) at the back end is not a route I'll personally prefer (for the maintainence reasons). I'd rather prefer implementing a solution that will keep the design separate from the data.
Is it possible to do asynchronous post-back without any page rendering (even no partial rendering as it done with AJAX update-panel)?
I need it to be completely transparent to the user.
Update:
The page contains nested repeaters, with buttons inside repeater's itemtemplate.
When buttons are clicked there is a partial-rendering.
I don't want this.
I'm not quite sure what you mean. If the presentation layer does not contain any content that will be affected by the purpose of the AJAX request, then you won't have any page rendering, full or partial.
You can assess the AJAX response using Firebug or Fiddler2 to name a couple of tools.
EDIT
In response to your comment,
Set ChildrenAsTriggers = false on the <asp:UpdatePanel ...> if you don't want the content to be re-rendered in response to a child control initiating a partial postback. It is set to true by default.
You can set ChildrenAsTriggers = false and then explicitly set an <asp:AsyncPostBackTrigger> in the <Triggers> section of the UpdatePanel for those children and their event(s) that you do want the content of the UpdatePanel to be re-rendered for.
You could do the regular AJAX-dance, and just direct it to a separate handler for doing what you want, without any rendering. Could that work for your scenario? If not, can you elaborate on what you want to acheive?
Yes. I am assuming you are talking about ASP.Net, as you mentioned an update panel.
ASP.Net AJAX will automatically expose web methods on a page and allow you to call those completely on the client. Try this page for more info on exposing web services to client side AJAX.