ASP.Net MVVM


MVVM tend to be a very pleasant pattern for rich internet applications. After working with Silverlight for a while I feel this pattern is a great pattern, is much easier to work in compare to MVC but has almost all of the benefits. However, the whole MVVM pattern becomes possible because there are such wonderful binding capabilities in xaml.

I was thinking about developing a website with MVVM pattern, and bringing at least some of the goodness of MVVM to web pages. It might look a bit eccentric at start, but considering all the power that ASP.Net web forms and WCF gives us, it is certainly possible and worth a try. The only real limitation is that the ViewModel code should be in JavaScrip, because it is being run on the client side. I think some real man should someday jump in GWT source code and start a similar project that compiles C# into JavaScript, so that C# developers can keep writing in C# for the client side. However, till that time all the client code should be in JavaScript.

Here is the big picture: Lets have a bunch of WCF services that return JSON objects. Same as when you work with WPF or Silverlight (but services are configured to return JSON instead of binary). On the view end, we have the normal ASP.Net web form which consist of only following controls: A XMLDataSource and a bunch of DataBound controls. All the controls in the web form are bound to the XMLDataSource. We have our View and Model handy, but the missing part of the puzzle is ViewModel and binding it to the View.

The default (and possibly optimum) for the MVVM is that ViewModel should be a flattened representation of the model. Thus, the only work here is to provide a set of JavaScript helpers to simplify following tasks:

1- Loading model from the Service (jQuery does this)

2- Binding the ViewModel JavaScript object to the XMLDataSource through Web Form client side scripts. (*The challenge)

3- Some pattern similar to INotifyPropertyChange for JavaScript. (Not too hard)

4- Some simple JavaScript data context manager to manage changes in the context and provide related update or insert commands (Lower priority)

5- Implement the Command pattern with jQuery.

6- Develop a pattern for binding nested views (Possibly a bootstrapper to load up ascx controls in AJAX placeholders).

By sorting the above problems out, we can have a pretty feasible and powerful MVVM pattern for web forms which is much nicer to implement than MVC and much more sensible than Web Forms. There would be still limitations such as  binding controls together, but we can live without them.

I am not going to start this project anytime soon, but I will be really happy if some of you take this idea and start something.

Advertisements

2 Responses to “ASP.Net MVVM”

  1. Mojam Says:

    Thanks for your advice.
    Can I have your code please?

    Sorry Mojam,
    I never finished the code 😦

  2. Eric Barnard Says:

    I completely agree with what you are saying about MVVM pattern in Javascript and ASP.NET. Some projects have been open-sourced this year that meet exactly what you are saying:

    Script# – some man did have the guts to make GWT in a C# version. Nikhil Kothari, in fact.
    http://www.nikhilk.net/ScriptSharpIntro.aspx

    Knockout – it is a JS library that allows xaml-esque binding syntax to html. It’s probably one of the fastest growing JS libraries out there right now. It is written by Steve Sanderson, another great guy on the ASP.NET team.
    http://www.knockoutjs.com

    ——–

    Interesting stuff. Thanks for sharing. With all the HTML5 stuff a really good binding engine for JS is necessary.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: