Creation of a Web.API data layer

The JS controls needs some way to communicate with the data layer. For this demand several techniques does exist. For instance you could use some javascript custom properties. To use a more flexible, reusable and standardized way you could embed some Web.API service as well. The following information does describe how to do so:

Creating a Web.API project

You could think about creating a stand-alone project for the Web.API service. The embedding of such functionality within your existing XAF web application got at least one advantage though: You dont have to concern about additional security issues because the default blocking of “cross domain requests” does not allow any external requests to your data service. To concentrate on the main task for this blog (i.g. creating custom js controls within your XAF web application) we add the needed functionality to our XAF web application.


nuget Packages

For using Web.API services the web application project does need the corresponding “Microsoft.AspNet.WebAPI” packages you can add to the project via nuget:




The routing of your web application has to be enhanced to enable the communication to the controller. For doing so update the routing table in the global.asax as follows:

   protected void Application_Start(object sender, EventArgs e)
      // ...

         name: "DefaultApi",
         routeTemplate: "api/{controller}/{action}/{id}",
         defaults: new { id = RouteParameter.Optional }

POCO Elements

Doing some communication between server and client-side you should use some kind of data modelling. Using a POCO class is a good approach for this requirement:

   namespace CustomJSControl.Web.Model
      public class ChartData
         public DateTime Argument { get; set; }
         public int Value { get; set; }


Now you can add any Web.API controller logic in your application. The controller methods can load any data out of the BOM and aggregate and transform the data in any way to the specific POCO elements and return the resultset to the caller. The following code show some example:

  public class ChartDataController : ApiController
     public IHttpActionResult GetChartData()
        using (var uow = new UnitOfWork())
           uow.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

           var resultList = new XPQuery<ChildObject>(uow);
           var transformedResult = resultList.ToList().Select(sl => new Model.ChartData() { Argument = sl.DateTime, Value = sl.Value });
           return this.Ok(transformedResult);

Consuming the controller methods

From now on any client-side JS  code can consume the Web.API controller methods with something like…

.done(function (result) { …



After creating a Web.API data service lets start with the actual creation of the custom user control:

Creating a JS empowered custom control