softlogger Latest Articles ::AJAX

Data bound fields for Ajax forms

Aspects of AJAX — 2008-01-30T00:00:00

An overview of the Ajax forms implementation of the AjaxEngine framework has already been published some days ago at http://ajaxaspects.blogspot.com/2007/12/using-openajax-events-for-building-data.html.

Here are more details of the concept around binding html elements to Open Ajax events.

Client side API for data bound elements

The API for the data controls is unified as far as possible and for all the data controls the following common features are implemented:

element.eventname

If this attribute is set the the element will listen to and possibly publish an OpenAjax hub event to exchange the changed value through the eventing mechanism. If the value of the eventname attribute does not contain a full namespace but only the local name of the event, the eventnamespace attribute of any parent element is used to complete the namespace. This may be in many cases the surrounding DataFormBehavior element.

element.datatype

This attribute can be set to the name of the datatype of the values. This enables some datatype specific behavior implementation within the element for example converting the non-string datatypes to the specific notation. If this attribute is not set then the exchanged data will is used without any special formatting conversions and no other restrictions are applied. Just like a string type.

This attribute should not be changed by JavaScript. Use the setDatatype(type) method in the case you need that.

element.setData(newValue)

This method is available to set the value of the control directly by using JavaScript. This method is also used internally for all cases when the value of the control has to change. This method can be overwritten by other, derived controls.

element.getData()

This method is available to JavaScript implementations that need to access the value of a (input) field directly. Don't use the innerText or value attributes of an HTML element directly because there may be type conversion and/or translations necessary that are executed for your convenience when using this method.

element.setDatatype(newType)

When the datatype of an data item is not known when loading the page and by using the datatype attribute this method can be to pass the new datatype.

All the values that are exchanged between the Ajax form element and the inner data controls are using the format defined by the XML datatypes (here simply called the standard format) . This implies that the inner data controls have to take care about converting the values into some more useful formats and that the Ajax form and more important the server doesn't have to care about these specific formats.

There is also another way how values can be exchanged among different controls that is the OpenAjax event mechanism. Every time the Ajax form gets a new dataset is also published all the values by using the eventnamespace of the Ajax form. OpenAjax events are also used to sync the inner data controls that all deal with the same data item.

name attribute

This attribute of an inner element is not used. Using this attribute is heavily used by the classic HTML form mechanism. This still allows "hybrid" web pages where the user gets some advice and aid by using AJAX calls to the server but where the form.submit functionality is still used for the real processing of the data of the form.

Data bound elements and behaviors

DataOutput Controls

If you have data items that come from the server an that will not be changed by the user you can use the DataOutput control. The DataOutput Behavior only registers for the appropriate event that is specified through the eventname attribute and displays all published values inside the control.

The implementation uses a <span> element for displaying the values but other Controls that derive from DataOutput can also use different element eventually by overwriting the setData method. The setData method can also be used to display values when implementing directly with JavaScript.

It also takes care of the datatype attribute. If this attribute is set the given value in the standard format will then be converted into the national language specific notation within the setData method by using the nls object that will be described later.

The reference documentation can be found at

http://www.mathertel.de/AJAXEngine/documentation/ViewDoc.aspx?file=~/controls/DataOutput.js

DataInput Controls

The DataInput component is a general purpose JavaScript Behavior based control that implements the functionality for binding a regular <input> element to OpenAjax events for building Ajax forms.

The implementation takes also care of the datatype in a special way by using the implementation of datatype specific functionality that are available through the nls object that will be described in a later article in detail.

When a key is pressed the keyCode / charCode of the pressed key is identified and only valid characters are passed. This allows to keep unwanted characters away from the field value in many cases. However it is possible to paste any character by using the clipboard so do not trust this tiny filter. It's only implemented to assist - not to prevent.
If a datatype is given, the XML values will be converted into the national language specific notation within the setData method or when an OpenAjax event with the appropriate eventname was published.
If a datatype is given, the national language specific notation of the input value will be converted back into the the XML value that is used on the server site within the getData method.
It the data is changed and the cursor leaves the field or the <enter> key is pressed, an OpenAjax event will be published using the standard format.

You can build more specific components based on this JavaScript Behavior by deriving from this implementation and adding some special features.

The reference documentation can be found at

http://www.mathertel.de/AJAXEngine/documentation/ViewDoc.aspx?file=~/controls/DataInput.js

The DataFade control

The DataFade Behavior implementation inherits from the DataOutput implementation and adds the Fade effect. Every time a new value is set into this element the background becomes yellow and is then smoothly fading to the original background color to attract the users attention.

A sample page for this effect can be found at

http://www.mathertel.de/AJAXEngine/S04_VisualEffects/FadeDemo.aspx.

The reference documentation can be found at

http://www.mathertel.de/AJAXEngine/documentation/ViewDoc.aspx?file=~/controls/DataFade.js

New Video: Integrating Silverlight and ASP.NET AJAX

Dan Wahlins WebLog — 2008-01-20T00:00:00

I gave a talk at Desert Code Camp toward the end of 2007 that discussed how Microsoft's Silverlight product could be integrated with ASP.NET AJAX to dynamically display albums obtained from an Amazon.com Web Service. It's taken awhile to get the video posted, but it's now available. The audio in the room wasn't great since no microphone was used so you may need to crank it up a bit.

Slides and code shown in the video can be downloaded below:

Code Download

PowerPoint Slides Download

Integrating Silverlight and ASP.NET AJAX (57 minutes)

Click here to view in Windows Media Player (right-click and you can save the file)

How to... use Class Libraries with ASP.NET AJAX like AjaxPro

Michael (AJAX.NET) Schwarz — 2008-01-09T00:00:00

Using Ajax.NET Professional (AjaxPro) you are able to put you AJAX methods wherever you want, if inside the Page class itself, any .NET class in the same project or as a reference class library. To generate the AJAX client-side JavaScript proxies the AjaxPro library checks for all public methods inside a specified type that are marked with the [AjaxMethod] attribute. The only thing you have to add to the Page class (in the Page_Load event) is the call to AjaxPro.Utility.RegisterTypeForAjax(typeof(ClassName)).

ASP.NET AJAX is using a little bit different way, well, not very different. In the Page class you could add PageMethods. Those PageMethods will be automatically added to the client-side JavaScript proxies when there is a ScriptManager instance available and the EnablePageMethods property is set to true.

If you would like to build a class library in ASP.NET AJAX you have to write a WebService. "Oh, I don't know much about WebService and it is hard to develop those services!" No, that's not true! The only difference compared to AjaxPro is that you have to inherit from System.Web.Services.WebService and use the [WebMethod] attribute instead of the [AjaxMethod] attribute in AjaxPro. The class itself has to be marked with the [ScriptService] attribute.

Note: don't forget to add a reference to System.Web.Extensions and System.Web.Services.

Have a look at the same example as in my last post but using a Class library, now:

using System;
using System.Web.Services;
using System.Web.Script.Services;
using System.ComponentModel;

namespace ClassLibrary1
{
    //[WebService(Namespace = "http://tempuri.org/")]
    //[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    //[ToolboxItem(false)]
    [ScriptService]
    public class Class1 : WebService
    {
        [WebMethod]
        public int HelloWorld()
        {
            return 2;
        }
    }
}

The public method didn't change, only a different attribute is used to mark this public method to be accessible from JavaScript later. The class itself has the [ScriptService] attribute as meta information. You need this because ASP.NET AJAX does not call a real web service. Instead it is using JSON and the XmlHttpRequest JavaScript object. To include the JavaScript proxy you have to include the ASMX file with an suffix /js:

http://localhost/WebService1.asmx/js

But where do you find the WebService1.asmx? It makes no sense to add a file called WebService1.asmx inside you Class library. What you have to do is to add a new ASMX file in you web application project. The easiest way is to add a new WebService file via Add new item or to simple add a new text file called WebService1.asmx.

What you have to left inside the file WebService1.asmx is following content:

<%@ WebService Language="C#" Class="ClassLibrary1.Class1" %>

Don't forget that you can get rid of all the content in the code-behind source code file. You only need the WebSevice directive and the class name.

The ASP.NET engine knows now that you want to include the class ClassLibrary1.Class1 into this file. Every requests initiated to this file will be processed from your source code in the Class library. Compare this with the RegisterTypeForAjax call in Page_Load when using AjaxPro.

Now, on the client-side JavaScript code you can use nearly the same JavaScript as with AjaxPro. The only difference is the argument list for the AJAX method and the objects passed to the callback handlers. But comparing those methods to PageMethods you will see that they are built on namespaces where PageMethods are only constructed by the object PageMethods and the name of the method.

In our example the JavaScript we used in the last post is very similar. But first we have to include everything we need before. You may remember that ASP.NET AJAX is using a ScriptManager control that will include all the core scripts as well as a reference to the JavaScript client-side proxies. To add a WebService we have to add a ScriptReference.

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="~/WebService1.asmx" />
    </Services>
</asp:ScriptManager>

The Script reference points to the created WebService1.asmx which itself identifies that it will handle the Class1 in our ClassLibrary1 project. Now you are able to call the methods very similar to AjaxPro and the PageMethods. It looks like a combination of both libraries.

<script type="text/javascript">

function onSuccess(value, ctx, methodName) {
    alert(value + 5);
}

function onFailed(ex, ctx, methodName) {
    alert("Failed.");
}

window.onload = function() {
    var ctx = null;
    ClassLibrary1.Class1.HelloWorld(onSuccess, onFailed, ctx);
}

</script>

Wow, this was very easy!! And when you know the only difference is in the parameter list for both the AJAX method and the callback handlers you are fine to move to ASP.NET AJAX. Any further questions?

How to... move from AjaxPro to ASP.NET AJAX PageMethods

Michael (AJAX.NET) Schwarz — 2008-01-08T00:00:00

In one of my last posts I blogged about the future of Ajax.NET Professional (AjaxPro) and that I'm not able to do further development on that project. A lot of my readers feeling sad about this but I had to concentrate more on new technologies that will revolutionize web application development.

My recommendation is to move to ASP.NET AJAX because it is Microsoft's next generating ASP.NET web application generation and is built in Visual Studio .NET 2008 (and, of course, available as additional feature pack for Visual Studio .NET 2005. Those of you that are still using .NET framework 1.1: please stay developing with AjaxPro...

ASP.NET AJAX PageMethods in VS.NET 2008

When started Visual Studio I start a new WebApplication project:

To enable any ASP.NET AJAX feature you need always the ScriptManager which will be responsible for the ASP.NET AJAX main scripts (in AjaxPro prototype.ashx and core.ashx) as well as the JavaScript that is needed to create the client JavaScript proxies (compared with the on-the-fly generated ASHX files in Ajax.NET Professional).

You will find the ScriptManager control in the AJAX Extensions toolbox. Simply drag and drop the control in the default.aspx page.

As this control does not have any UI it will be displayed as a black box in Visual Studio Designer.

Next we need to setup the ScriptManager. By default PageMethods are not enabled. To enable PageMethods only one property has to be changed. The property name is EnablePageMethods. You can either configure this property in the property list or in the HTML code itself.

That is nearly everything we need to configure in ASP.NET AJAX to get PageMethods running.

Let's have a look at the C# source code that we want to be execute when calling the AJAX method. As a very simple example I will return an integer value. First have a look at the source code that we are currently using in AjaxPro:

namespace WebApplication1 
{ 
    [AjaxPro.AjaxNamespace("Default")] 
    public partial class _Default : System.Web.UI.Page 
    { 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default)); 
        } 

        [AjaxPro.AjaxMethod] 
        public static int HelloWorld() 
        { 
            return 2; 
        } 
    } 
}

As I have recommended in the Google group for Ajax.NET Professional I'm using the [AjaxNamespace] attribute nearly every time. The reason is that it is very easy to move the class around or to make updates more easy. The [AjaxMethod] attribute marks the static HelloWorld method to be available in the JavaScript client-side proxy.

With AjaxPro you call this method like following line:

<script type="text/javascript"> 

function callme() { 
    Default.HelloWorld(mycallback); 
} 

function mycallback(res) { 
    alert(res.value); 
} 

</script>

What do you need to change your code for AjaxPro to ASP.NET AJAX? The code-behind C# source looks very similar. Because we have put the ScriptManager control on the page we don't need the RegisterTypeForAjax call in the Page_Load. The control itselfs has the reference to the page.

The AJAX methods (PageMethods) in ASP.NET AJAX have to be marked with the [WebMethod] attribute. To identify that the Page class includes a method that we want to expose the class has to be marked with the [ScriptService] attribute. That's everything you have to change. Don't forget to change the method to static if not already using static methods.

Wow, that was very easy, no source code change (only meta information are changed). Note that you can still leave Ajax.NET Professional attributes if you want. This makes it very easy to move from AjaxPro to ASP.NET AJAX and back if needed.

On the client-side JavaScript code you have to do more changes but it is not very different. Well, have a look at the JavaScript source code:

<script type="text/javascript"> 

function onSuccess(value, ctx, methodName) { 
    alert(value + 5); 
} 

function onFailed(ex, ctx, methodName) { 
    alert(ex.get_exceptionType()); 
    // get_stackTrace(), get_message(), 
    // get_statusCode(), get_timedOut() 
} 

window.onload = function() { 
    var ctx = { 
        CurrentValue: 123456, 
        CurrentDate: new Date() 
    };    // sample context data 
    PageMethods.HelloWorld(onSuccess, onFailed, ctx); 
} 

</script>

In the window.onload event I invoke the HelloWorld method. As argument I pass the callback handler if the execution was successful. Another callback handler could be passed to be called if there occurs any problem like http errors or .NET exceptions. As last argument you can pass a context object that will be available in both callback handlers.

If the invoke was successful you get up to three objects. The first will contain the value of the AJAX method, in our example it is the integer 2 (remember in AjaxPro it was res.value). The second passed object contains the context and the last one the method name (which does not include the namespace or class name when e.g. used in MasterPage and Page side-by-side).

The onFailed callback handler will be executed on any error during invocation. As result you get a JavaScript objects with several methods that help you to identify the real error. Second and third passed objects are the same as for the onSuccess callback: the context and method name.

The generation of the JavaScript client-side proxy will be included in the html output:

I hope this very short example will help you to move to ASP.NET AJAX. Any questions?

Aspects of OpenAjax

Aspects of AJAX — 2008-01-05T00:00:00

You know I like standards.

Even if it is some kind of more complex to implement a solution based on a standard than using a direct and efficient but proprietary way, there are benefits on the long way that I just don't want to miss: the ideas and thoughts of others materialized in APIs, specifications and best practices.

That's why I use the SOAP standard webservice protocol for my Ajax implementations.

OpenAjax

Now OpenAjax Alliance is another try of a group of about 75 companies and organizations to define standards in the Ajax hemisphere. There are a lot of ideas and some good ideas too in the current discussions. We all know that it is hard to define a standard specification that gets agreed by the majority of the members. And it can take a long time until a standard proposal is adopted.

Right now a version 1.0 of the specifications are on their way and they contain some good stuff that I like to bring into the Aspects of Ajax framework and support an probably upcoming standard this way.

http://www.openajax.org/member/wiki/OpenAjax_Hub_Specification

Libraries and Namespaces

There is only one world we live in and there is only one global namespace in JavaScript. The problem is that multiple frameworks when used simultaneously in one page MUST use different global variable names, different namespaces when implementing XHTML and different prefixes and aliases for the namespaces. Especially the global names might cause a lot of problems.

Did you try to use 2 libraries that both register the $() function but implement it differently?

The OpenAjax registerLibrary and unregisterLibrary methods that can be used to help mastering this problem space.

The ajax, the proxies and the jcl prefix will be used by the Aspects of Ajax framework because these are the names of the global variables I use (beside minor important stuff). I hope and pray that nobody else will use this prefix in any other AJAX framework. (I am the first - I won! :-)

No, and seriously: I don't like the global ajax variable being registered by any framework and right now I am not happy about this early (2005) decision any more.

The namespace used by the Aspects of Ajax frameworks will be de.mathertel because http://www.mathertel.de/AJAXEngine/ is the URL where the documentation and the samples can be found on the web.

... but maybe it's time to register a product name related web address :-)

When implementing a standalone AJAX framework you do not have to care about these problems. Being compatible (and friendly to other frameworks) can open a wide space in combining functionality from different sources.

Events - inter controls connections

Connecting multiple controls on a page by using JavaScript can be a nightmare because many little scripts will have to know about the existing other elements on the page. If you want to reuse generalized controls this situation becomes worse and if you like to reuse components of different manufacturers ...

So it's a good thing to define a common functionality that does the job and that controls can use to talk to each other using the well known subscribe and publish pattern and the idea of events.

The Aspects of Ajax framework has a small implementation since almost 2 years (see http://ajaxaspects.blogspot.com/2005/09/connecting-controls.html) called "page properties" or data connections that also allows this kind of connectivity through the DataConnections object but compared with the event system of the OpenAjax hub specification there are some pros and cons.

The OpenAjax hub has defined an idea of namespaces and namespace notation like the namespace ideas known from .NET, Java and other environments. Events that are published are prefixed by a namespace so different providers of the same event name can be distinguished. The page properties of the Aspects of Ajax framework only had one global namespace (the page).
Using the OpenAjax hub specifications it is possible to subscribe to specific events by specifying the long name of the event and by using a wildcards for registering to multiple events. In the Aspects of Ajax framework it was possible to subscribe to all events.
The Aspects of Ajax framework has a mechanism that allows to poll for a current value of a prior published property change / event. The OpenAjax hub has no such methods defined but it is easy to implement an invisible control that logs all changes and offers some methods for getting the latest values.
The Aspects of Ajax framework has some specific controls that helped while developing. One of them is a log of all events and the new values. Beside the changed implementation they also have a new parameter to specify what specific namespace they should watch.

Overall the OpenAjax implementation has some big advantages over the older DataConnections and the additional functionality can be added.

Implementation

The OpenAjax Alliance provides a reference implementation is available in an early version and other implementations of the specification are welcome. After reading the available specs and noticing that it is "just" better then my prior codings I decided to implement the specific details on my own and make them available in a standalone JavaScript file. Some requirements are implemented different than in the reference implementation and maybe you find the time to have a look at the difference if you like.

The size of the implementation

As of this writing the (unfinished) reference implementation is about 2801 bytes. The (current) implementation available on my side at http://www.mathertel.de/OpenAjax is about 1300 bytes. Maybe my implementation is a little bit slower because I rely on regular expressions but I have not done any detailed measures yet. Both sizes are calculated by comparing a shrinked version using the tool from the dojo framework that is available online at http://alex.dojotoolkit.org/shrinksafe/. This is because I don't want to compare the comment lines or different programming styles.

The same implementation is also embedded into the jcl.js implementation that also implements the JavaScript Behavior mechanism.

Future planning

I will have a look for the specification of the OpenAjax Alliance hub and I will post a compatible version. It is just good to have a second source.

The Aspects of Ajax framework. including the SOAP client for web services in JavaScript will register itself and will use the hub implementation as a substitution of the older DataConnections implementation that will be removed completely.

More OpenAjax compatible components

Aspects of AJAX — 2008-01-05T00:00:00

The PersistCookie control

OpenAjax events are not persistent. The specification is based on the fact that the subscribers are informed just in time when the event was published. But by using cookies the passed values can survive a page refresh or even some days.

In some applications it is important that the values that where published by OpenAjax events and have changed the web application in a specific way are presenting the state of the client. With the PersistCookie control it is possible to save these simple values into cookies and makes them available when the page is reloaded the next time the page loads by publishing a new OpenAjax event. By using this control it is possible to reload a page in the state that was given when the user visited it the last time or when using the refresh button.

Using this functionality is easy by just including a ASP.NET control like this:

<ajax:PersistCookie runat="server" eventnamespace="jcl" eventname="view" />

The control is designed for persisting the values of multiple eventnames of the same eventnamespace and is providing a mechanism for default values in the case of a first time load of the page.

Using Cookies

Cookies do not have a namespace based mechanism as we can see in the OpenAjax hub specification so the names that are used within the cookies will not contain the namespace used by the OpenAjax event but will only use the local eventname.

Another advantage of not using the namespace to build cookie names is a better use of the available storage space of cookies.

If you have to store values by using the same name multiple times in your web application it is important that the part of each used cookie value is more specific than the standard root. The PersistCookie control therefore uses the current url of the page, extracts the folder part of it and uses this as the path to store the cookies. So, in most cases you will not have to specify the path attribute of this control.

eventnamespace

This attribute can be used for specifying the namespace that contain the to be persisted events.

The default namespace is set to "jcl".

eventname

This attribute can contain a list of event names together with the default values. Then event names are separated by semicolons and the default values are appended to the names using the equal sign.

path

This attribute specifies a specific path for the cookie. If this attribute is not set the current url of the page is used to build a path that specifies the current folder. This avoids conflicts with other cookies used on the same web site.

You will have to set this attribute only if you want to share cookies over multiple pages in different folders.

expire

This attribute specifies how long the cookie values should be stored.

If this attribute is not set the values are only kept in memory while the browser remains open.

Samples

<ajax:PersistCookie runat="server" eventnamespace="jcl" eventname="view" />

<ajax:PersistCookie runat="server" eventname="kosten=120000;jahre=4;kapital=999" runat="server" expire="2" />

You can find the implementation here:

http://www.mathertel.de/AJAXEngine/documentation/ViewDoc.aspx?file=~/controls/persistcookie.js

Useful OpenAjax Event Logger

Aspects of AJAX — 2008-01-05T00:00:00

While working on further adopting the OpenAjax event mechanism I wrote this small JavaScript include file that helps inspecting the current OpenAjax events.

It is implemented by using a single JavaScript include file that can be found at http://www.mathertel.de/AjaxEngine/controls/OpenAjaxEventLog.js (view source).

It is easy to include this file into ANY web page by using a small JavaScript link (a.k.a. bookmarklet) that you can type into the address bar or save as a link in your favorites:

Create any Link in your favorites, or the link bar and name it for example like this:

Here is the url that you can paste into the url field in the property dialog of the link.

javascript:void(document.body.appendChild(document.createElement('script')).src='http://www.mathertel.de/AjaxEngine/controls/OpenAjaxEventLog.js')

There will be one dialog that warns you about the fact that the url is using JavaScript (an unregistered program - what means that ?) and that this may be unwanted. But in this case it is what we need.

You can open any of the sample pages from the http://www.openajax.org/member/wiki/InteropFest_1.0 and try it.

If you click on the link you just created a extra area will be appended at the bottom of the page and all OpenAjax events will be shown in there.

If you like to know more about bookmarklets you can google this term and you will find a lot more tricks.

My favorite is:

javascript:'<xmp>'+document.documentElement.outerHTML+'</xmp>'

AJAX in Sharepoint: New Articles

Connected Systems Chilled Out Blog — 2008-01-03T00:00:00

Windows SharePoint Services 3.0 Software Development Kit provides overview information, installation instructions, and programming examples to introduce you to the way that Microsoft ASP.NET AJAX interacts with Web Parts.

In This Section

Overview: ASP.NET AJAX and Web Parts in Windows SharePoint Services 3.0

Installing ASP.NET AJAX Extensions in Windows SharePoint Services

Walkthrough: Creating a Basic ASP.NET AJAX-enabled Web Part

ActiveJax: An ActiveRecord to JavaScript Bridge

Ruby Inside — 2007-12-07T00:00:00

ActiveJax is a Rails plugin developed by Nicholas Schlueter that acts as a bridge between ActiveRecord and Prototype-backed JavaScript. This means you can call ActiveRecord model methods from JavaScript using AJAX. Example:

ActiveJax.Author.find_by_name("Nicholas Schlueter").each(function(author) {alert(author.name);});

I asked Nicholas how this differs from the existing Jester library developed by Thoughtbot. One significant difference is the syntax. ActiveJax's mechanisms are all embedded underneath the ActiveJax object, whereas Jester offers up the "models" more directly within JavaScript. ActiveJax also doesn't depend on the application providing RESTful services, it's possible to call any method on the models. All this said, the motivations for using Jester versus ActiveJax cross significantly, so it's worth checking out both libraries if this is an area that interests you.
More info is available in this blog post by Nicholas, including a link to a sample application.

Silverlight V2.0

Mike Taultys Blog — 2007-11-29T00:00:00

And only yesterday, MikeO were still calling it V1.1 at our Silverlight event in Birmingham.

Get the news from ScottGu! If I read it correctly;

Extensible control model
Layout support (hopefully that's extensible too :-))
Data binding
Control templating
Actual Shipping Controls - see Scott's list :-)
Various comms options beyond what we have today with JSON-only encoding including WS-*.

and more. There's a beta coming in Q1 of 2008 with a Go-Live license - wahey and Visual Studio will get an update too for Silverlight dev.

Scott's post also says that the ASP.NET 3.5 Extensions are coming next week including the MVC bits and the Dynamic Data bits.

AjaxEngine is now full based on the OpenAjax specification

Aspects of AJAX — 2007-11-27T00:00:00

During the last weeks a lot of work was done to remove the old DataConnection implementations in the Ajax Engine open source project. Now it's done. You can find a first version of it in the repository on Sourceforge: http://sourceforge.net/svn/?group_id=200182

and the sample web site http://www.mathertel.de/AJAXEngine was also published with this version today.

The current version will be tagged 1.5.nnnn.beta1 and a donwloadable zip file will also be available soon.

The OpenAjax hub specifications seems to be almost finished so not much work will be left until a final full compatible version.

Ajax with the ASP.NET MVC Framework

Nikhil Kotharis Weblog — 2007-11-26T00:00:00

This post presents a few basic Ajax features (similar to partial rendering and behaviors in terms of concepts) running on top of the ASP.NET MVC framework... some early ideas, experimentation and app-building results.

A simple menubar

Aspects of AJAX — 2007-11-20T00:00:00

By using the hover effect it is possible to realize a simple menubar that will be used by an upcoming control that allows rich text editing. Here I focus on the implementation of the menubar that is implemented as a separate control and can also be used with small changes for other purposes.

Building the html code for the menubar

The html code for building a menubar is implemented by using an outer <div> element with a classname "VEMenuBar". This element is used as the wrapper for all parts of the menubar and is displayed in the background.

The inner elements and menu items can be implemented using <img> images or <span> elements with text content.

The third type of an inner element is a vertical line or separator that can be used to group elements.

Here is a small sample:

<div class="VEMenuBar">
  <span class="VEMenu" tabindex="1" onclick="datasource.search();">Search</span>
  <img class="VEMenuSeparator" alt=" " src="../controls/images/white.gif" />
  <img class="VEMenu" alt="show first record" tabindex="1" src="../controls/images/first.gif" /> 
</div>

The hover effect

When positioning the mouse over any enabled item of the menubar the individual item for starting a specific command is highlighted. For implementing this effect the already known hover behavior is reused. All that we need to implement it is to include the hover.js include file in the head of the page and setting the hover attribute on every element.

<script type="text/javascript" src="../controls/Hover.js"></script>

The menubar behavior (MenubarBehavior)

This behavior implements all the basic functionality for menubars. When bound to a html element it also loops through all the children of the outer element an sets the hover attribute to true for those elements that have a classname "VEMenu". This allows to enable the hover effect without implementing the hover attribute for every menu item.

If you set the tabindex property on menu items another functionality is enabled. By setting tabindex to a value greater then 0 the element can get the focus. When pressing the space bar while the focus is on a specific menuitem the onclick method of the menuitem will be called. This allows you to use the keyboard instead of clicking with the mouse.

The HTML elements that build the menubar

First of all the outermost element of the menubar that will get attached the behavior is a div element with a classname "VEMenuBar". This element is used as the wrapper for all parts of the menubar and is displayed in the background.

The icons or other images are placed in the menu by using <img> elements as children inside the VEMenuBar element

and will have a classname "VEMenu". They will automatically get an attribute hover="true" to enable the hover effect.

CSS definitions

Some classnames need to be defined:

.VEMenuBar { background-color:#eeeeee;padding:2px 8px 2px 8px;height:20px;overflow:hidden;}

This defines the background color of the menubar. The padding definition will keep the inner icons away from the border.

.VEMenuBar * { vertical-align:top;}

All elements will be vertically aligned by the top.

.VEMenuBar span {display:-moz-inline-box;display:inline-block;}

<span> elements inside the menubar can be used to create buttons with a text caption. This rule is used to position span elements by using the padding.
The IE will use the inline-block rule and Mozilla/Firefox will use the -moz-inline-box rule. They both don't understand the other syntax and will just ignore it.

.VEMenu { border:0px;padding:2px}

This rule is used for the state of a icon that is not hovered or pushed. In my layout it has no border and is padding the graphic by using 2 pixels on every side.

.VEMenuHover { border-style:solid;border-width:1px;border-color: #acc1e4 #203050 #203050 #acc1e4;padding:1px}
This is the state of a icon when the mouse is over it but is not pushed. In my layout I use 1 pixel of border on every side with some colors that makes the icon look like being raised a little bit. I reduce the padding to 1 px to avoid the shifting and flickering of the graphic.

.VEMenuPushed { border-style:solid;border-width:1px;border-color: #203050 #acc1e4 #acc1e4 #203050;padding:1px}
This is the state of a icon when the icon is pushed down. In my layout I use 1 pixel of border on every side but with different colors and I reduce the padding to 1 px to avoid the shifting and flickering of the graphic.

.VEMenuSeparator { display:inline-block;height:20px;width:1px;border-left:solid 1px #203050;}

Separators between groups of symbols are included by using a 1x1 white pixel image with a classname "VEMenuSeparator" that is displayed with a darker border on the left side.

Attaching functionality

The MenubarBehavior implementation has no special implementation for the onclick event on VEMenu items. The functionality of the menubar item should attached by using the onclick events directly.

You can find the state of the current implementation here:

http://www.mathertel.de/AJAXEngine/S04_VisualEffects/InlineEditDemo.aspx

(see the page source by using the view link in the upper right corner)

Download the current version under development

I've added another downloadable archive file to the site : Ajax_new.zip.

This Zip-File contains the current version of the ASP.NET 2.0 web project that builds this side.
The complete AJAX Engine and all samples and also unfinished samples and componente are included.
Use this download If you want to experiment with the Engine or if you want to have a look for the newest additions and features.

Enable AJAX on Existing ASP.NET Website Using WCSF

David Hayden - Florida .NET Developer - C# and SQL Server — 2007-11-16T00:00:00

Enable AJAX on Existing ASP.NET Website Using WCSF

by David Hayden ( Microsoft MVP C# ), Filed: ASP.NET 2.0

Enabling AJAX on an existing ASP.NET Website involves the monotonous task of adding various Web.config settings. If you have a relatively empty Web.config file, it is probably easiest to just copy a Web.config file with existing AJAX settings and merge the existing application's Web.config settings into it. Unfortunately, I had just the opposite case today. I had a really complex existing Web.config file and did not want to take the chance of screwing up the merge by copying over existing settings.

Then out of nowhere I had a flash of brilliance that practically knocked me out of my chair. The new version of the Web Client Software Factory has a recipe, called Enable AJAX, that will add the AJAX configuration settings in an existing Web.config file. I wasn't using WCSF on the project, but it would only take two seconds to enable WCSF on the project, run the Enable AJAX recipe on the project to add the AJAX configuration settings, and disable WCSF on the project. So that is what I did :)

I can't show the project I am working on, but here is the recipe as show on my PnPGuidance Website:

The Enable AJAX Recipe in WCSF worked like a charm, but that didn't keep me from checking in all the previous changes to source code before doing it :)

Kudos to the Patterns & Practices Team for adding that wonderful new recipe in WCSF v2.0!!!! It didn't seem like a big deal at the time, but it is very handy ;)

News Feed: David Hayden ( Microsoft MVP C# )

Filed: ASP.NET 2.0

ASP.NET AJAX Server-Side Validation - ServerSideValidationExtender in Validation Guidance Bundle

David Hayden - Florida .NET Developer - C# and SQL Server — 2007-11-05T00:00:00

My brain is working overtime on the simple concept of doing server-side validation using ASP.NET AJAX in webforms just like the ServerSideValidationExtender in the Validation Guidance Bundle. I really dig the ServerSideValidationExtender Control, but am trying to better understand alternative solutions and the pros and cons of each. Let's start with the ServerSideValidationExtender and ASP.NET 2.0 CustomValidator Control. Read more...