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 - https://livebook.manning.com/book/spa-design-and-architecture/chapter-1/13
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 loads the content pages asynchronously and History API for navigation.
Let's 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 and again you can notice that your browser is rendering pages without any loading.
- View your page source in your browser and 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.