Partial views
ASP.NET Core partial views render HTML output within another view's rendered output.
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 an XM Cloud 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 theHeaderBlock
response component to the_HeaderBlock
partial view. -
AddPartialView(name => name.StartsWith("sc"), "_OtherBlock")
maps all response components prefixed withsc
to the_OtherBlock
partial view. -
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 XM Cloud 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:
@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>
The following Razor page extensions are available in the Sitecore.AspNetCore.SDK.RenderingEngine.Extensions
namespace, in the RazorPageExtensions
class:
-
SitecoreRoute
- get the current SitecoreRoute
object. -
SitecoreContext
- get the current SitecoreContext
object. -
SitecoreComponent
- get the current SitecoreComponent
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.