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:

Code Snippet
  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:

Code Snippet
  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;
  32. }

I also must init the viewmodels before they are used:

Code Snippet
  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

This entry was posted in ViewModel, WECPOF, Xaml. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.