Partial views

Version: 0.x (alpha public release)

ASP.NET Core partial views render HTML output within another view's rendered output.

Note

The term partial view refers to one of the following:

An ASP.NET Core Model-View-Controller (MVC) app, where markup files are called views.
A Razor Pages app, where markup files are called pages.

The ASP.NET Core SDK uses MVC partial views for the lightweight components that make up a SitecoreAI page. For example, structural components that only contain placeholders.

Using the ASP.NET Core SDK, you build partial views by following the standard MVC conventions. Similarly, partial view discovery follows the standard ASP.NET Core MVC rules.

Configuring a partial view

After you build a partial view following the standard MVC conventions, you must map the Experience Edge response to the partial view with the AddPartialView<TModel>() and the AddDefaultPartialView() extension methods.

Example

Here's an example partial view. Note the following:

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

RequestResponse

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 SitecoreAI content from Razor views

To access the data that Experience Edge returns in a Razor view, you can add the following code to your Razor view:

RequestResponse

@using MyRenderingHost.ViewModels;
@using Sitecore.AspNetCore.SDK.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>

Note

The following Razor page extensions are available in the Sitecore.AspNetCore.SDK.RenderingEngine.Extensions namespace, in the RazorPageExtensions class:

SitecoreRoute - get the current Sitecore Route object.
SitecoreContext - get the current Sitecore Context object.
SitecoreComponent - get the current Sitecore Component object.

You can read content from the Experience Edge response here, but you can't use model binding to read values. If you need to access route, context, or component values in your partial view, consider migrating from a partial view to a model-bound view.

Migrating from partial view to model-bound view

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

To migrate from a partial view to a model-bound view:

Create a view model with the required Experience Edge response properties.
In the Startup class, replace the registration of the partial view with a model-bound view component registration.
Ensure that the Razor view is in the /Views/Shared/Components/SitecoreComponent folder.

Do you have some feedback for us?

If you have suggestions for improving this article,