Install the extension

The extension can be installed in two ways,

Create a new project

After you have successfully installed the extension, you can create a new DotVVM project using a Visual Studio project template.

There are two templates for DotVVM,

And after you have selected a project template, DotVVM will open a modal window for setting up the application in which you can:

Basic project structure

The application’s basic configuration is in the Startup class, where services and middlewares are registered.

Usual project structure

The structure is not a strict rule. You can move your Views/ViewModels around if you want to.

ViewModels


  1. public class DefaultViewModel: DotvvmViewModelBase {
  2. public int Count {
  3. get;
  4. set;
  5. }
  6. public void Counter() {
  7. Count += 1;
  8. }
  9. }

View

  1. @viewModel DotvvmApplication1.ViewModels.DefaultViewModel, DotvvmApplication1
  2. <p>
  3. <span>{{value: Count}}</span>
  4. <dot:Button Text="Counter" Click="{command: Counter()}" />
  5. </p>

Configuration class - DotvvmStartup

Implements interface IDotvvmStartup, which contains a single method,

  1. void Configure(DotvvmConfiguration config, string applicationPath);

An instance of DotvvmConfiguration has several properties, which are used to setup routing, resources, custom controls, etc.

Routing

Is set up using the DotvvmConfiguration.RouteTable property.

Your routes can be registered in two ways,

  1. config.RouteTable.Add("Default", "", "Views/default.dothtml");
  1. config.RouteTable.AutoDiscoverRoutes(new DefaultRouteStrategy(config));
Resources

The Resources API is used to register your javascript, CSS and other files. You can accomplish that using the DotvvmConfiguration.Resources property and its Register method.

Parameters for the Register method,

If you have resources dependent on other resources, you should use the IResource.Dependencies property.

  1. config.Resources.Register("jquery", new StylesheetResource() {
  2. Location = new UrlResourceLocation("~/Content/jquery.min.css")
  3. });
  4. config.Resources.Register("bootstrap-css", new StylesheetResource() {
  5. Location = new UrlResourceLocation("~/Content/bootstrap.min.css")
  6. });
  7. config.Resources.Register("bootstrap", new ScriptResource() {
  8. Location = new UrlResourceLocation("~/Scripts/bootstrap.min.js"),
  9. Dependencies = new [] {
  10. "bootstrap-css",
  11. "jquery"
  12. }
  13. });

Registered resources can be used in your views,

  1. <dot:RequiredResource Name="bootstrap" />
Dependencies are resolved automatically.
Custom Controls

If you have custom DotVVM controls, you must register them in the DotvvmConfiguration.Markup property.

  1. config.Markup.AddCodeControls("cc", typeof(MyCustomControl));

You can read more about configuration here.

Start application

When you run the application, it will render the View that is registered in the routing table for the root URL.

DotVVM

Links