Archive for the ‘asp.net’ Category

If you have ever tried working with a TreeView within an UpdatePanel, you would notice that it takes forever to render and on postback the whole application seems to be very sluggish.

The reason this occurs is because the javascript that is emitted by the TreeView does not play well with the Update Panel. This is a known issue, but for some reason is not getting a fix.

One way around this is to disable the scripts emitted by the TreeView control and let the UpdatePanel take care of not causing postbacks via the partial page rendering mechanism. This can be done by setting ‘EnableClientScripts=”false”‘ on the TreeView.

If you have ever tried to perform an action within an iFrame when a window is resized then you would notice that using the “onresize” event of the body element within the iFrame is useless. For some reason, the “onresize” event of the page within the iFrame does not fire when the window itself is resized, so attaching a “onresize” event to the body tag of the page doesn’t work.

So basically this is the structure of your page:


<html>
<head></head>
<body>

<iframe id="myIframe" src="iframepage.html"></iframe>

</body>
</html>

Now you want to capture the “onresize” event of the window in your iframe so you can manipulate your interface or do something when it occurs. On a regular page (which has no iframes), placing this in your ‘body’ tag would help.

However, in your iFrame page, using the following will allow you to capture the ‘onresize’ event.

<script>
self.parent.window.attachEvent(”onresize”, myFunction);
</script>

Place the script tag on your page and it will attach the function to the event.

Most problems with regards to the modalpopupextender not displaying at the center of your page when co-ordinates are not specified arise due to an incorrect DOCTYPE. Usually changing this DOCTYPE will help (as I have pointed out in a previous post of mine). However sometimes it is not possible to change the DOCTYPE as it affects other portions of your page.

In order to fix that you may have to perform a custom build of the AjaxControlToolkit by modifying some of the source.

I’ve tested this out with version 1.0.10920.0 of the AjaxControlToolkit, however I’m sure it works with later versions.

Download the source of the toolkit from codeplex and open the solution using Visual Studio.

The first file you will have to modify is the ‘Common.js’ which is located in ‘AjaxControlToolkit\Common\Common.js’ .

Within this search for the function ‘getClientBounds’. Replace the switch statement with the following one:


switch(Sys.Browser.agent) {
case Sys.Browser.InternetExplorer:
if (document.documentElement && document.documentElement.clientWidth)
clientWidth = document.documentElement.clientWidth;
else if (document.body)
clientWidth = document.body.clientWidth;
//clientWidth = document.documentElement.clientWidth;
if (document.documentElement && document.documentElement.clientHeight)
clientHeight = document.documentElement.clientHeight;
else if (document.body)
clientHeight = document.body.clientHeight;
//clientHeight = document.documentElement.clientHeight;
break;
case Sys.Browser.Safari:
clientWidth = window.innerWidth;
clientHeight = window.innerHeight;
break;
case Sys.Browser.Opera:
clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
break;
default: // Sys.Browser.Firefox, etc.
clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
break;
}

The next set of changes to be made are to the ‘initialize’ function of the ModalPopupExtender which is located in the ‘AjaxControlToolkit\ModalPopupExtender\ModalPopupBehavior.js’ file.

Within the ‘initialize’ function search for


this._backgroundElement.style.position = 'fixed';

and change it to this


this._backgroundElement.style.position = 'absolute';//'fixed';

A few lines below that is another change that has to be made from:


this._foregroundElement.style.position = 'fixed';

to:


this._foregroundElement.style.position = 'absolute';//'fixed';

Once you have made the changes compile the source and you should be able to use your new AjaxControlToolkit.dll in order to resolve most of the centering issues known to occur with the ModalPopupExtender.

Make sure to backup your original files before you attempt this.

If you are attempting to convert your existing Asp.net web application to an AJAX Enabled Asp.net web application, you most probably followed down the path of merging your existing web.config with one that is provided by a new Asp.net AJAX Enabled web application’s web.config.

This worked fine for me until I tried adding a AutoCompleteExtender and needed to declare a method in code behind with the attributes

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]

That’s when I came across the following error:

The type or namespace name ‘ScriptManager’ does not exist in the namespace ‘System.Web.UI’ (are you missing an assembly reference?)

Having merged the web.config files I assumed I should not be getting the error. However, what I had failed to do was merge the .csproj files. Apparently some references are in the .csproj file. Mainly, the reference to the System.Web.Extensions.

Adding a reference to the System.Web.Extensions should fix the problem.

Recently I had to work with the ModalPopupExtender that comes with the AjaxControlToolkit. I’ve worked with it before, but this time it posed a couple of problems (that were caused not because of the toolkit, but rather other things).

Without specifying the “X” and “Y” attributes of the ModalPopUpExtender(MPE) it is supposed to, by default, render at the center of the screen. Sometimes this doesn’t happen. The solution to getting it to render at the center of the screen is adding the following doctype to your page:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Even then, my page didn’t seem to display the popup right. Its only later that I discovered that I was using Response.flush on the page to display a “Loading…” screen. This causes the html used for the “Loading…” screen to be the first thing on the page.

Since the DOCTYPE is now forced down the page, the rest of the page does not render as per the specified DOCTYPE. This causes the MDE to render at some other position on the screen (other than the center).

To fix this, Response.Write and Flush your DOCTYPE tag first, so it becomes the first line on the page.