View Types in Sitecore JSS ASP.NET core

 In MVC, the view is the most important layer used to represent the application's data, including user interactions. The Sitecore Rendering Engine renders Sitecore content using ASP.NET view components and partial views. These view types are used to create components within an ASP.NET Core application with the Sitecore Rendering Host. The three view types are model-bound views, custom view components, and partial views.

Model Bound Views :

The first view type to explore is a model-bound view. Model-bound views are backed by a default Sitecore view component which binds component content to a provided type. Model-bound views use the default SitecoreComponentViewComponent, so you do not need to create a view component class. When you have created both your Razor view in the /Views/Shared/Components/SitecoreComponent folder and your view model class, you must map the Layout Service response to the view component with the AddModelBoundView<TModel>() extension method (see Figure).

Custom View Components:

The second view type to explore is a custom view component. Custom view components (see Figure 2) are intended for use anywhere you have reusable rendering logic that is too complex for a model-bound view. 

Typically, view components do not use ASP.NET model binding and only access data on demand. However, the ASP.NET Rendering SDK provides a service and base component to enable binding a model to Layout Service output.

A view component consists of three files:

The view component class 

The Razor view

The view model class

Partial Views:

The third view type is a partial view. A partial view renders HTML output within another view's rendered output. Creating partial views in a Sitecore rendering host application follows the standard MVC conventions. Similarly, partial view discovery in a Sitecore rendering host follows the standard rules in ASP.NET Core MVC. You must map the Layout Service response to the partial view. These mappings are configured in the ConfigureServices() method in the Startup class (see Figure).