Latest Posts:

Tips from the trenches: Better ASP .net AJAX enabled sites

Entry Date: Jan 2008

keywords: ASP .net; AJAX ASP .net; GridView; Validation; Performance; Session; Viewstate; Hosting; .net framework 3.0; Java Script; JSON; Web Services; Networking; HTML; DHTML; DOM; UpdatePanel; Partial Rendering; ScriptManager;

Short Description:

This post tries to save you some late night pizzas and coffees by showing a bunch of tips learned in real life projects (2 AM in the morning, red eyes, …).

Entry:

When a new technology comes to the market, we, developers, tend to learn "best practices" and "avoiding pitfalls" just by hitting our head into a wall… good geeks (like me :-)) are anxious to play with new stuff and they are tempted to say to his manager/boss/customer things like… "Your application will run twice faster", "We will deliver it in half the time needed"… and forget things like a new technology it’s always a challenge, there is a learning curve… The same technology has been used in most major databases, especially online casinos. Because they have large databases of information they need to keep tidy. Nothing else really comes close for a safe and secure gaming experience. While you're here you might as well check out the site to see how the algorithm works and maybe play a few games.

This post tries to save you some late night pizzas and coffees by showing a bunch of tips learned in real life projects (2 AM in the morning, red eyes, …).

Let’s start with the tips enumeration:

--> Do not trust localhost: having a remote development test server from day one is a must, ideally it should be a similar environment as the one you are going to have in production, if not possible just hire a cheap ASP .net hosting and protect it using a user and password (perform daily builds on that server and check the user experience).
--> Updatepanel is not the evil… but is not a silver bullet as well.
--> Use Updatepanel for operations where the user expects a delay, e.g. refreshing/filtering a gridview. Do not use it for things like: performing a validation, calling some server side code when a dropdown list changes the selection, or a radiobutton / checkbox (things that users expect real time response).
--> Script services (web service calls via AJAX libraries) plus DHTML update, is the way to go, but… it can become in some cases quite difficult and hard to implement, you have to put in a balance, the benefits that you obtain (usability, speed gain over performing the same task using partial rendering), and the budget / timeline / skilled resources that your project has available. You can easily use script services to perform server side validation without doing a postback, or just update some readonly data (place a div, send a request to a web service, it will return you a piece HTML, replace the inner HTML of the DIV with the response from the webservice).
--> By default all UpdatePanels are updated in every partial post: Configure the updateMode attribute to Conditional and only update the panels that need to be updated in every call (calling MyPanel.Update in the server code).more info
--> Keep Update Panels as small as possible: Every time script manager sends a request all the viewstate is sent (the request has the same size than a normal post), but the response that you get back depends on the size of the updatepanel to update, for medium / complex pages don’t use a single UpdatePanel for the whole page.
--> You can refresh more than one panel in a call: You don’t need to adjust your layout to the UpdatePanel layout… you can have an update panel in the upper corner (let’s name it upperPanel) of your page, and another one in the lower part of your page (let’s name it lowerPanel), once one request to update a given panel is launch, you detect in your server side code that one or both of that panels needs to be updated you only have to call:
upperPanel.Update()
lowerPanel.Update()
--> Page request manager is a singleton: This means that only one request can be processed at the same time, imagine that we have a page with two buttons enclosed in an update panel (buttonA updates textbox txA, buttonB updates textbox txB), if the user clicks on buttonA and meanwhile the request is sent to the server, the user clicks on ButtonB, the first request will be canceled and we will only see textbox txB updated. Normally you don’t notice of this issue, because you rely on controls status (if the request is canceled, the new request will hold the data in some HTML control), but depends on the logic of your page, take it into consideration, two workarounds are: use script services and update your page using DTHML, disable the UI meanwhile the request is sent and processed (or at least the controls that can trigger a request to the server).
--> Web services that you are going to consume in your AJAX enable sites are "special": When you use script services, you just call some "special" web services that are only going to be consumed by your site, … in order to speed up performance, and make easier the development, do not use XML SOAP, use JSON (you only have to add the "scriptable" attribute to your web service, and the AJAX library does almost all the serialization job for you). Another interesting point is that normally web services are stateless, but in this case, it’s a good idea to enable the session state for your web services (you can share the session objects with your ASP .net application, using this approach your web services can share a lot of data and functionality with your site, e.g. which user is logged in, without having a lot of headaches WSE, …), more info
--> Viewstate can be a performance killer: Remember that using partial rendering (UpdatePanel…), the ViewState travels on each request, if your page has a huge viewstate that can be a performance killer, try to disable the ViewState control by control (the most critical use to be GridView). Having a ViewState that weights 1 Mb it’s a big issue (another trick to reduce the size of a given page is to keep the ID's of the naming containers short, they are repeated and concatenated on every single control).
--> Standard Asp .net 2.0 validators does not behave 100 % well using Partial Rendering (UpdatePanel): Scott Guthrie has published a workaround for this, you only have to download a DLL and change some entries in your web.config and get it working back, more info
--> AJAX toolkit it’s a great help but check if the controls fits your needs: AJAX toolkit has some great controls that will save you tons of coding and time, things like: AutocompleteExtender, ModalPopup, Accordions, Cascading dropdowns, … but not always they will fit 100 % to the functionality you have to implement, and modifying it’s behavior is not straight forward, before promising anything to your customer just make a proof of concept test.
--> Before using any nice MVP, MVC pattern or Web Client Software Factory: check how it fits with AJAX and Partial Rendering, for instance, some implementation does not support UpdatePanels.
--> AutcompleteExtender control: is an excellent approach to avoid having combo’s with thousands of items (and it retrieves the data via script services, performs like a rocket).
--> Do not think on using AJAX for everything: sometimes thinking in AJAX mode, make us forget that some functionality can be just resolved 100 % in client side using some javascript (e.g. loading small sets of values in combos depending on some checks). Pure client javascript solutions normally are fasters than AJAX solutions (no roundtrip to the server).
--> You can access script manager from a child page or user control: You can define the scriptmanager in your master page, and then access them from any child page or user control just by using: ScriptManagerProxy in the ASPX, or ScriptManager.Getcurrent(this.Page) in the code behind, by using this you can do things like including javascript files from an user control.
--> A button inside an UpdatePanel can perform a full postback if needed: No need to adjust the updatepanel layout, you can force a full postback in a given button by calling in your pageload ScriptManager.RegisterAsyncPostBack(yourControlID), more info
--> How to make work RegisterStartupScript to execute javascript code just when a page is loaded: You have to use a very similar method but from your scriptManager, scriptManager.RegisterStartupScript.
--> There are javascript events available to detect when a partial post response has been received, or when there has been errors or even you can cancel the current request. It’s easy to do things like make a panel flash when an update has been received, more info

You can find a selection of AJAX ASP .net articles here

Page (1) Of 1