updatepanel vs page methods
Asked Answered
U

4

6

I use update panels all the time when i wanna to update specific part of my page but recently i face performance problems ( i mean it 's slow in rendering the intended control and sometimes it doesn't work and need multiple click to work !!

so my question is :

  • Is the page method could be considered as an efficient alternative to the update panel and do the ajax magic ?
  • What are the other alternatives?

please if possible a simple example to clarify how to replace the update panel using with page methods ?

Ungava answered 4/3, 2012 at 13:22 Comment(3)
How many controls do you have in your specific problem page? Is that any databound control? if so, how many records are binded to it?Granicus
Like three gridviews each one has many recordsUngava
Keep in mind that rendering HTML as an ajax response isn't always a performance killer. Having prerendered HTML takes a lot of the burden off of the client to create and bind data to a view. Look no further than Twitter who recently started rendering a lot of their HTML on the server in order to improve client side user experience: engineering.twitter.com/2012/05/… "Misty
P
16

I used to be like you some years ago, I used to use UpdatePanel to gain performance, to have the wrong idea I was increasing the performance of my applications...

Well I was totally wrong, UpdatePanel is the root of all UI-evil, first of all it hides the complexity of using AJAX which makes it easy for most of us, giving us the wrong idea that we are creating responsive applications, which is worst than if we weren't using it at all (that's the main reason I used to use it in all my pages, and I am sure that's the reason why many developers use it... 'cos it's easy).

Consider the following articles:

When you understand what the UpdatePanel really does against a simple call to a PageMethod or a REST WCF Service, you will see the huge difference between them.

  • UpdatePanel. When you perform a post from an UpdatePanel, the whole page life-cycle has to be executed, this means, it requires to send all the page ViewState on each post, when your page grows in complexity with several controls, the ViewState will certainly be huge and this will certainly be a performance issue. Using them you only gain partial rendering, the controls inside your UpdatePanel will be rendered without a full post back although you need to send the whole ViewState on each request.

  • PageMethod. Page methods are static, they are called like if they were a service method, they do not need to create the whole page life-cycle in order to be executed, therefore, they execute faster.

So it would seem that using PageMethods would be the solution, the problem is that PageMethods are usually used to return JSON objects which means, that you will have to render these objects manually. This means that if you want to get rid-off all your UpdatePanel you will have to change the controls used in your views, you won't be able to use the GridView out-of-the-box for example, instead you would have to change it for the JQGrid (or similars).

This is natural if you are creating a MVC application, but with traditional ASP.Net this is not straightforward.

You also need to consider something very important, the ViewState is validated by default on each post, you can turn it off, but it is not recommended if you want to be sure your ViewState has not been corrupted (take a look at this question).

Consider this example, you have two DropDownList controls, (named: ddl1, ddl2) ddl2 depends on ddl1 so using the SelectedIndexChanged event you fill the second drop down list. But if you attempt to do the same using AJAX calls (without an UpdatePanel), you will face two problems

  • Rendering, you need to manually add objects to the HTML select control representing the DropDownList. You could use a third party framework to bind these controls using javascript, I can recommend you knockoutjs (it's awesome)

  • This is the problem. After you have changed the content of the second DropDownList using javascript, you cannot do a simple post to your page because the ViewState will not be valid, and you will see the following exception:

Invalid postback or callback argument.

The workaround is to specify which values will be valid in the server side, in order to do that you need to override the page Render method and specify each one of the values of the second drop down list, but this will increase the page size and obviously, this is not a good option

Take a look:

So as a summary, if you want to get rid-off all your UpdatePanel controls, you will need to replace the existing server controls for javascript-friendly controls. Also remmeber that if you do that, instead of relying on the page post mechanism, you would have to use AJAX to perform operations on the server, otherwise, you will get the Invalid postback or callback argument. exception. In other words it would be better to consider moving to a MVC application if possible.

Pyrotechnics answered 2/7, 2012 at 19:15 Comment(2)
This 's great and and i conclude that the MVC is the answer .but i wanna to ask if microsoft intend to fix these problems in the later versions of their frameworks ,i mean they know all these problems sure.Can i expect a new version of update panel which can fix these problems ? and what about ajax package of telerik controls ?Ungava
Well actually Microsoft solved the issues creating MVC. About the traditional ASP.Net, I do not think they are going to change it radically, they will maintain it because there are thousands of ASP.Net applications to maintain, but I believe the real effort will be put in creating new MVC features.Pyrotechnics
P
2

There is an alternative to UpdatePanels, but still using PageMethods. It is a combination between jQuery and jQuery templates. It is proven to be faster than the UpdatePanels. Further reading on the resource below, where you can find more articles dedicated to this topic.

http://encosia.com/use-jquery-and-aspnet-ajax-to-build-a-client-side-repeater/

Paphos answered 4/3, 2012 at 15:26 Comment(2)
jQuery templates is deprecated. A nice alternative is the logicless templates available in Handlebars.js. Handlebars templates are fully compatible with mustache, a popular templating library ported to many different languages and frameworks.Misty
Also, maybe jsRender, Next-generation jQuery TemplatesAcerbic
A
2

You might read about the coming WebAPI in .NET 4.5. It's for WebForms as well as MVC and may be a viable solution to your problem if you can wait on 4.5.

Just use it in combination with any jQuery template engine.

http://weblogs.asp.net/scottgu/archive/2012/02/23/asp-net-web-api-part-1.aspx

Appraise answered 29/6, 2012 at 2:2 Comment(0)
A
1

Have a look at http://uframe.codeplex.com/

Agra answered 28/6, 2012 at 13:29 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.