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.
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
RouteLinkcontrol is rendered with
dotvvm.handleSpaNavigation(this);is added to its
You can NOT use multiple
SpaContentPlaceHolder controls in your DotVVM master page.
In this article we demonstrated how it is pretty easy to build SPA with DotVVM without learning a new framework or library.