FlexBox with ASP.Net PageMethods

Feb 22, 2011 at 11:13 AM
Edited Feb 22, 2011 at 11:16 AM
Not sure if anyone else was experiencing difficulties getting FlexBox to work with ASP.Net PageMethods, but after a few alterations we managed to get it to work.

Changes to FlexBox script (v0.96):

In the flexbox function lines 302 alter:

if (o.method.toUpperCase() == 'POST') 
  $.post(o.source, params, callback, 'json')
else
  $.getJSON(o.source, params, callback);
To (the jQuery post method doesn't appear to work with ASP.Net)
var dta = "q:'" + q + "',p:'" + p + "',s:'" + pageSize + "'";
if (o.method.toUpperCase() == 'POST') {
    $.ajax({ type: "POST",
        url: o.source,
        data: "{" + dta + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: callback
    });

}
else { $.getJSON(o.source, params, callback); }
We then also altered the callback function by parsing the response string (data.d) into an object.
var callback = function(data, overrideQuery) {
  var data = $.parseJSON(data.d);
Your page method needs to look something like:

[WebMethod]
[ScriptMethod]
public static string GetData(string q, int p, int s)
{
    StringBuilder sb = new StringBuilder();
    JavaScriptSerializer json = new JavaScriptSerializer();
    json.Serialize(DataAccess.GetResults2(q, p, s), sb);

    return sb.ToString();
}
And we created two POCO classes which is returned from our GetResults2 function (these mimic the expected clientside object):
public class FlexBoxResult
{
    public int total {get; set;}
    public FlexBoxValue[] results { get; set; }
}

public class FlexBoxValue
{
    public string id { get; set; }
    public string name { get; set; }
}
Finally, to call Flexbox ensure you specify the following attribute:
method: 
"POST"
 
I hope this is of assistance to others; perhaps this can be incorporated into the main stream?