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.
gridviews
each one has many records – Ungava