Blog

ASP.NET AJAX / UpdatePanel “Not Working” – Common Problems

September 23, 2007 by Damien White

“ASP.NET AJAX / UpdatePanel aren’t working…” – this is probably the number one complaint/question found on the ASP.NET AJAX Forums. I decided it would probably be a good idea to discuss some of the common issues I’ve seen:

  1. xhtmlConformance – This is a common gotcha as described in detail on Scott Guthrie’s blog. will not work with ASP.NET AJAX. The thing that people often miss with this is sometimes this is set in the server’s machine.config. You can override this setting in your particular application, see MSDN for details. Note, if you aren’t having an issue, there isn’t really a need to set this. However, the settings you want for ASP.NET AJAX are either:
  • <xhtmlConformance mode="Transitional" />
  • <xhtmlConformance mode="Strict" />
  1. Installing ASP.NET AJAX – Users often don’t install the ASP.NET AJAX Extensions which is an easy problem to fix. The first thing to check out is the ASP.NET AJAX docs: Installing ASP.NET AJAX. You can download the Extensions on the AJAX Download Page. Remember, these Extensions need to be installed on your web server as well as your development machine. Also, if you are using Visual Studio 2005, you need to have Visual Studio 2005 SP1 installed. SP1 installs the components needed to begin developing with ASP.NET AJAX (such as the UpdatePanel, ScriptManager, etc). Check out the Web Dev Tools blog for the web specific changes in Visual Studio SP1. Note that SP1 is a BIG install; it takes quite a while to install. One other thing to note here, some users are still using the old, pre-release, Atlas UpdatePanel and ScriptManager. It is highly recommended that you upgrade these to at least version 1.0.

  2. Configuring AJAX – Another common issue is attempting to use AJAX goodness on an old, “non-ASP.NET AJAX” site. Basically, unless you create an ASP.NET AJAX Web Site using the new template that Visual Studio SP1 adds (ASP.NET AJAX Enabled Web Application), AJAX will not work without some configuration on your part. All that needs to be done is to modify your web.config file with the specific ASP.NET AJAX settings. Refer to the ASP.NET AJAX docs for more information, specifically Configuring ASP.NET AJAX. If you are having issues with configuring your web.config (for example, this post), my recommendation is to create a new “ASP.NET AJAX Enabled Web Application”, copy the web config and make the specific changes to that copy that you need for your particular site. Then use this web.config in your old site…

  3. Controls Not Compatible w/ UpdatePanel – another very common problem is with controls not operating as expected within the UpdatePanel. Looking at the UpdatePanel Control Overview in the docs, have a look at the section titled “Controls that Are Not Compatible with UpdatePanel Controls”. The most common issue with controls seems to be the Validators. Looking at the docs, you can “fix” the validators by simply setting the EnableClientScript property to “false”. Also there are ASP.NET AJAX compatible validators in the in the works, see Matt Gibbs blog for more information on this.

Well, while this isn’t a complete list of problems that you may find, hopefully it sums up about 90% of them out there. In addition to these issues, I know users have problems with UpdatePanel Triggers, User Controls in UpdatePanels, and UpdatePanels in MasterPages. It’s a good idea to read through the ASP.NET AJAX docs to become familiar with the controls. Also, check out the AJAX Videos which discuss usage of not only the UpdatePanel but also the AJAX Control Toolkit.

HTML Parsing – HTML Agility Pack

September 20, 2007 by Damien White

I’ve seen some posts of users asking about parsing HTML in .NET. Lots of people use RegEx which is OK, but wouldn’t it be nice to use XPath. Problem with this is that most sites have mangled HTML not even close to XHTML which is needed to utilize XML tools. It peaked my interest, so I decided to look a bit further.

I came across Chirs Fulstow’s Blog and he discussed the HTML Agility Pack. It’s been around for quite a while and while I haven’t tried it out first hand yet, it sounds great. You can get the latest version of the HTML Agility Pack on CodePlex: http://www.codeplex.com/htmlagilitypack.

Hopefully this will help out those users trying to parse HTML out there…

Theme Error when Themes are disabled?

September 12, 2007 by Damien White

I received an interesting error today when I tried to create a WebForm which didn’t have any content on it.

Using themed css files requires a header control on the page. (e.g. <head runat=”server” />).

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidOperationException: Using themed css files requires a header control on the page. (e.g. <head runat=”server” />).

Fair enough, I do have a Theme set in my Web.Config, so on to disable themes for the page, a la:

<%@ Page Language=C#” EnableTheming=false  %>

Run the page again, same error. What gives? Then I ran across Rick Strahl’s WebLog (specifically this: http://www.west-wind.com/WebLog/posts/4662.aspx).

The fix I ended up using was:

<%@ Page Language=C#” EnableTheming=false Theme=""  %>

A bit strange the disabling theming doesn’t take care of this.

Modal UpdateProgress for UpdatePanel

September 10, 2007 by Damien White

If you are interested in this topic, you should check out the new post: “Modal UpdateProgress for UpdatePanel - Revisited” on this topic. The solution in this post had some issues that have been corrected in the new post.

Mobile Wait

I’ve seen a lot of requests on the ASP.NET forums for ways to display disable an UpdatePanel during an update. I’ve seen quite a few complex techniques to achieve this, but by using standard controls you can create a nice looking modal progress indicator. Using the UpdateProgress control, there is an easy way to make the progress indicator modal with little code and a bit of CSS.

First, let’s start with the code:

<asp:updateprogress associatedupdatepanelid="UPDATEPANELID" id="updateProgress" runat="server">
    <progresstemplate>
        <div id="progressBackgroundFilter"></div>
        <div id="processMessage"> Loading…<br /><br /><img alt="Loading" src="images/ajax-loader.gif" /></div>
   </progresstemplate>
</asp:updateprogress>

Pretty simple code… basically the only “custom code” are the two DIVs. The first, progressBackgroundFilter is used to blank out the page. The second is the message to display. In this case, it’s just text and an animated gif.

The rest of the code is just CSS. In this example, I am using the id selector approach of CSS to add the styles to the DIVs but you can of course changed these to class names.

#progressBackgroundFilter {
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  overflow:hidden;
  padding:;
  margin:;
  background-color:#000;
  filter:alpha(opacity=50);
  opacity:0.5;
  z-index:1000;
}

#processMessage {
  position:absolute;
  top:30%;
  left:43%;
  padding:10px;
  width:14%;
  z-index:1001;
  background-color:#fff;
}

The progressBackgroundFilter is what blanks out the screen. This operates like standard modal code by simply overlaying a DIV on top of the content using absolute positioning. The z-index is what sets it to be over the content; this number can be anything, but I set it to 1000 so it would be much higher than any other absolutely positioned object. The filter is used to set the transparency in IE while the opacity is for FireFox; both set the transparency to half. Finally, the processMessage styles position a div above the background filter (z-index is set to 1001). The top, left and width are set to percentages to horizontally center the box and the top is arbitrarily placed 30% from the top.

KNOWN ISSUES:

This technique was tested with IE 7 and FireFox. This technique works well when your page doesn’t scroll, but has a few problems when there is a scrollbar involved. The problem is with position: absolute, it can’t seem to figure out bottom: 0px when you scroll. One way around this is to use postion: fixed instead, but this has problems in IE6. Even with this, there is no way to overlay the browser’s scrollbar. The only real option is to use JavaScript to position the background and message, such as subModal

Even this doesn’t blank out the browser’s scrollbars though. The best condition for making modal items work easily is using a separate container DIV and hiding the browser’s scrollbar. One of my favorite layouts is Stu Nicholls’ approach to a fixed layout: (also see the rest of his website for some real awesome CSS fun). With this approach, the overlay can block out the scrollbars as well.

Welcome!

September 09, 2007 by Damien White

Welcome to the Visoft, Inc. Blogs.

Visoft, Inc. is a multi-faceted software development company handling all aspects of development from planning to implementation. You can visit our homepage @ http://www.visoftinc.com. This area of our website however is devoted to discussing software development. Most topics you will find here are focused on the Microsoft .NET Framework. Visoft has a long history with .NET development. From the earliest beta releases back in 2000, developers at Visoft have been professionally developing with the Framework. With both ASP.NET (Web) and WinForm (Windows) development under our belt you will find a wealth of info on .NET. We also pride ourselves on keeping current on the latest technological breakthroughs. Our developers are on the cutting edge of software development and strive to be experts in the field… If you have any suggestions for topics, please let us know.