Udooz!

So many frameworks, tools and platforms available for us to develop RIA applications.  One such framework from Gizmox is “Visual Web GUI” which provides unified approach to develop web applications using ASP.NET platform with “Empty-Client” model. 

The catchy point is you do not need to know too much about underlying technology.  You can also port WinForm applications into web.

You could be a win form developer or web developer.

How does it different from others?

Since I did not fully evaulate this platform, I can simply say “this framework clearly segregates the responsibilities between browser and server”.  Server does business processing and browser handles user interaction.  Looks very adhoc and no different.  Gizmox is termed this as “empty client”.

Empty Client

We are known and worked with “Thick”, “Thin” and “Fat” clients.  Empty?  Points taken from their web site is

The Empty Client approach combines for the first time on web, the best of both desktop and web environments. An optimized protocol makes server side power, typically achieved with “Thin client” available for data centric web applications, with “Thick Client” scalability and performance.

They assured that this framework lets developers create desktop-like Web applications in no time using their existing skill sets with no re-learning, no retooling, and without the traditional complexities of the web. It also eliminates traditional security concerns, by facilitating literally Empty clients – no open services, no data, no logic, or any other exposed security hazards are left on the client.

The server is all in their approach.  Client only captures data and send it to server, and display data from server.  Even server provides display format of the data.

This model is mainly useful in cloud computing.  However, I do not know wy making the powerful client as “dump” and overloading the server.

Visit http://www.visualwebgui.com/Developers/Introduction/tabid/556/Default.aspx for more details.
codeproject

Problem

WCF throws System.ExecutionEngineException when deserializing and consuming data contracts with IList based attributes.

Forces

• Collection is changed as immutable when using IList<T>
• Unable to convert it to List<T>
• Unable to send it back to service consumer if required

Solution

Let us define a data contract Dump which contains IList of InternalDump.

 
[DataContract]
public class InternalDump
{
    [DataMember]
    public string Part;
}

[DataContract]
public class Dump
{
    [DataMember]
    public string Name;
    [DataMember]
    public IList<InternalDump> Parts;
 

    public Dump()
    {
        Parts = new List<InternalDump>();
    }
}

I’ve declared a simple WCF service

[ServiceContract]
public interface IService1
{
    [OperationContract]
    Dump GetData(Dump d);
}
 

public class Service1 : IService1
{
    public Dump GetData(Dump d)
    {       
        return d;
    }
}

 You are noticed that GetData just returns the deserialized “d” as a return value to the consumer.  Being a .NET client, the consumer of this service as

Dump d = new Dump();
d.Name = "Roundtrip";
InternalDump id = new InternalDump();
id.Part = "Client";
d.Parts.Add(id);
 

ServiceReference1.Service1Client sc = new DumpConsole.ServiceReference1.Service1Client();
Dump sd = sc.GetData(d);

foreach (InternalDump id2 in sd.Parts)
{
    Console.Write(id2.Part);
}

At the consumer side, a new instance of Dump and InternalDump have been created, serialized and send it as input parameter for GetData.  At the service side, the probelm is when deserializing the IList<InternalDump>, WCF internally convert it into InternalDump[] which makes all the problem 1 and 2 mentioned in Forces section.

The problem is not in any of the above code, instead WCF itself.  The world’s so extensible ESB (enterprise service bus) framework assumed and convert IList<T> into T[] for platform neutral.

Unfortunately, do not know the root cause of problem 3 mentioned in “Forces” section.  The solution is not the technical one, but a guideline.

Don’t use IList<T> for the above mentioned probelms.  Instead use List<T>.

Hope WCF in .NET 4.0 will resolve this issue.

codeproject

Source code for this article can be downloaded from http://udooz.net/index.php?option=com_docman&task=doc_download&gid=2&Itemid=5

This article is continuation of Part I.  In this part, I explain the different data binding options in ASP.NET AJAX 4.0 templates.  Just a recap that I’ve consumed an ADO.NET data services to fetch AdventureWorks’s Product table records.  In this article, I explain how to update/add new record from client side.

Bindings

Template supports the following bindings:

• One-time – The expression is evaluated only once when the template rendering happen
• One-way Live Binding – The expression is evaluated and update the value, if items in the data source changed
• Two-way Live Binding – If the data source value changed, the value in the expression updated.  And if the value in the expression is updated, it will update data source also.

The below diagram depicts the binding.

In the above diagram, the red dashed arrow shows one-time data binding.  Once the data from data source has been fetched by DataView using AdoNetDataContext.  The one-way live binding has  been shown as purple shadowed arrow.  The purpose shadow here is whenever a data updated at data source, it is being updated to data view through AdoNetDataContext.  The two-way live binding has been shown as  green shadowed two-head arrow.  In this case, data context should have the knowledge about update operation on data source and provide an interface to data view to send the modified values.

The these three bindings, ASP.NET AJAX provides the following expression convention:

• {{ <data_item_name> }} – One-time (can be used on any HTML controls for example <p>{{ Name }}</p>)
• { binding <data_item_name> } – One-way if other than user input HTML controls for example <td>{ binding Name } </td)
• {binding <data_item_name> } – Two-way  if INPUT HTML controls for example <input type=”text” sys:value=”{{ binding Name }}” />)

Here, the input controls binds the values using sys:value attribute for two-way binding.

Before going into the updatable data source, let us see how can we design master-detail layout to display Product name and Product details.

Master-Detail Layout

 

<body xmlns:sys="javascript:Sys"
xmlns:dataview="javascript:Sys.UI.DataView"
sys:activate="*">
  <form id="form1" runat="server">
 
<div>
      <!--Master View-->
     
<ul sys:attach="dataview" class=" sys-template"
          dataview:autofetch="true"
          dataview:dataprovider="{{ dataContext }}"
          dataview:fetchoperation="Products"
          dataview:selecteditemclass="myselected"            
          dataview:fetchparameters="{{ {$top:'5'} }}"
          dataview:sys-key="master"            
      >
         
	<li sys:command="Select">{binding Name }</li>
     </ul>
      <!--Detail View-->
     
<div class="sys-template"
          sys:attach="dataview"
          dataview:autofetch="true"
          dataview:data="{binding selectedData, source={{master}} }">
          <fieldset>
            <legend>{binding Name}</legend>
            <label for="detailsListPrice">List Price:</label>
            <input type="text" id="detailsListPrice"
                sys:value="{binding ListPrice}" />
           
            <label for="detailsWeight">Weight:</label>
            <input type="text" id="detailsWeight" sys:value="{binding Weight}" />
           
             
          </fieldset>
          <button onclick="dataContext.saveChanges()">Save Changes</button>
     </div>
 </div>
  </form>
</body>

Selectable And Editable

An unordered list shows the master details, here the product name (line 15).   This line also indicates that the list item is selectable using sys:command=”Select”.   For maintaining master-detail or selectable item, primary key needs to be specified.  The  sys-key  property of data view refers that primary key.  In this example, I call the primary key as “master” (line 13).  Also, you can see that I’ve passed a filter option using fetchparameter property of data view (line 12).  In this example, I request the ADO.NET data service to give only top five records using its filter syntax.

Whenever an item in the master list is selected, the details view needs to be notified.  The widget for the details view and binding details should be identified using regular sys:attach=”dataview” and dataview’s data property.  In this example, dataview:data=”{binding selectedData, source={{master}} }” specifies that binding with data view with sys-key name “master”.  The fieldset is used to show set of values for a product.  Here, the list price and weight can be editable.

Once an item has been edited, this needs to be notified to the data source through data context.  The button with caption “Save Changes” specifies that whenver this button is clicked, save the items in the details view into data source through data context’s saveChanges() method.  The corresponding data source’s update option should be set on data context’s set_saveOperation().  The following JavaScript code explains this.

 

var dataContext = new Sys.Data.AdoNetDataContext();
dataContext.set_serviceUri("AWProductDataService.svc");
dataContext.set_saveOperation("Products(master)");
dataContext.initialize();

The ADO.NET Product data service’s Products(id) method is used on set_saveOperation.  An item can be updated, when Product service of ADO.NET data service is being invoked with product primary key as argument.  Here, again I’m referring master layout’s “master” sys-key as primary key of Product.

The output of the above code is

The top one is master view where Sport-100 Helmet, Red is selected and the details has been shown in the bottom page.  You can edit and update the data source.

The selecteditemclass property of data view is used to show the selected item.