Any Jayrockers out there?

[tedHusted]

We'd like to switch the frontend of our ASP.NET applications over to cross-platform AJAX.

To get started, we're doing a spike using an example application that demonstrates key aspects of our typical workflows. We've been using Jayrock for JSON-RPC, and, it, well, rocks!

We got off to a good start with Dojo, but we'd also like to take the Yahoo UI Library and the YUI-EXT for a spin. Our Dojo/Jayrock channel works great, but our initial stab at a YUI channel isn't.

Dojo channel (works):


function dojo_channel(call)
{
var bindArgs = {
url: call.url+'?rpc',
error: av_error,
method: "POST",
mimetype: "text/json",
handle: call.callback,
postContent: dojo.json.serialize(call.request)
};
var req = dojo.io.bind(bindArgs);
dojo.event
return req;
}



YUI channel (doesn't work):


function yui_async(url, request, callback)
{
return YAHOO.util.Connect.asyncRequest("POST", url,
{
success : function(o)
{
if (typeof(callback) !== "function")
return;

callback(JSON.eval(o.responseText));
},

failure : function(o)
{
if (typeof(callback) !== "function")
return;

callback({ xmlHTTP :o });
}
},
"JSON-RPC=" + encodeURIComponent(JSON.stringify(request)));
}

function yui_channel(call)
{
return yui_async(call.url, call.request, call.callback);
}


We cribbed both from the Jayrock list, but no one there seems to know why the YUI channel isn't working for us.

The Dojo version works great, but the YUI version doesn't seem to be returning a payload. (Though, I'm not sure since under FireBug I can't find the payload in either version.)

The server-side method is firing, and it looks like the response handler is invoked, but the data is not making it to the controls. Neither "success" nor "failure" in the YUI channel seem to be invoked. The code falls straight through to the JSON-RPC line, which I believe means the response text is never evaluated. It's not clear to us what the success and failure labels are suppose to be doing, since it doesn't look like a complete statement. (It's code we cribbed from another post.)

Thoughts?

TIA, Ted.

[mdissel]

I did have a quick look at Jayrock, but didn't had the time to fully evaluate this..

I'm also evaluating AjaxPro, the author of AjaxPro posted that he's also using (yui)Ext and will post some samples somewhere this week (see google group ajaxpro)


Both libraries seems to do the same.. My goal is to fully integrate one of them with Ext (updatemanager / json results / formUpdate / etc. ) so i can drop all my postbacks in the pages and switch to ajax-based communication to the .NET backend..

I think the solution to integrate them is the createSequence() function..

http://www.yui-ext.com/forum/viewtopic.php?t=2661&highlight=createsequence

Please share your solution (i will as well if i have time to investigate more)

Thanks

Marco

[brian.moeskau]

I have never used Jayrock, but I do use AjaxPro with Ext flawlessly. Here is the general pattern I use:


update : function(e, myObj) {
var successCB = function(o){
// success
};

var failureCB = function(o){
// error
};

YAHOO.util.Connect.asyncRequest('POST', 'myfile.aspx'+getQueryString(myOBj), {
success: successCB,
failure: failureCB,
scope: this
});
},

[mdissel]

The sample your posting seems to be "just" posting your object to the querystring and read the querystring insde the aspx file... what i mean is direct calling the [AjaxProMethod] methods from Ext, AjaxPro will handle the conversion of the all the (send/received) parameters/objects..

For example like this:

var chooser;
var insertImage = function(data){
this.dom.src = data.url;
};
var choose = function(img){
if(!chooser){
chooser = new ImageChooser({
url: loadImages,
params: {bedrijfID: 1},
width:515,
height:400
});
}
chooser.show(this, insertImage.createDelegate(this));
};

getEl('Image1').on('click', choose);
function loadImages(){
YAHOO.util.Connect.initHeader("x-ajaxpro-method", "LoadImages");
return "ajaxpro/Test.WebForm1,Test.ashx";
}


LoadImages is a server-side function that's returing an array of .Net objects converted to JSON

... using the ImageChooser sample from Ext...

As you can see i currently used a function to construct the url, because i've got no idea how to pass an extra header inside the UpdateManager.Load(..)

ps. an extra hack is the params parameter to force a POST (with 0.4x Ext code)

ps2. i had to change the JSON result from AjaxPro, it's adding two extra characters that the Yahoo json decode doesn't like.. the author of AjaxPro is aware of this and will come with an update..

Thanks

Marco

[tedHusted]

Please share your solution (i will as well if i have time to investigate more)


Jayrock is a JSON-RPC implementation. Essentially, you can define a ASHX handler class to manage business logic calls, and Jayrock handles all the serialization and deserialization transparently. We got it working with Dojo right away (because the example from the list worked), but not so much YUI or Prototype (because the example didn't work for us).

In terms of a HelloWorld application, we have this

HelloWorld.ashx



<%@ WebHandler Class="JayrockWeb.HelloWorld" Language="C#" %>

namespace JayrockWeb
{
using Jayrock.JsonRpc;
using Jayrock.JsonRpc.Web;
public class HelloWorld : JsonRpcHandler
{
/// <summary>
/// Simple method to return ""Welcome to Jayrock!" greeting.
/// </summary>
/// <returns>"Welcome to Jayrock!"</returns>
[ JsonRpcMethod("greetings") ]
public string Greetings()
{
return "Welcome to Jayrock!";
}
}
}


Then to pop up a "Hello World" alert box, you can just do this:



<script type="text/javascript">

window.onload = function()
{
HelloWorld.rpc.greetings(function(type, data, evt) {
alert("yui async:" + data.result)
}).call(yui_channel);

}

</script>


That is, if the YUI channel were working :(

On the ASHX side, your methods can accept and receive whatever types you like, and Jayrock does all the conversion. It's very sweet, and, given a working channel, I don't see how it could be simpler!

In YUI terms, given a handler method in an "EmployeeDataService.ashx" class



[ JsonRpcMethod() ]
public DataRowCollection GetEmployeeRows()
{
return GetEmployeeSet().Tables[0].Rows;
}


We could call it asychronously from a script like this:



var employeeDataModel;

function EmployeeDataModel_Result(type, data, evt)
{
employeeDataModel = new YAHOO.ext.grid.DefaultDataModel(data.result);
}
function EmployeeDataModel_Load()
{
EmployeeDataService.rpc.GetEmployeeRows(EmployeeDataModel_Result).call(yui_channell);
}


Click. Done.

I've another thead about this open on the Jayrock list:

* http://groups.google.com/group/jayrock/browse_thread/thread/e28a7a1720719638/#

Does AjaxPro support calling C# methods through RPC in this way (or a similar way)?

-Ted.

[tedHusted]

I have never used Jayrock, but I do use AjaxPro with Ext flawlessly. Here is the general pattern I use:


What does the aspx file look like?

With Dojo, we haven't been using any ASPX at all. We use a Jayrock ASHX file to access the business logic via asych JSON RPC calls, and the rest is straight-up HTML, JavaScript, and CSS.

-Ted.

[mdissel]

Does AjaxPro support calling C# methods through RPC in this way (or a similar way)?


Yes it does.. see these samples. AjaxPro can also create javascript functions for all the server side functions. The javascript functions transparently call the server side

http://www.ajaxpro.info/

Thanks

Marco

[tedHusted]

The sample your posting seems to be "just" posting your object to the querystring and read the querystring insde the aspx file... what i mean is direct calling the [AjaxProMethod] methods from Ext, AjaxPro will handle the conversion of the all the (send/received) parameters/objects..

If we're talking about my "EmployeeDataModel" example, then, yes, that's exactly what my example does, only Jayrock may be handling more of the plumbing that Ajax Pro.

Or, at least it would be, if I could get the "yui_channel" to work!

* http://groups.google.com/group/jayrock/browse_thread/thread/e28a7a1720719638/#

-Ted.

[brian.moeskau]

The sample your posting seems to be "just" posting your object to the querystring and read the querystring insde the aspx file...
You are correct -- I realized that after re-reading my post :) Of course, my AjaxPro code is pretty meaningless as there is even less to see:


getEvents : function(e, date) {
var callback = function(resp){
if (resp.error){
// error
}
else {
// success
}
};

MyHomePoint.Web.App.Sandbox.GetEvents(date, callback.bind(this));
},

AjaxPro server bindings are implemented through handlers (ashx files), but the server side business logic can be wherever is appropriate. I suppose handlers would work, I use aspx files as "handlers" just because it's convenient to do so, and because I have access to all the expected context objects.

The aspx code looks like this:


[AjaxPro.AjaxMethod()]
public Events<Event> GetEvents(DateTime date)
{
// whatever business logic
}
The returned object is automatically converted to JSON for me so that I get back a nice js object, which I assume Jayrock does too. Really could not be simpler than that. But again, that doesn't help you with the Jayrock syntax unfortunately :(

[tedHusted]

Does AjaxPro support calling C# methods through RPC in this way (or a similar way)?


Yes it does.. see these samples. AjaxPro can also create javascript functions for all the server side functions. The javascript functions transparently call the server side

http://www.ajaxpro.info/


Thanks, Marco. I'm trying it now ...

-Ted.

[mdissel]

getEvents : function(e, date) {
var callback = function(resp){
if (resp.error){
// error
}
else {
// success
}
};

MyHomePoint.Web.App.Sandbox.GetEvents(date, callback.bind(this));
},

I'm trying to integrate the above GetEvents into the UpdateManager, so that you can implement a render function that will handle the result (or error) (and use all the current built-in render function from Ext), see my sample in earlier post

Hopefully Michael (the author of AjaxPro) will come with some changes / samples with his AjaxPro library together with Ext :wink:

Thanks

Marco

[tedHusted]

I loaded the AjaxPro template and created a AjaxPro website with the example files. (The website is a mess, but the template is excellent!)

I see where we can call C# methods on an ASPX codebehind from a JavaScript function and have those methods run asyncronously.

But, can we also call AjaxPro JSON RPC from a plain HTML page, that doesn't know anything about .NET?

-Ted.

[brian.moeskau]

Not sure exactly what you mean Ted. My pages know absolutely nothing about .NET. They are plain HTML pages that call the JS code I pasted above. All the RPC magic happens via the javascript that AjaxPro injects behind the scenes, but there is no need for anything on the client to know anything about the server other than the names of the methods to call.

[tedHusted]

Not sure exactly what you mean Ted. My pages know absolutely nothing about .NET. They are plain HTML pages that call the JS code I pasted above. All the RPC magic happens via the javascript that AjaxPro injects behind the scenes, but there is no need for anything on the client to know anything about the server other than the names of the methods to call.

That's how Jayrock works too.

I don't mean to be dense, but all the AjaxPro examples seem to be aspx pages.

How does AjaxPro know to inject a JavaScript into a HTML page "behind the scenes"? They shouldn't be any "behind the scenes" with a HTML page. Is there a AjaxPro script that is included, as we do for Jayrock?

-Ted.

[brian.moeskau]

If you're referring to the examples on the AjaxPro site, it's unfortunate that he uses aspx pages in them. I think he's just doing that out of convenience, but you'll notice that there is no page postback ever happening -- he's just using Visual Studio because it's easy. Yes, you can use plain, vanilla HTML with no problem -- that's what I'm doing.

When I say "behind the scenes" that's a poor choice of words -- I just mean that AjaXPro automatically injects script into the rendered page that you will never see (unless you view source on the output) or need to care about. This works via .NET server-side handlers. When you set up AjaxPro, you register it's type library to be handled by a specific handler, so that when the server receives a request beginning with a path of ajaxpro/ it gets mapped to a handler which responds with a set of javascript files that include type definitions for all of your objects and the relevant plumbing code to make the async posting work. You can see how this is setup by looking at what gets added to web.config:


<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
So again, there is actually a lot of stuff being created that handles all the communication and type marshalling, but as the developer, you never really see any of it. You just add the proper attributes on the server side, call the proper method names on the client, and everything just works.

[tedHusted]

Thanks Briain. That's very helpful!

-Ted.

[tedHusted]

We did sort out the problem with my orignial Jayrock code, and it's working fine with YUI now.

For details, see the Jayrock thead.
* http://groups.google.com/group/jayrock/browse_thread/thread/e28a7a1720719638/#

-Ted.