A sneak peak at ASP.NET AJAX 4.0′s client-side templating

AJAX, ASP.NET, JavaScript, UI By . Updated October 15, 2008

Hot on the heels of the recent ASP.NET AJAX roadmap, Bertrand and team have released a limited preview of the new AJAX functionality coming in ASP.NET 4.0.

To see how the new functionality stacks up, I decided to recreate my recent jTemplates example, using only ASP.NET AJAX and its new templating features. Eventually, I settled on using the DataView class, which offers more advanced, repeater-like functionality.

Having successfully completed the exercise, I thought it seemed like something that you might find interesting too. The solution boils down to four easy steps:

  • Creating a page method to return JSON data.
  • Setting up a ScriptManager to coordinate script and page method access.
  • Defining the client-side template that will render the JSON data.
  • Using JavaScript to render the template, using the page method’s return.

Click here to read the rest of this post »

PostBack Ritalin Updated (v0.10)

AJAX, ASP.NET, PostBack Ritalin, UI By . Updated July 1, 2008

After a long beta period, PostBack Ritalin v0.10 is finally ready for release. This is absolutely the best version yet. Many edge case issues have been resolved, and the code is leaner and more efficient than ever before.

Changes include:

  • Complete rewrite of the JavaScript component of the control. Instead of global variables and functions, PostBack Ritalin is now a proper JavaScript object. This significantly minimizes its namespace impact on the DOM.
  • JavaScript embed is now minified.
  • By popular demand, added support for disabling LinkButtons.
  • Added optional image pre-loading for WaitImages. Previously, disabled ImageButtons could take a bit too long to show their disabled image the first time, due to HTTP delay. Enabling pre-loading will cause the browser to pre-fetch and cache the disabled images, resulting in instant feedback for the disabled state.
  • Several bug fixes, thanks to your invaluable feedback.

I’m especially happy with the JavaScript rewrite. Using the object oriented approach on the client side, I’ve added the beginnings of a client-side API similar to the AJAX Toolkit controls (get_property, set_property, etc). Currently, this won’t be of much use to you, but I’ll be expanding and documenting the client-side API in future versions.

The one feature that I wasn’t able to add yet is support for disabling all buttons on the page or within the triggering container. Considering the sweeping changes to the entire client-side portion of the control, I decided to avoid adding significantly more complexity to it in the same release.

I haven’t forgotten about it though, and will add the feature soon.

As always, the free download is available on the PostBack Ritalin project page.

Use jQuery and ASP.NET AJAX to build a client side Repeater

AJAX, ASP.NET, JavaScript, jQuery, UI By . Updated January 29, 2009

There was some interesting discussion on Matt Berseth‘s blog recently, regarding methods for building and displaying markup on the client side. Though I haven’t posted any examples here before, rendering markup on the client is a technique that I use often and recommend.

By sending only data to the client, you can profoundly reduce the size of what you send and see a substantial increase in performance. You also allow yourself the ability to easily add features like light-weight sorting and paging on the client. This can not only improve your users’ experience, but reduce server load and bandwidth requirements.

To that end, I’m going to walk you through these four steps to effectively implementing a client side Repeater, using ASP.NET AJAX and jQuery:

  • Create an RSS Reader page method to return JSON data to the client.
  • Call that page method with jQuery.
  • Use the returned data to build a table on the client side.
  • Improve upon the table creation with a templating plugin.

Click here to read the rest of this post »

Inline Edit Box on CodePlex and new PostBack Ritalin beta

AJAX, ASP.NET, PostBack Ritalin, UI By . Updated July 21, 2008

I’ve decided to open source Mike Davis’ ever-popular Inline Edit Box .NET control. Neither of us have enough time to maintain it properly, and several of you have expressed interest in contributing if it were open source. So, its new home is CodePlex: http://www.codeplex.com/InlineEditBox

You’ll have to bear with me, because this is my first CodePlex project and I’m still familiarizing myself with the admin functionality of the site. If you have any trouble contributing to the project, contact me directly and I’ll do my best to resolve it quickly.

Click here to read the rest of this post »

Highslide JS .NET Updated (v0.7)

AJAX, ASP.NET, Highslide, UI By . Posted April 29, 2008

An update to Highslide JS .NET is available today. I recommend that everyone upgrade, to benefit from the memory leak fixes in the latest Highslide JS.

v0.7 (4/29/2008)

  • Updated embedded Highslide version to 3.3.17.
  • Improved caption rendering, using inline caption divs. This should result in more semantic markup, pairing your captions with your images.
  • Added HighslideManager property: NumberOfImagesToPreload. This allows you to control how many images are automatically preloaded.
  • Added HighslideManager property: FadeInOut. When true, this fades the enlargement in and out as it’s resizing.
  • Added HighslideManager property: RenderScriptInPlace. This allows you to control where on the page the Highslide JS script is inserted in your page.
  • Updated download to include a sample site, to make it a little easier to get up and running quickly.

As always, the latest version is available on the Highslide JS .NET project page.

Why you should not place your whole site in an UpdatePanel

AJAX, ASP.NET, Performance, UI By . Updated May 7, 2008

Perhaps due to its ubiquitous presence in web based email services, implementing asynchronous site navigation is frequently a design requirement when building AJAX based sites. Unfortunately, the also ubiquitous UpdatePanel is chosen to accomplish this far too often.

I’d like to take a moment to strongly recommend against doing that.

I’m going to explain what I believe are the three most dangerous drawbacks inherent to UpdatePanel based navigation: Performance degradation, usability concerns, and lack of maintainability.

Click here to read the rest of this post »

Using jQuery to Consume ASP.NET JSON Web Services

AJAX, ASP.NET, JavaScript, jQuery, UI By . Updated December 28, 2011

Animated example of the RSS feed block from this article. In response to many of the articles here, I receive feedback asking how to achieve the same results without using ASP.NET AJAX. As much as I’m a fan of ASP.NET AJAX, I must agree that its JavaScript payload can certainly be a drawback in some situations.

My recent deferred content loading post is an excellent example of that. I was using jQuery for presentational effects, and using a ScriptManager to call a web service. Loading the JavaScript for both frameworks was a bit counterproductive, since the whole point was to improve initial load time.

In this post, I intend to correct that.

First, I’ll cover the two requirements necessary when calling an ASMX web service that’s being JSON serialized by the ASP.NET AJAX extensions. Then, I’ll show you how to do this with jQuery. Finally, I’ll update the deferred content loading example accordingly.

Click here to read the rest of this post »

Why my ASP.NET AJAX forms are never submitted twice

AJAX, ASP.NET, JavaScript, UI By . Updated May 12, 2009

Animated example of the button disabling technique in this article.The overzealous double-clickers amongst our users often make it desirable to temporarily disable the controls that trigger server side processing. Previously, I’ve shown you how to disable a button during a postback, how to disable a button during a partial postback, and even written a server control to automate the latter.

However, what if you wanted to be more thorough and disable all of the buttons on a page?

In this post, I’m going to show you how to do just that. I’ll also show you how to disable only the buttons in the UpdatePanel raising the event. Finally, for the jQuery users out there, I’ll show you how to simplify the process down to one line of code.

Click here to read the rest of this post »

Boost ASP.NET performance with deferred content loading

AJAX, ASP.NET, JavaScript, Performance, UI By . Updated October 15, 2008

FireBug graph of net requests
When rolled into the page life cycle of an ASP.NET WebForm, that red bar is one of your application’s greatest enemies. No matter how well you optimize the rest of the page, even one slow task can become the sole factor determining a user’s perception of the entire page’s performance.

In this post, I’m going to show you one way to circumvent that problem. By placing ancillary content in user controls and delaying their load until the core page content has been displayed, you can drastically improve perceived performance.

When broken down into digestible chunks, the technique is easy to implement and lends your application a level of polish that your users are sure to appreciate. The four steps required to accomplish this will be: building the user control, statelessly rendering the control as HTML, providing progress indication, and using ASP.NET AJAX to request and inject that HTML.

Click here to read the rest of this post »

PostBack Ritalin Updated (v0.9)

AJAX, ASP.NET, PostBack Ritalin, UI By . Updated February 4, 2008

Another significant update to PostBack Ritalin is available today. Changes include:

v0.9 (1/30/2008)

  • Resolved all remaining issues with master pages. Nested naming containers should no longer cause any issues.
  • Added the ability to provide UpdatePanel specific WaitText and WaitImage properties for each MonitoredUpdatePanel.
  • Added correct handling for virtual paths in all WaitImage properties.
  • Added CSS to change cursor style to “wait” when hovering over the disabled control.
  • General improvements to client side code.

The download is available on the PostBack Ritalin page.

I have several more ASP.NET AJAX example posts and at least one book review in the pipeline. January has just been a very busy month so far (it started with our primary web server’s RAID array crashing on New Year’s Eve, so you can imagine). Stay tuned for more of what you’re used to here soon.