Build Single Page Application with DotVVM

Single Page Application (SPA)

In an SPA your web application is divided into components(pages) and each component has its own route(URL). You can navigate between pages using normal links as you used to do in traditional web pages.

In an SPA, the entire application runs as a single web page. In this
approach, the presentation layer for the entire application has been
factored out of the server and is managed from within the browser.
source

SPA with DotVVM

To build SPA you have to learn one of JavaScript frameworks/libraries like Angular, React, or Vue.js but with DotVVM you don't need to learn any of them. DotVVM is supporting SPA by just changing main ContentPlaceHolder in your DotVVM master page with SPAContentPlaceHolder and use RouteLink(recommended) control for navigation between your DotVVM pages.

DotVVM load the content pages asynchronously and History API for navigation.

lets try it.

• Create new DotVVM web application with sample CRUD pages.
• Build and run your application and try to navigate between different pages.
  • You will notice your browser is loading each page.
• Open Views/MasterPage.dotmaster file and find

<dot:ContentPlaceHolder ID="MainContent" />

and replace it with

<dot:SpaContentPlaceHolder ID="MainContent" />

• Refresh your page using CTRL+F5
• Navigate between your pages again you can notice that your browser is rendering pages without any loading.
• View your page source in your browser you will notice that any RouteLink control is rendered with dotvvm.handleSpaNavigation(this); is added to its onclick event.

Restriction

You can NOT use multiple SpaContentPlaceHolder controls in your DotVVM master page.

Summary

In this article we demonstrated how it is pretty easy to build SPA with DotVVM without learning a new framework or library.