Andy. Blog.

A Basic ClientBehavior Example

May 8th, 2008

In a previous post i told you I’d put up a demo of how to build a custom extender. For the purposes of this post I’m going to assume that you haven’t been exposed to ASP.NET AJAX at all. I’ll try to keep the discussion as in depth as I can without getting to complicated.

I’m going to show you how to build a fairly basic extender that will filter a text box. Before I get into the code though I want to go over the different files that will make up your basic extender. There are three files that make up your typical extender and those are the JavaScript client side code, the asp.net behavior declaration and the file implementing the extender.

An extender can’t exist without something to extend which is why I include the file implementing the extender in the list.

If you happen to be using Visual Studio 2008 then the will actually be quick way to build out the first of our three files. If you add a new item you will see an item labeled “AJAX Client Behavior”. If you add this you’ll see code similar to this:

Type.registerNamespace("BlogDemo");

BlogDemo.ClientBehavior = function(element) {
    BlogDemo.ClientBehavior.initializeBase(this, [element]);
}

BlogDemo.ClientBehavior.prototype = {
    initialize: function() {
        BlogDemo.ClientBehavior.callBaseMethod(this, 'initialize');

        // Add custom initialization here
    },
    dispose: function() {
        //Add custom dispose actions here
        BlogDemo.ClientBehavior.callBaseMethod(this, 'dispose');
    }
}
BlogDemo.ClientBehavior.registerClass('BlogDemo.ClientBehavior', Sys.UI.Behavior);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

This is the basic framework of the client behavior from the javascript perspective. I want to make note of a few things with this. The first one is:

Type.registerNamespace("BlogDemo");

This statement acts like the namespace statement within .Net. It’s simply a way to let the framework know where we are going to be building our new class. Along with this you’ll notice the last two lines are:

BlogDemo.ClientBehavior.registerClass('BlogDemo.ClientBehavior', Sys.UI.Behavior);
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

The first line is our final notification to the framework as an announcement of the new class we’ve added. The second line is how we notify the framework that we are at the end of this script file and it can move ahead with loading this class.

Now that we have an understanding of notifying the framework of our class let’s look at how the class itself is structured. If you’ve work with JavaScript and the prototype form of declaration you’ll recognize this immediately. It has a few additions that I want to make note of though. When we first enter the class you’ll notice we call

BlogDemo.ClientBehavior.initializeBase(this, [element]);

This call does a few things for us. The most important of which is gives us access to the element this behavior is being called on via the this.get_element() function. One of the other things this does for us is initializes a base class if we’ve used inheritance to create this class. For the purposes of this example we’re mostly concerned with the fact that it will give us our basic functions from the framework.

Now let’s move onto the .cs file that we’ll need to make this extender usable. We’ll start by adding an empty class file to the project. Once we have it added we’ll need to setup a few steps to make it work. The first is that this class will actually inherit the ExtenderControlBase class. The second is that we’ll need to give it a TargetControlType, in our case it will be typeof(TextBox). We won’t need a default constructor for this class because we’re not going to be doing anything when this class is generated. If we needed to grab some default data or let the application know that we were initializing we could do it there, but for today we’ll just chuck it out the window for now.

Now that we have the basics done we’ll need to override two functions from our base class that will give us the ability to tie the JavaScript file we just created into this as well as declare any items we’re going to allow the user to pass to us via the tag. The code snippet below shows what my file looks like at this point. [NOTE: You’ll need the AJAX Control Toolkit installed and referenced for this demo. It will provide the base class we are using.]

using System;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

namespace BlogDemo
{
    [TargetControlType(typeof(TextBox))]
    public class FilteredTextBoxExtender : ExtenderControlBase
    {
        protected override System.Collections.Generic.IEnumerable GetScriptReferences()
        {
            ScriptReference myRef = new ScriptReference();
            myRef.Path = ResolveClientUrl(”ClientBehavior.js”);
            ScriptReference[] temp = { myRef };
            return temp;
        }
        protected override System.Collections.Generic.IEnumerable GetScriptDescriptors(Control targetControl)
        {
            ScriptBehaviorDescriptor myDesc =
                     new ScriptBehaviorDescriptor(”BlogDemo.ClientBehavior”, targetControl.ClientID);
            ScriptDescriptor[] temp = { myDesc };
            return temp;
        }
    }
}

The rapid explanation of the two functions is: the GetScriptReferences function declares referrences to any scripts needed for the extender and the GetScriptDescriptors allows us to pass items into the JavaScript from inline tag declarations. Now that we have this basic framework setup let’s actually start writing some code to make this all work.

Go back to the JavaScript file. In here let’s add a function for the onkeypress event of our target control. Inside here we’ll only allow a user to press numbers. This will in affect turn our textbox into a numbers only textbox. This is what my code looks like:

    initialize: function() {
        BlogDemo.FilteredTextboxExtender.callBaseMethod(this, 'initialize');
        $addHandler(this.get_element(), "keypress", this._OnKeyPress);
        // Add custom initialization here
    },
    _OnKeyPress : function (evt) {
        var NumbersRegex = /[0-9]/;
        var key = (evt) ? evt.which : event.keyCode;
        if(NumbersRegex.test(key))
            return;
        else
            evt.preventDefault();
    }

Inside the initialize function I’ve added an event handler to our target element using the $addHandler function. This will fire off our _OnKeyPress function anytime a key is pressed in the textbox (aka our target control). The _OnKeyPress function basically does a test on the key that was pressed and either allows it to be put into the text box (return;) or denies is (evt.preventDefault();).

So now that we have files that we can do something with let’s build a page to use them. If we open up the Default.aspx page we can add the required <asp:ScriptManager /> to the page so we can use our new extender. Then we need to actually reference the extender using the namespace we put it in. If you look at my declaration on the .Net side you’ll notice I put my extender in the BlogDemo namespace. This will allow me to reference it in my Default.aspx using the following line:

<%@ Register Namespace="BlogDemo" TagPrefix="Extenders" %>

The TagPrefix portion dictates the prefix we’ll use to reference the classes we’ve built inside the namespace. Now we can add an asp:TextBox and our extender.

        <asp:TextBox ID="txtFiltered" runat="server" />
        <Extenders:FilteredTextBoxExtender ID="txtFilteredExtender"
                 TargetControlID="txtFiltered" runat="server" />

If we fire this up and start typing in the text box you’ll notice that it will only accept numbers. w00t!

Ok reality check time. I’m aware that this is a lot of code to do something very simple like filtering a text box, but these basic building blocks become a lot more useful when you starting using them to extend more advanced objects like vaildators or the calendar. The AJAX Toolkit provides a lot of excellent examples of what can happen when you really start to push the boundaries on the built in .Net controls.

I hope you find this example useful. Check back later and I’ll expand on this example by making our filtered text box more useful with inline

Source Code For Example

Posted in JavaScript, ASP.NET AJAX | Comments Off

ESPN Halo 3 Top Ten Lists

April 25th, 2008

Ok so this segment of Random Video Of The Day is actually two videos. I’m a HUGE Halo 3 fan (and player) so I got a kick out of these MLG top tens. Check em out:

Halo 3 Top Ten #1

Halo 3 Top Ten #2

Posted in Random Video Of The Day, Halo 3 | No Comments »

Oh how I love you ASP.NET AJAX

April 24th, 2008

Ok so this will be my first real technical post. I’m going to talk a bit about my experience with the ASP.NET AJAX framework and how I personally interact with it via .NET 3.5. I have been working on a project with Sunder Labs that is very JavaScript intensive including a fair amount of AJAX. Everything I’ve done up to this point has been insanely smooth thanks to the way the framework interacts with classes, specifically utilizing prototype.

Prior to finding the framework I was a bit of a purist only relying on code I had hand written, or code that I had gone over thoroughly enough to completely understand how it works. It’s a little insane, but I find that I’ve learned a lot by reading and truly understanding other peoples code. Anyway, back to the framework.

The first thing I love about the framework is its full integration with the prototype concept in JavaScript. When you make a function call to a prototyped class it keeps its contextual awareness about the class. This is critical when you start dealing with complex classes that store a lot of contextual information. I’m not going to go into anything specific with this post, but trust me when I say I will be doing a full fledged example of a basic extender class for doing something like tagging on a list of blog posts.

The second thing I love about the framework is its direct tie into ASP.NET Web Services. Microsoft has made it as simple as one function calls to post to a web service and get the results back in a very logical manner. The basics are provided for error handling as well as giving you enough information when an error occurs that you can get to the bottom of any issue very quickly. No more trying to interpret funky JavaScript errors that can change from browser to browser when you fail to receive a successful AJAX return.

I’m only going to do my personal top three for this post, so here’s the third: $addHandlers, $removeHandlers and $clearHandlers and maintaining contextual awareness. I don’t know how many times I have written a basic handler that needs to be routed or made aware of a variable to function appropriately when all I want is for the prototypes awareness to follow with the calling of the function. Here’s a great example of what I’m talking about. You set up an onkeypress event on a text box so you can do an auto-complete. Typically the function that is fired will only have awareness of the current event it is dealing with. Utilizing the frameworks $addHandlers function give the function that is called a total contextual awareness to the object that called it. It makes doing all of your event handling that much easier.

Look back here in the next week or two and I’ll post up a full working example of what I love about the framework. Happy Coding!

Posted in JavaScript, ASP.NET AJAX | No Comments »

Married Now. Yep.

April 13th, 2008

Ok, so recently I went out and did that thing hat so many people around the world have done. I took the plunge with this amazing woman who fulfills all of those gaps in my life I couldn’t fill with technology, development or generalized mayhem.

The whole planning part was pretty hectic as we really planned the whole thing in about 2 months. In my opinion I wouldn’t have done it any other way. The truncated time table meant we didn’t pine over every little detail for prolonged amounts of time. We made decisions and stuck to them.

Once all of the decision making was done it was a pretty amazing day. We got the good luck of rain on a wedding day with the luck of that rain stopping before our ceremony started. The reception was a sight to be seen.

We had a photobooth setup for everyone to take pictures in a different way than they probably had at any wedding prior to this one. The pictures were entertaining and the stories around the pictures even more so.

Posted in life | No Comments »

Random Video Of The Day - Daft Punk ‘Hard Bodies Fast Stronger’

November 15th, 2007

It’s got a slow start but keep watching because these two obviously put a lot of time into getting this tight.

Posted in Random Video Of The Day | No Comments »

What a blog about nothing? That can’t be!

April 2nd, 2007

So many times I hear about blogs that are so sporadic with what they talk about they get overlooked simply because they are not “to the point.” Well, overlook this if you like, but every now and again you might just catch something worth knowing about. You may find yourself questioning your own stand point on issues because you may have never thought about it like that. On that same note I hope to see things from perspectives that are otherwise hidden from my view.

I will get things wrong, whether by my own lack of interest in topics or my own subtle misinformation. It’s a guarantee. I’m not going to claim that this is a legitimate reference for a term paper, or even a discussion being had around the water cooler. I will state that which I know to be fact as such. I will also state the things that are my opinion in such away that you will not question the differences between the two.

Now onto the ever important topic of today: How do you get a small business that is aimed at small businesses off the ground? I guess I’ll just have to talk about that in my next post.

Posted in nonsense | 1 Comment »

Andy. Blog.

About

A Basic ClientBehavior Example

ESPN Halo 3 Top Ten Lists

Oh how I love you ASP.NET AJAX

Married Now. Yep.

Random Video Of The Day - Daft Punk ‘Hard Bodies Fast Stronger’

What a blog about nothing? That can’t be!

Search

Subscribe

Pages

Categories

Archives