Ra-Ajax Samples - "Get it" in 15 seconds

Ra-Ajax is an Open Source and Free of Charge Ajax Library for ASP.NET. Below are our three most proud Ajax Examples which will help you "get it" in less than a minute.

Hello World Ajax Application

Now that we have your attention you can try out our "Hello World" Ajax application below. Type something into the TextBox below and click Submit...

What happened?

If you click the Show Code button you will see that there is no JavaScript at all written to run the Ajax functionality you just observed. Ra-Ajax is heavily inspired by Anthem.Net in that you can run pretty advanced Ajax functionality without being forced into writing JavaScript at all. Though there is one crucial difference between Ra-Ajax and most other Ajax Frameworks - Ra-Ajax uses Partial Rendering as seldom as possible but relies instead on sending changes back to the client from the server as JSON which then again is mapped towards functions on the Client Side JavaScript. Only when absolutely neccessary Ra-Ajax will actually resort to Partial Rendering and render HTML back from the Server. If you use FireBug and check out the response from the server you will in fact observe something like this:

Ra.Control.$('ctl00_cnt1_lblResults').handleJSON({"Text":"Hello xxxx and welcome to the world :)"});

The above is the JSON sent from the server to the label on the client side to update the text value of the label.

Partial Rendering is the way ASP.NET AJAX works and Partial Rendering is bad!

Why not just use the far easier Partial Rendering method?

Because by keeping the "state" on the client we can do far more advanced stuff then if we are using Partial Rendering. Partial Rendering will eliminate the state on the client which in the case of Ajax is a bad thing. Imagine if the above Label had and OnClick Event Handler. Then that event handler would be deleted when we re-render the Label if we were using Partial Rendering. Or if we were to keep those Event Handlers we would at least have to re-create them after the HTML was updated. In addition to that every property (attribute) of the Label would have to be sent back from the server while Ra-Ajax only sends back the properties and attributes that actually changed. This increases the quality of the user experience and creates a far more responsive application for your end users. It also stresses your server resources far less. The end result is that if you use Ra-Ajax instead of Partial Rendering you get to deliver better applications and you also get to be more happy and less frustrated. ;)

None of this really matters though before you start creating "really advanced" stuff, like the sample below;

Notice how the background-color of this panel changes as you click the above button...

If you look at the source for this page you will see that we're setting the style property from an enum which maps towards the styles in the CSS standard. This ensures typesafety and less typing errors.

Also Ra-Ajax has support for setting opacity through the opacity style value which abstracts away the problems of setting the opacity for different browsers (which is a nightmare to do by "hand")

Also notice the small amount of bandwidth which is sent from the server for this operation, even though the HTML of this panel is actually pretty large. In a Partial Rendering framework the entire HTML would be sent and the bandwidth usage would end up being orders of magnitudes larger.

And in fact the simple logic you're observing here is actually *impossible* in a Partial Rendering framework! (since the button above would loose the focus)

Try to create something similar in e.g. ASP.NET AJAX and try to just keep on clicking space while the Button has focus and you will understand that the partial rendering problem goes pretty deep. Even for a really simple solution like this one.

Why doesn't this work with Partial Rendering?

Because when the Panel is re-rendered using Partial Rendering the Button would loose focus since Partial Rendering would force a re-rendering of the entire panel. Partial Rendering of the above panel would eliminate the state on the client meaning you would have to re-add Event Handlers and so on for EVERY control inside of the panel. Not to mention it would be orders of magnitude larger in regards to bandwidth usage. Especially for a complex panel. Or imagine the "worst case scenario" where you are changing some of the Panel's properties as the user is writing inside an Ajax TextBox within the panel. That would destroy focus from the TextBox as you are writing in addition to that if you write something while the Ajax Request was fetching data from the server you would also loose those changes in the TextBox since the new "value" from the server would overwrite those changes done while the server was fetchind the "new panel" from the server.

But for most immediate problems the Bandwidth Usage is the most serious problem. In Ra-Ajax the above Ajax Response for the Panel is very small compared to a Partial Rendering Framework. Compare the Ra-Ajax response below against your favorite Partial Rendering Framework.

Ra.Control.$('ctl00_cnt1_pnl').handleJSON({"AddStyle":[["backgroundColor","Yellow"]]});

You will probably find it a fraction of the alternative.

To be 100% accurate with you though the above logic is possible in a Partial Rendering Framework though it would either require some JavaScript hacking, some custom widget (or extender) for that specific purpose or that you don't mind if the Button above looses focus between callbacks. Though it would be orders of magnitudes larger in bandwidth usage if you used Partial Rendering.

JavaScript - The best Assembly Language of the century!

JavaScript is a great language, I personally LOVE it but most application developers have enough worries with trying to figure out the new stuff in C# or VB.NET like anonymous delegates, LINQ and so on. Our bet is that JavaScript is the Assembly language of the century and that JavaScript should be completely abstracted away from application developers. So just like modern C#, C++ and VB.NET compilers try to abstract away the assembly code, Ra-Ajax tries to abstract away the JavaScript.

I am currently writing this on Linux/Ubuntu using Mono and MonoDevelop. This is possible for me because of that C# is an abstraction which abstracts away the differences between the different Operational Systems, CPUs, Graphic Cards and so on. I tend to think of JavaScript the same way as the Operational System. Application Developers should not have to worry which browser-quirks they need to hack together and so on just like I don't have to worry about the differences between Microsoft Windows and Linux/Ubuntu because of that the Mono Team has already abstracted away that difference for me.

Ra-Ajax is a Managed Ajax library. We believe that we have abstracted away JavaScript for you completely within Ra-Ajax and that there is no need for you to think of the differences between FireFox 3.x and Safari 3.x and so on. We have already done that job for you!

By completely abstracting JavaScript away, your apps will be:

  • More secure, no business logic code on the client side.
  • Easier to maintain, no more "browser quirks" for you.
  • Easier to optimize, it's easier to optimize a library than "User Code".
  • More browser compatible, *WE* get the browser problems.
  • Faster and more responsive, ~20KB of JS in Ra-Ajax.
  • Maintained by happy developers (you) ;)

By using Ra-Ajax you no longer have to worry about JavaScript and you can just develop in C#, VB.NET and ASP.NET on the server as you're used to. So from being an "application language" JavaScript has effectively been reduced to the View in a Model View Control (MVC) application.

Note that you *can* still combine JavaScript if you wish with Ra-Ajax. You might come to a place where you would like to combine JavaScript with Ra-Ajax or create your own Ajax Extension Controls. Or maybe you're just one of those MooTools or jQuery lovers which cannot possibly even consider completely getting rid of those toolboxes. But this is YOUR CHOICE and JavaScript is an OPTION when using Ra-Ajax.

BTW, Ra-Ajax could always use an extra pair of hands on development, if you're a JavaScript guru ;)

It took us 30 years before we could completely eliminate the need to do Assembly Programming, I have no believe in that Ra-Ajax will overnight completely eliminate the need to do JavaScript. But my dream is to make the JS insertion point so completely abstracted away that 95% of all applications can be developed completely blindfolded by people who doesn't even know what closures are...

But if Ra-Ajax succeeds, maybe you would very rarely have to resort to JavaScript and deal with headaches like browser compatibility, JavaScript bugs, security issues and so on. Instead you could focus all of your energy on your domain problems instead of having to fiddle with the "Assembly Programming Language of the 21st Century"...

PS!
These samples are written so that they make a lot of sense to read for reference purposes in a sequential manner. Meaning you can just read every piece of text on all our samples and then click the link at the bottom everytime you finish a page. If you're ready to do this then click the link below to go to our next Ajax Sample.

On to "Flexible Ajax Event System"...

Copyright 2008 - 2009 - Ra Software AS. Ra-Ajax is Open Source (LGPL) and free of charge to use. All the content (written text) at this webpage is licensed under the GFDL.