Sunday, February 14, 2010

ViewModels in ASP.NET

I got a couple of questions about ViewModels in ASP.NET; and my conscience has stirred me to action. I was aiming to finish the immensely cool  project that we call GaffrServer and I want to use the ASP.NET viewmodels to make that happen.

Side note on what GaffrServer is: Imagine that you prototype in using the upcoming Application WPF framework WECPOF (oh I just love inventing code names for our projects: WECPOF - ECO + WPF – get it?), and you want persistence. You can write to a XML file, or set up a database… But you will also be able to connect to GaffrServer – GaffrServer is cloud service that you upload your model to, then you get back an url that is the up and running server side persistence mapper with the synchronization service running – WOW! I WANT IT NOW.

Anyway the GaffrServer project is sort of dragging its feet so I am better of just showing ASP.NET ViewModels.

I wrapped up a sample that looks like this:



Notice the derived attributes on OrderItem and Order:

   1: CostForRow = (self.Quantity*self.Article.Cost)+(self.Quantity*self.Article.Weight*self.Order.DeliveryType.CostPerKiloGram)
   3: TotalCost = self.OrderItem->Collect(a|a.CostForRow)->sum()

(Note that the TotalCost actually use the derivation in CostForRow – super cool imho)

Then I did a ViewModel:


I know some of you might initially frown at the complexity, but trust me, you just click away and use the suggested columns that are available on the context menu – I seldom have a specific plan when I start – I think and do at the same time. That is the hallmark of a tool that is helping you…

The basic idea was to fill in an order, add OrderLines, set the correct Article on the OrderLine, see the price per row, and the total price, taking into account what delivery type you use…

There you go, a neat little list of requirements so easily said – and easily implemented.

I created a ECO ASP.NET application from the ECO Solution Wizard, Added the scriptmanager and an UpdatePanel to get Ajax behavior.

Then I add the ViewModelASPNET component, hook it up to the EcoSpaceManager, and tell it to use ViewModel ViewModelOrder:


I need to write some code to get test data and to hook up the ViewModelASPNET control to an order:

   1: private void Page_Load(object sender, System.EventArgs e)
   2: {
   4:     if (!Page.IsPostBack)
   5:     {
   6:         Order order;
   7:         if (EcoSpace.GetEcoService<IExtentService>().AllInstances<Order>().Count == 0)
   8:         {
   9:             order = InitSomeTestData();
  10:         }
  11:         else
  12:             order = EcoSpace.GetEcoService<IExtentService>().AllInstances<Order>()[0];
  13:         ViewModelASPNET1.SetObject(order);
  14:     }
  15: }
  17: private Order InitSomeTestData()
  18: {
  19:     Order order=new Order(EcoSpace);
  20:     order.CustomerName = "SomeName";
  21:     order.CustomerAddress = "SomeAddress";
  22:     order.DeliveryType = new DeliveryType(EcoSpace) { Name = "UPS", CostPerKiloGram = 20.5 };
  23:     new DeliveryType(EcoSpace) { Name = "Schenker", CostPerKiloGram = 19.5 };
  24:     new DeliveryType(EcoSpace) { Name = "DHL", CostPerKiloGram = 29.5 };
  26:     new Article(EcoSpace) { Name = "Knife", Cost=127.5, Weight=0.25 };
  27:     new Article(EcoSpace) { Name = "Vobbler", Cost = 17.1, Weight = 0.15 };
  28:     new Article(EcoSpace) { Name = "Fishing rod", Cost = 527.5, Weight = 1.05 };
  30:     EcoSpace.UpdateDatabase();
  31:     return order;
  33: }

I also must init the viewmodels before they are used:

   1: protected void ScriptManager1_Init(object sender, EventArgs e)
   2: {
   3:     ViewDefinitionsInApplication.Init(EcoSpace);
   5: }

Then I get something that looks like this:


Notice the crazy style on CostForRow, the style on TotalCost and on Selected orderitem – I get these by providing a css stylesheet that has styles using the names I set in the ViewModelColumns StyleRef property…

As you change deliverytype or anything else the TotalCost will be updated on the next postback.

In this demo I chose to use the setting ViewModelASPNET.PostbackOnComboboxChange="true"
I also chose to use the setting ViewModelASPNET.GridSizeFixedWithScrollbar="True"

The bits to run this is in the eco build after this date, it is in the demos called EcoASPNETWithViewModel


Anonymous Anonymous said...


February 15, 2010 at 6:11 AM  
Anonymous Anonymous said...

Hans, could you please explain where to find ViewModelASPNET control?
Thank you,

April 11, 2010 at 8:26 AM  
Blogger Hans Karlsen said...

In Eco5 the ViewModel components for are enclosed in the demos directory: EcoASPNETWithViewModel\CodeFromEcoWebDir\ECO.ASPNET.ViewModel

Add the project ECO.ASPNET.ViewModels.csproj from this location to your solution, build, and check the toolbox...

April 11, 2010 at 10:29 AM  
Anonymous Anonymous said...

guest00: Thank you!

April 11, 2010 at 12:06 PM  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home

Contact Us | Terms of Use | Privacy Statement © 2009 CapableObjects