DotVVM is an ASP.NET framework that lets you build line-of-business applications and SPAs without writing tons of JavaScript code. You only have to write a viewmodel in C# and a view in HTML. DotVVM will do the rest for you.
DotVVM brings full MVVM experience and it uses KnockoutJS on the client side. It handles the client-server communication, validation, date & time formatting on the client side, SPAs and much more.
It is open source, it supports both OWIN and ASP.NET Core and it runs on .NET Framework, .NET Core and Mono.
It also offers a free extension for Visual Studio 2015 and 2017 with IntelliSense and other useful features which make the development really easy and productive.
Info: DotVVM for Visual Studio PRO v1.1.90.0 is compatible with Visual Studio 2017 v15.6 and newer.
The Views in DotVVM use HTML syntax with controls and data-bindings.
<div class="form-control">
<dot:TextBox Text="{value: Name}" />
</div>
<div class="form-control">
<dot:TextBox Text="{value: Email}" />
</div>
<div class="button-bar">
<dot:Button Text="Submit" Click="{command: Submit()}" />
</div>The ViewModels are plain C# objects. You can call public methods from the View.
public class ContactFormViewModel
{
public string Name { get; set; }
public string Email { get; set; }
public void Submit()
{
ContactService.Submit(Name, Email);
}
}You just need to know C#, HTML and CSS. For most scenarios you don't have to write any JavaScript code. If you are wondering what is going on, see the "How Does it Work" section below.
- Many built-in controls
- Advanced validation rules integrated with .NET data annotation attributes
- Support for .NET cultures, number & date formats and RESX localization
- SPA (Single Page App) support
- User controls
- MVVM with testable ViewModels and IoC/DI support
- Visual Studio integration with IntelliSense
- OWIN and ASP.NET Core support
- DotVVM Dynamic Data
- Bootstrap for DotVVM - more than 40 controls that make using Bootstrap easier and your code much cleaner
- DotVVM Business Pack - Enterprise ready controls for Line of business web apps
-
Install the DotVVM for Visual Studio extension.
-
Read the documentation.
DotVVM is no magic, so let's have a look at how it works. Or at least how would a simplified core work.
When the page is requested, DotVVM will process the dothtml markup into a control tree - a tree made of DotvvmControl instances which correspond to the structure of dothtml. In the meantime, your ViewModel is initialized so data bindings can be evaluated on the server. Then, the page is "rendered" to HTML with knockout data-bindings - each DotvvmControl handles the rendering of its properties and can decide if the data bindings should be evaluated on the server or translated to a Javascript expression (or both). The ViewModel is serialized to JSON and included in the page.
On the client side, after the page is loaded the ViewModel is deserialized and used as a knockout model. When you touch the page (edit a textbox or so) the changes are assigned back to the knockout model - it always represents the page's current state.
We have two types of commands in DotVVM - the powerful and expansive command and its lighter counterpart staticCommand.
When a command is invoked a "postback" is dispatched - the entire ViewModel is serialized and sent to the server. Here, the page is created again, ViewModel is deserialized, the expression in the binding is invoked, the ViewModel is serialized and sent back to the client. Note that you can control which parts of the ViewModel are sent using the Bind attribute.
A staticCommand is slightly different as the binding expression is not invoked on the server but instead is translated to Javascript and invoked client-side. Only when you use a function that is not translatable to JS and is marked with an AllowStaticCommand attribute the request to the server is dispatched. However, it is not the full postback - it will only contain the function's arguments. On the server, the function is going to be invoked (with the deserialized args) and only its result will be sent back to the client. When the response returns, the rest of the expression will be evaluated. If you'd have a look at the JS generated from your staticCommand, you would find an ugly expression that invokes some function on the server and processes the results in the callback.