Advanced RadXmlHttpPanel

One of the best telerik controls right now is the RadXmlHttpPanel…well best if you want good quick client-side functionality.

The biggest problem with Microsoft Ajax is that it’s not REAL ajax, it’s Asyc-Javascript-And-Html.  Use firebug and have a look at the values posted back to the server.  You get all the bloat that comes with standard asp.net (viewstate, html, etc).

The cool part about this telerik control is that it’s REAL ajax.  It’s like a quick way to do a jQuery ajax callback…Post up a single string and the control returns whatever you want.  The only complaint is that the documentation for the control is lacking; they don’t list client-side functions.

Llets start with a sample, put a RadXmlHttpPanel on your page somewhere.

What happens here when the page loads is you see nothing…there’s an empty div with the class name of “xmlHttpResult”.  We need to wire up the clientside events to RETURN data into the div…think of the control as a placeholder for returned data.

So sending data to the control is as simple as getting a reference to the clientside object and calling “set_value(‘my value’);”!  So by default the easiest thing to insert in a string, delimited if you want…however the more slick method (and less errorprone) is the following Javascript Serializer.

Ok so this is my code from an external .js file which I use to send the values up.  The panel object is a reference to the RadXmlHttpPanel.  You can either use jQuery to find it by partial ID (since the RadControls dont yet fully support ClientIDMode Static), or you can plop a function in your aspx page to return you the clientID of the panel.

Ok so the clientside is done…we’re sending values, now we need to make the service to receive the data.  Look up above at the WebMethodPath parameter…that’s the URL to the asmx file.  The WebMethodName is the name of the function this control will call.

THIS IS IMPORTANT:
The structure of the webmethod MUST match this signature or it will fail

[WebMethod(CacheDuration=0)]
public string CreateRequest(object context) {
    IDictionary<string, object> contextDictionary = (IDictionary<string, object>)context;
    string sentValues = ((string)contextDictionary["Value"])

The above method is how you extract a simple string, listed below is how you de-serialize an object (if you sent one up instead of a string)

public string ApproveRequest(object context) {
    IDictionary<string, object> contextDictionary = (IDictionary<string, object>)context;
    string sentValues = ((string)contextDictionary["Value"]);  //Get the String
 
    JavaScriptSerializer serializer = new JavaScriptSerializer(); //Initalize the Serializer
    Object value = serializer.Deserialize(sentValues, typeof(Object)); //Convert to Object
    Dictionary<String, object> values = (Dictionary<string, object>)value; //Convert back to Dictionary
 
    Dictionary<string, object> inputs = new Dictionary<string, object>();
    inputs.Add("InApprovalID", values["ApprovalID"].ToString());
    inputs.Add("InStatusID", values["StatusID"].ToString());
    inputs.Add("InComments", values["Comments"].ToString());
 
    ApprovalCommand wf1 = new ApprovalCommand();
 
    IDictionary<string, object> outputs = WorkflowInvoker.Invoke(wf1, inputs, TimeSpan.FromMinutes(2));
     
    return serializer.Serialize(outputs);
}

So there you go, this is the full WebMethod.  Notice that I want my workflow to return me a bunch of outargs, and I’m just re-using the Serializer to convert them back into a string which I can then deserialize in my javascript…SWEET!

If you want to return a message back to the control to lets say, close a RadWindow on callback, then you want the “Ending” event.  The documentation right now doesn’t list this, but this is the way to get the returning value

function newRequestCallbackEnding(sender, args) {
    var result = args.get_content();  //get_content gets the html or whatever you sent back
    if (result == "success") { //Value sent back from the service string
        RefreshParentPage(); //impliment closing of the RadWindow
    }
}

NOTE

If you set the .Value property of the RadXmlHttpPanel like the code below when the page renders, the callback AUTOMATICALLY happens.  No need to do it on pageLoad or document.ready!

protected void Page_PreRender(object sender, EventArgs e){
    if (this.DateID != Guid.Empty) {
        this.RadXmlHttpPanel.Value = this.DateID.ToString();
    }
}

Happy RadXmlHttpeeing!