Calling [WebMethod]'s and postback methods with WebFu

By adding the <WebFu:ExposeWebMethodsControl runat="server" /> to your page, helper functions to call [WebMethod]'s and methods decorated with [WFJscriptMethod] will be generated on the page.

[WFJscriptMethod] decorated methods must accept two parameters object sender, EventArgs e. These parameters will be null.

Helper functions live on the global webfu.page object in JavaScript.

For example, assuming a page has three methods:

protected void MyRegularMethod(object sender, EventArgs e)
{
   //Do something ...
}
[WFJscriptMethod]
protected void MyDecoratedMethod(object sender, EventArgs e)
{
   //Do something...
}
[WebMethod]
public static string MyWebMethod(string argumentOne, int[] argumentTwo) 
{
   //Do something...
}

MyRegularMethod is ignored because it has no qualifying attribute. The following functions will be generated:
  • webfu.page.MyDecoratedMethod();
  • webfu.page.MyWebMethod(argumentOne, argumentTwo);
  • webfu.page.MyWebMethodAsync(successCallBack, errorCallBack, argumentOne, argumentTwo);

Calling webfu.page.MyDecoratedMethod() will cause a postback to occur.
In order for the C# MyDecoratedMethod to fire, in Page_Load you must call the WFPageUtilities.CallJSMethod() method. For example:
protected void Page_Load(object sender, EventArgs e)
{
   if(Page.IsPostBack) {
      WFPageUtilities.CallJSMethod(this, Request);
   }
}

CallJSMethod will not invoke a method if it is not decorated with [WFJscriptMethod], so methods must opt-in for security.

Calling webfu.page.MyWebMethod(...) function will make a synchronous AJAX call and return immediately a JSON object with a single property ("d") which contains the return value. For example:
var returnObject = webfu.page.MyWebMethod("somestring", [ 1,2,3 ]);
//Notice that the return value is on the ".d" property:
alert("Server returned " + returnObject.d);

Calling the webfu.page.MyWebMethodAsync(...) function will make an asynchronous AJAX call. successCallBack will be invoked if the AJAX call succeeded and errorCallBack will be invoked if the server returns an error.
The parameters passed to the successCallBack function are:
successCallBack(data, textStatus, jqXHR)
Where "data" is the object with the ".d" property which contains the return value.
The parameters passed to the errorCallBack function are:
errorCallBack(jqXHR, textStatus, errorThrown)
For example:
webfu.page.MyWebMethodAsync(function(data) {
   alert('Success! Server returned ' + data.d);
},
function(xhr) {
   alert('Error. The error was ' + xhr.responseText);
}, "somestring", [ 1,2,3 ]);

Manually invoking methods without ExposeWebMethodsControl

WebFu provides two helper functions to call [WFJscriptMethod]'s and [WebMethod]'s which are webfu.submitForm() and webfu.callPage().

webfu.submitForm(methodName)
Invoke a full postback, passing an extra JSMethod form variable to indicate which method the server should invoke. Call WFPageUtilities.CallJSMethod() in the codebehind on a postback to call this method automatically.

webfu.callPage(pageMethodURL, args)
Invoke [WebMethod] using jQuery $.ajax().
"data" must be a String or an object.
"args" is a 'magic' arguments object that will be passed along to jQuery's ajax function. "args" has the following properties:
  • data: String or Object. String must be in the form of a strict JSON object which must match the signature of the WebMethod. If an object, JSON2.js must be used for older browsers for JSON.stringify().
  • success: function(a,b,c) See jQuery's ajax documentation http://api.jquery.com/jQuery.ajax/
  • error: function(a,b,c) See jQuery's ajax documentation http://api.jquery.com/jQuery.ajax/

Last edited May 21, 2012 at 9:35 PM by aikeru, version 2

Comments

No comments yet.