Partial views

Abstract

Overview of the Sitecore ASP.NET Rendering SDK partial views configuration and content access functionality.

A partial view renders HTML output within another view's rendered output. You use the term partial view when developing either an ASP.NET Model-View-Controller (MVC) app, where markup files are called views, or a Razor Pages app, where markup files are called pages. See the Microsoft documentation on partial views for more details.

The Sitecore Rendering Engine SDK uses MVC partial views for the lightweight components that make a Sitecore page. For example, structural components that contain just placeholders.

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.

Configuring partial views

When you have created your partial view, you must map the Layout Service response to the partial view with the AddPartialView<TModel>() and AddDefaultPartialView() extension methods.

In this example, AddPartialView("HeaderBlock", "_HeaderBlock") maps the HeaderBlock response component to the  _HeaderBlock partial view, AddPartialView(name => name.StartsWith("sc"), "_OtherBlock") maps all response components prefixes with sc to the _OtherBlock partival view, and AddDefaultPartialView("_ComponentNotFound") maps any response component unmatched by the previous two method calls to the _ComponentNotFound default partial view:

public void ConfigureServices(IServiceCollection services)
{
  var renderingEngineBuilder = services.AddSitecoreRenderingEngine(options =>
    options

      // Map Partials
      .AddPartialView("HeaderBlock", "_HeaderBlock")
      .AddPartialView(name => name.StartsWith("sc"), "_OtherBlock")

      // Add fallback for any other component
      .AddDefaultPartialView("_ComponentNotFound");
  );
}

Accessing Sitecore content from partial view Razor views

You can add a code block in the Razor view to access Layout Service data:

@using MyRenderingHost.ViewModels;
@using Sitecore.LayoutService.Client.Response.Model.Fields

@{
  var route = this.SitecoreRoute();
  var context = this.SitecoreContext();
  var component = this.SitecoreComponent().ReadFields<ContentBlock>();
  var pageTitleField = route.ReadField<TextField>("pageTitle");
}

<section>
  <h1 asp-for="@pageTitleField"></h1>
  <h2>Site name: @context.Site.Name</h1>
  <h2>Route name: @route.Name</h1>
  <h2 asp-for="@component.Heading"></h2>
  <div>
    <sc-text asp-for="@component.Content"></sc-text>
  </div>
</section>

You can read content from the Layout Service result here, but you cannot use model binding to read values. If you need to access route, context, or component values in your partial view, consider using a model-bound view or view component instead.

Migrating from partial view to view component

Sometimes a partial view requires access to data from the Layout Service response. This can be an indication that the partial view has become more complex than intended. In this case, we recommend that you use a model-bound view component instead.

Fortunately, migrating from a partial view to a model-bound view component is very simple:

  • You create a view model with the required Layout Service response properties.

  • In the Startup class, you replace the registration of the partial view with a model-bound view component registration.

  • You ensure that the Razor view is placed in the /Views/Shared/Components/SitecoreComponent folder.