Post
Ask Question

Create A New Application In DotVVM

Install the extension

The extension can be installed in two ways,

  • Through the Visual Studio market here
  • Downloaded from Visual Studio itself (Tools > Extensions and Updates)

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,

  • .NET Core template
  • Owin template

    DotVVM

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

  • Add Bootstrap/jQuery
  • Add Identity
  • Add Sample pages
  • Select .NET version
  • Add commercial DotVVM controls

    DotVVM

Basic project structure

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

Usual project structure

  • ViewModels

    • Contains your ViewModel classes

  • Views

    • Contains your Views (.dothtml files)

  • DotvvmStartup

    • A C# class; contains your DotVVM - specific configuration

      • Routes
      • Resources
      • Controls

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

ViewModels

  • They must be JSON serializable so that they can be sent to the client
  • They preserve state for your Views and defines Commands, which are called from the Views
  • It is recommended to inherit all ViewModels from DotvvmViewModelBase as it gives you several useful mechanisms,

    • Context property
    • Option to hook into the ViewModel‘s lifecycle (Init, Load, PreRender)


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

View

  • They must contain the @viewModel directive which specifies what ViewModel type must accompany it
  • They are made up of controls
  • They can (and most likely will) contain bindings

    • {value: Property} - binds to a public property of the ViewModel
    • {command: Command()} –calls method in the ViewModel
    • {staticCommand: Command()} – calls static methods in the ViewModel

  • If you want to use bindings outside of control properties, you need to use double braces as an example,
  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,

  • Manually
    Using the Add method with the following parameters,

    • Name of the route
    • Url for the route
    • The path to a View
    • Default values for route parameters
  1. config.RouteTable.Add("Default", "", "Views/default.dothtml");
  • Automatically
    Using AutoDiscoveryStrategy. This way routes are derived from your folder structure in the Views directory.
  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,

  • The unique name of the resource
  • An implementation of IResource

    • StylesheetResource – CSS styles
    • ScriptResource – javascript

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.
 

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


Similar Articles