Page 35 - MSDN Magazine, March 2018

Web API Server
Simple Web Server
Web API Simple Web Server Server
Workstations
Figure 2 Simple Flow Adding in Razor
• Once the page has been fully loaded in the browser and the framework initialized, the framework can call the MVC server to request a template as a Partial View.
• This template is generated with Razor, typically without any associated data.
• At the same time, the framework makes a call to the API to get the data that will be bound to the template received from the MVC site.
• Once the user makes any required edits, the Framework makes calls to the Web API server to update the back-end database. This workflow repeats as needed when a new template is requested. If the framework allows you to specify a URL for a template, MVC can serve up the template. While I will show examples generating views suitable for binding in Angular and Knockout, keep in mind
that these are hardly the only options.
Setting up a Solution
From a setup perspective, you need at least three projects. One for the Web API, another for the MVC application and, finally, a common project to host code common between these two proj- ects. For purposes of this article, the common project will host the ViewModels so they can be used in both the Web and Web API. The initial project will be structured as shown in Figure 3.
In the real world, you’ll only support one client-side frame- work. For this article, it simplifies matters to have two MVC projects, one for each of the frame- works to be demonstrated. You may encounter something similar if you need to support a Web application, a customized mobile application, a SharePoint application, a desktop application or any other scenario that’s not easily rendered from a common UI project. Regardless, only the logic embedded in the UI project will have to be repeated as you support multi-
Workstations
Figure 1 Typical Application Layout
to offer and its implementation of MVC provides many features that are still relevant, even when one of the client-side frameworks does much of the heavy lifting. In this article, I’ll focus on one of these features, the Razor View Engine.
Razor in the SPA
The Razor View Engine is a marvel when it comes to simplifying generation of HTML markup. With just a couple of tweaks, the gen- erated markup is easily customized to fit the template expectations for whatever framework is used on the client. I’ll highlight some examples with Angular and Knockout, but these techniques will work regardless of the framework you employ. If you make calls back to the server to provide templates for your application, you can now use Razor to do the heavy lifting generating the HTML.
There’s a lot to like here. EditorTemplates and DisplayTemplates are still your friends, as are scaffolding templates. You can still inject partial views, and the fluid flow of the Razor syntax is still there to use to your advantage. Beyond the views you can also use the MVC controller, which can add processing power to speed things up or add an extra layer of security. If this isn’t needed, the controllers could be a simple pass through to the view.
To demonstrate how this can be used to your benefit, I’ll step through the creation of some data entry screens for a time-tracking application, showing how Razor can help expedite the creation of HTML suitable for use by either Angular or Knockout.
As Figure 2 shows, not much chang- es from the typical layout. I’ve includ- ed an option showing that the MVC application could interact with this database. This isn’t necessary at this stage, but if it simplifies your process- ing, it is available. In general, the flow will look like:
• Retrieve a full page from the MVC application, including all style sheet and JavaScript refer- ences and minimal content.
Figure 3 Initial Project Structure
ple front ends.
msdnmagazine.com
March 2018 29
Database
Database