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"...