Edit on Github

Introduction

DotVVM is a UI framework that lets you to build ASP.NET Core (or old ASP.NET) websites and applications using the Model-view-viewmodel pattern.

DotVVM consists of a server-side part (which integrates in the ASP.NET infrastructure) and a client-side part based on Knockout JS which creates the MVVM experience in the web browser.

The framework includes a set of built-in components (also called controls), and offers an extension for Visual Studio 2022 and 2019 that gives syntax highlighting, IntelliSense, refactorings and code fixes, error checking, and other functions.

Use-cases for DotVVM

There are many frameworks for web UI that work with ASP.NET Core. What are the top use-cases for DotVVM?

Building apps with MVVM pattern

DotVVM simplifies building enterprise applications, admin dashboards, Intranet portals, CRMs, ERPs, and other applications commonly referred as line of business applications.

In general, DotVVM helps the most in applications which contain:

  • data grids
  • forms with many fields, complex validation and business logic
  • pages with multi-step wizards, modal dialogs, or other “desktop-like” UI components.

Thanks to the Model-view-viewmodel approach, it is easy and convenient to build these kinds of experiences.

DotVVM also helps with delivering the data from the server to the browser without the need to build and maintain REST or gRPC APIs — the data loaded in the viewmodel are transferred to the browser transparently.

There is also a community extension called DotVVM AMP which can generate AMP version of pages automatically, which can increase the site visibility in search engines and decrease the page load times.

See the Quick start: Create a new project chapter for more info.

If you are not sure whether DotVVM is a good choice for your project, ask us on our Gitter chat. We will be happy to help you with the decision.

Modernizing legacy ASP.NET applications

DotVVM can also be used to incrementally modernize old ASP.NET-based applications and migrate them to the latest versions of .NET.

DotVVM supports both ASP.NET Core and old ASP.NET (.NET 4.7.2 and newer). It can run in the same process side-by-side with other frameworks such as ASP.NET Web Forms.

DotVVM can be installed into an existing ASP.NET Web Forms application and used to replace ASPX pages with their DotVVM equivalents one by one. During the process (which can take weeks or even months), the application will still work so the developers can fix bugs and implement new features while modernizing the code base at the same time.

Most of the code (business logic, data access, integrations of other systems and so on) won't need significant changes, and after all dependencies on ASP.NET Web Forms and System.Web are replaced with DotVVM, the project can be switched to the newest version of .NET and ASP.NET Core.

The migrated project will use DotVVM, but will be able to run on Linux or in containers, and take all the advantages from the features of the new .NET platform. When compared to frameworks that ships with ASP.NET Core (Blazor, ASP.NET Core MVC or Razor Pages), DotVVM is on par in most of the areas, and offers a similar speed of the development.

See the Quick start: Add DotVVM to existing app chapter for more info.

Anatomy of a DotVVM page

Every DotVVM page consists of two files — the view and the viewmodel. The view describes the content and structure of the page while the viewmodel maintains the page state and responds to actions made by users.

View

DotVVM uses an extended HTML syntax called DotHTML to define views.

@viewModel DotvvmDemo.CalculatorViewModel, DotvvmDemo
    
<p>
    Enter the first number: 
    <dot:TextBox Text="{value: Number1}" />
</p>
<p>
    Enter the second number: 
    <dot:TextBox Text="{value: Number2}" />
</p>
<p>
    <dot:Button Text="Calculate" Click="{command: Calculate()}" />
</p>
<p>
    The result is: {{value: Result}}
</p>

DotHTML extends classic HTML syntax with the following constructs:

  • Directives — e.g. @viewModel DotvvmDemo.CalculatorViewModel, DotvvmDemo
  • Data-binding expressions — e.g. {value: Number1} or {command: Calculate()} in the sample above
  • DotVVM controls — e.g. <dot:Button Text="Calculate" />

When users of the web application navigate to the page, DotVVM translates the DotHTML markup to plain HTML syntax which can be displayed by the browser.

DotHTML files usually have the .dothtml extension. There are special kinds of views — Master pages or Markup controls — which are using different file extensions, but they are still using DotHTML syntax.

See the DotHTML markup chapter for more info.

Viewmodel

The viewmodel is a C# class with public properties representing the state of the page, and public methods handling actions triggered by users.

In contrast to other MVVM frameworks, viewmodel properties don't have to implement INotifyPropertyChanged — they can have just default getters and setters.

using System;
    
namespace DotvvmDemo 
{
    public class CalculatorViewModel 
    {
            
        public int Number1 { get; set; }
            
        public int Number2 { get; set; }
            
        public int Result { get; set; }
            
        public void Calculate() 
        {
            Result = Number1 + Number2;
        }
    }
}

In the example above, when a user clicks a button in the page, the Calculate method is called. It can read or modify the state of the page via viewmodel properties.

See the Viewmodels chapter for more info.

Data-binding

The viewmodel properties are bound to controls in the view using the data-binding expressions:

<dot:TextBox Text="{value: Number1}" />

The data-binding works in both ways by default:

  • Whenever the value of the property changes, the control will be updated accordingly.
  • Whenever the user changes the value in the control, the viewmodel property will be updated accordingly.

See the Data-binding chapter for more info.

Page lifecycle

When a user visits the page, DotVVM will translate the DotHTML syntax in plain HTML with Knockout JS data-bind expressions.

<!-- DotHTML markup -->
<dot:TextBox Text="{value: Number1}" />

<!-- rendered output -->
<input type=text data-bind="value: Number1" />

DotVVM also serializes the viewmodel in JSON and embeds it in the page, together with scripts required for DotVVM to work.

Thanks to this, the page will have all the state information it needs without the need to build any API. The HTML and data the page needs will are delivered to the client in one HTTP request.

User interactions

When the user interacts with controls in the page, all changes are written into the viewmodel representation in the browser (stored in Knockout observable objects).

For example, if the user enters some value in the TextBox control, a corresponding property in the viewmodel is updated.

If the user clicks on a button, a method in the viewmodel needs to be called to handle such action. DotVVM takes the viewmodel and posts it to the server (serialized as JSON, using an AJAX call).

DotVVM runtime on the server creates a viewmodel instance, populates it with the data sent by the client, and invoke the desired method. All changes made to the viewmodel state are serialized and sent back to the browser which applies them to the viewmodel (the controls are updated through Knockout JS data-bindings without the need to reload the page).

Since sending the entire viewmodel to the server can be inefficient, DotVVM also offers different ways of calling methods on the server and updating parts of the viewmodel.

See the Respond to user actions chapter for more info.

See also