Intersoft WebGrid Documentation
Elegant Client Binding Architecture
See Also Send comments on this topic.
Intersoft WebGrid > WebGrid Features Overview > Displaying Data > Client-side Binding > Elegant Client Binding Architecture

Glossary Item Box

WebGrid 7 relies heavily on a solid client data framework in order to perform client binding efficiently, and to support existing features in various configurations and scenarios. The following sections discuss Intersoft's client binding technology such as:

 

Client Data Object Framework

Intersoft's Client Data Object Framework can be illustrated as a lightweight, mini version of Microsoft's ADO.NET Framework. Client Data Object Framework will be further called CDOF in the following section.

CDOF includes client-side implementation of DataSet, DataTable and DataView - which acts as the backbone of all client-side data operations in WebGrid. The ISDataSet and ISDataTable represent the main data object which is then used by WebGrid for further processing such as data shaping, formatting, paging and more.

The following illustration describes the overall client binding processing in WebGrid.

 

As shown in above illustration, WebGrid doesn't process data shaping by its own - but it relies on CDOF to obtain finalized data shape, which is then processed further by VirtualRendering. This unique architecture model enables clean separation between data abstraction layer and rendering layer - making it easy to be consumed by WebGrid and other WebUI Studio family that requires client binding implementation in the future.

In addition to the overall binding process as shown above, it's also important to understand the new process model and events life cycle in WebGrid. The following information explains the client binding process life cycle in details:

 

With rock-solid foundation implemented in Client Data Object Framework, WebGrid 7 sets a new standard for "cloud"-ready application by providing comprehensive, reliable client binding platform that supports enterprise scenarios and advanced features at the same time, as well as high extensibility for future's platform and technologies.

 

Rich Client-side Data Processing

In addition to providing solid client binding platform, Client Data Object Framework (CDOF) also enables many client-side data processing which were previously difficult or not possible to be achieved.

The following lists the key features of client-side data processing:

  1. Basic string-type filter expression.
    [ContactTitle] = "Owner" and *Country+ = "USA"
  2. Filter expression on various types with group.
    (([ContactTitle+ = "Owner" or *ContactTitle+ like "sales") and (*OrderDate] > #1/1/2008# and [OrderDate] < #1/1/2009#))
  3. Number filter expression.
    [OrderAmount] > 123.45 and [OrderAmount] < 456.78
  4. Filtering out null or empty data.
    [Region] <> null and [Region] <> ""

 

 

Data Loading Mode

WebGrid 7's ClientBinding includes two type of data loading mode for client-based data service, regardless of the paging mode of WebGrid in User Interface level.

Data selection can be configured as easy as declarative property set - without requiring you to write Javascript code. For data selection to work, simply set the SelectMethod property in the ServiceMethods to the method name used for data retrieval in your data service.

Data loading modes are:

 

DataSourceSelectArguments class contains the following properties:

Additionally, a special method GetLinqFilterExpression is provided to convert ADO.NET filter expression into LINQ-compatible filter expression. This method is specifically useful for data service that used LINQ to retrieve data.

The following C# sample shows how you can easily retrieve paged Orders data by using DataContext, LINQ to SQL, and dynamic LINQ.

C# Copy Code 
[WebMethod]    
public object GetPagedData(DataSourceSelectArguments selectArguments)    
{        
   NorthwindDataContext context = new NorthwindDataContext();        
   context.DeferredLoadingEnabled = false;         

   var pagedData = context.Customers.AsQueryable();         

   // handle sorting        
   if (!string.IsNullOrEmpty(selectArguments.SortExpression))            
      pagedData = pagedData.OrderBy(selectArguments.SortExpression);         

   // handle filtering        
   if (!string.IsNullOrEmpty(selectArguments.FilterExpression))
      pagedData =  pagedData.Where(selectArguments.GetLinqFilterExpression());         

   if (selectArguments.OperationType == SelectOperation.SelectData)        
   {            
      // handle paging            
      if (selectArguments.MaximumRows > 0)                
         pagedData = pagedData.Skip(selectArguments.StartRowIndex).Take(selectArguments.MaximumRows - selectArguments.StartRowIndex);             
         return pagedData.ToList();        
   }        
   else if (selectArguments.OperationType == SelectOperation.SelectCount)            
      return pagedData.Count();         
   throw new InvalidOperationException("Unsupported operation type!");    
}

 

Transaction Operations (Insert, Update and Delete)

ClientBinding fully supports transaction operations for data service types - in the same elegant way as in data selection process.

The ServiceMethods object includes the following properties to handle transaction operations:

Similar to SelectMethod, you need to have corresponding methods in your data service which is used to handle each operation. The method name is then set to each property.

ClientBinding handles the complex serialization and deserialization process automatically. As a result, you can develop your transaction methods in an elegant way by accepting the original and new item object. For this to work, you need to set the corresponding object name in ItemTypeName property, and provide the class structure of your object in the client-side.

The following example shows how you can support update operation for Customers table in WebGrid.

First step, create the corresponding class of Customer in the client-side and set ItemTypeName property to Customer. 

C# Copy Code 
function Customer()
{    
   this.__type = "Customer";    
   this.CustomerID = "";    
   this.CompanyName = "";    
   this.ContactName = "";    
   this.ContactTitle = "";    
   this.Address = "";    
   this.City = "";    
   this.Region = "";    
   this.PostalCode = "";    
   this.Country = "";    
   this.Phone = "";    
   this.Fax = "";
}

Next, create a method in your data service to handle the update operation. This sample is using WebService as the data service and LINQ-to-SQL as the data access.

C# Copy Code 
[WebMethod]    
   public TransactionResult UpdateCustomer(Customer newObject, Customer originalObject)    
   {        
      TransactionResult result = new TransactionResult();        
      NorthwindDataContext context = new NorthwindDataContext();         

      context.Customers.Attach(newObject, originalObject);         

      try        
      {            
         context.SubmitChanges();        
      }        
      catch (ChangeConflictException conflictException)        
      {            
         result.Exception = new JsonException(conflictException);        
      }        
      catch (Exception exception)        
      {            
         result.Exception = new JsonException(exception);             
      }
      
      result.OperationType = DataSourceOperation.Update;        
      return result;    
}

Finally, set the UpdateMethod of your WebGrid to UpdateCustomer.

As illustrated in the above sample, the update method consisted of the following processes:

Similarly, the Insert and Delete operation also includes patterned method signature. The following explains the method signature of each operation.

WebGrid 7's transaction operations work best with .NET Framework 3.5 data access technologies such as LINQ to SQL and ADO.NET Entity Framework. As the above sample shows, transaction operations can be done in elegant way, hassles-free and very straightforward.

 

Batch Update Support

As if ClientBinding isn't comprehensive enough, it also includes a unique implementation of Batch Update that is provider independent - making ClientBinding the most advanced and reliable technology to address your ever-dynamic, "cloud"-ready enterprise Web 2.0 application.

WebGrid introduces SmartBatchUpdate, a major feature introduced in version 7 that revolutionizes data editing by enabling multiple editing in the client-side and then submit all changes in a single request. This new batch update feature also supports batch update operation in data service.

Similar to data transaction operations, implementing batch update in data service can be done elegantly through strongly-typed object model.

The batch update method has the following signature:
public TransactionResult <BatchUpdateMethod> (List<ClientRowChanges> changes)

The BatchUpdateMethod property is also made available in ServiceMethods object, which you can specify according to the name of web method in your data service.

When batch update feature is enabled and the client binding mode is using data service, WebGrid will automatically submit all changes by invoking the web method specified in BatchUpdateMethod.

WebGrid submit all changes in an object collection of List<ClientRowChanges>. In your data service end, you can easily loop on the provided changes collection, and perform physical update according to the modification state of each change.

The following C# sample shows how to perform batch update in WebService. The sample used LINQ-to-SQL and DataContext as the data access.

C# Copy Code 
[WebMethod]
public TransactionResult UpdateCustomers(List<clientrowchanges> changes)    
{        
   TransactionResult result = new TransactionResult();        
   NorthwindDataContext context = new NorthwindDataContext();         

   foreach (ClientRowChanges change in changes)        
   {            
      try            
      {                
         if (change.RowState == ClientRowState.Added)                
         {                    
            context.Customers.InsertOnSubmit((Customer)change.NewObject);                
         }                
         else if (change.RowState == ClientRowState.Deleted)                
         {                    
             context.Customers.Attach((Customer)change.OriginalObject);                    
             context.Customers.DeleteOnSubmit((Customer)change.OriginalObject);                
         }                
         else if (change.RowState == ClientRowState.Modified)                
          {                    
             context.Customers.Attach((Customer)change.NewObject, (Customer)change.OriginalObject);                
          }                                                                                                                                                                                                                                                                                                                 }            
      catch (Exception exception)            
      {                
         result.Exception = new JsonException(exception);                 
   
         /* set ExceptionHandled to true to suppress error message in the client side                   
             result.ExceptionHandled = true;                 
         */            
      }        
   }         

    // no errors during object attachment, ok to proceed        
    if (result.Exception == null)        
    {            
       try            
       {                
          // submit all changes in batch                
         context.SubmitChanges();            
       }            
       catch (Exception exception)            
       {                
          result.Exception = new JsonException(exception);            
       }        
    }         
    result.OperationType = DataSourceOperation.BatchUpdate;        
    return result;    
}

The batch update method works in similar way to other data operations, except it includes more information about a row change which is encapsulated in ClientRowChanges object.

The ClientRowChanges consisted of the following properties:

 

Service Events

All data operations in data service are powered with a solid, provider-based architecture that is highly extensible and scalable.

Client data services that supported by WebGrid 7 such as WebService, WcfService and AstoriaDataSource inherit the same data source provider base. As a result, these data services share the same process life cycle, same events and behaviors.

Client data services support the following events:

Each operation includes pre and post event for complete customizability. The pre event such as Selecting can be cancelled with a return false statement.

These service events are available in ServiceEvents object which is located in ClientBindingSettings.

See Also

©2012 Intersoft Solutions Corp. All Rights Reserved.