Nucleo Presentation and AJAX

In continuing the series on the Nucleo MVP framework, we're going to look at how easy it may be to use AJAX.  Like the web services proxy generation to the server-side web server, the Nucleo MVP currently supports limited AJAX proxy support (with more support to come).  Using the Nucleo.Web.MVP framework, the project and the BaseWebPresenter presenter class, a client-side proxy can be generated to call server-side static methods first by adding the following attribute:

 [PresenterAjax(EnableWebMethods = true)]
public class AjaxCallbackPresenter : BaseWebPresenter<IAjaxCallbackView>

The EnableWebMethods setting triggers a look for the [PresenterWebMethod] attribute on a static method.  The process would find the following two methods:

 [PresenterWebMethod]
public static void AddItem(string item)
{
 List<string> items = HttpContext.Current.Cache.Get("Items") as List<string>;
 if (items == null)
  items = new List<string> { };

 items.Add(item);

 HttpContext.Current.Cache["Items"] = items;
}

[PresenterWebMethod]
public static List<string> GetItems()
{
 List<string> items = HttpContext.Current.Cache.Get("Items") as List<string>;
 if (items != null)
  return items;

 return new List<string> { "A", "B", "C", "D", "E" };
}

The PresenterWebMethod attribute points these two methods as methods to be proxied in client-side JavaScript.  Right now, the methods have to be static; though, I am working on adding to the process the ability to talk to instance methods too.  At runtime, the n$.Presenters collection contains our AJAX presenter, and renders a proxy for the two methods, AddItem and GetItems.  We can see this in the works through the following proxy:

n$.Presenters["AjaxCallbackPresenter"] = (function() {
return {
 AddItem: function(item, successCallback, failedCallback) { .. },
 GetItems: function(successCallback, failedCallback) { .. }
};
})();

The proxy makes a web request to a handler that invokes the corresponding presenter on the server, which happens the following way:

 n$.Presenters["AjaxCallbackPresenter"].GetItems(function (response) {
       $get("<%= lblOutput.ClientID %>").innerHTML = response.data.toString();
});

 n$.Presenters["AjaxCallbackPresenter"].AddItem($get("<%= txtValue.ClientID %>").value, function (response) {
 updateLabel();
 $get("<%= txtValue.ClientID %>").value = "";
});

And as such, we have client/server integration to the presenter, just like ASP.NET MVC or  web services/page methods.