
> The provided code is intended as a guideline and must be tailored to suit your specific implementation requirements. Please ensure thorough end-to-end testing is conducted to validate its functionality and performance in your environment.

## Example 1: Model-Bound View

Model class: Promo.cs

```typescript
using Sitecore.AspNetCore.SDK.LayoutService.Client.Response.Model.Fields;
using Sitecore.AspNetCore.SDK.RenderingEngine.Binding.Attributes;

namespace Sitecore.AspNetCore.Starter.Models;

public class Promo : BaseModel
{
    public const string VARIANT_WITH_TEXT = "WithText";

    [SitecoreComponentField]
    public ImageField? PromoIcon { get; set; }

    [SitecoreComponentField]
    public TextField? PromoText { get; set; }

    [SitecoreComponentField]
    public HyperLinkField? PromoLink { get; set; }

```

View file: Promo.cshtml

```typescript
@model Sitecore.AspNetCore.Starter.Models.Promo

<div class="component promo @Model.Styles @Model.GridParameters" id="@Model.Id">
    <div class="component-content">
        <div class="field-promoicon">
            <sc-img asp-for="@Model.PromoIcon" />
        </div>
        <div class="promo-text">
            @{
                string variantClass = Model.FieldNames == Promo.VARIANT_WITH_TEXT ? "promo-text" : string.Empty;
            }
            <div>
                <div class="field-promotext">
                    <sc-text class="@variantClass" asp-for="@Model.PromoText"></sc-text>
                </div>
            </div>
            <div class="field-promolink">
                <sc-link class="@variantClass" asp-for="@Model.PromoLink"></sc-link>
            </div>
        </div>
    </div>
</div>
```
Registering a component (an additional line in the ServiceCollectionExtensions class):
```typescript
using Sitecore.AspNetCore.SDK.RenderingEngine.Configuration;
using Sitecore.AspNetCore.Starter.Models.LinkList;
using Sitecore.AspNetCore.Starter.Models.Navigation;
using Sitecore.AspNetCore.Starter.Models.Title;

namespace Sitecore.AspNetCore.Starter.Extensions;

public static class ServiceCollectionExtensions
{
    public static RenderingEngineOptions AddStarterKitViews(this RenderingEngineOptions renderingEngineOptions)
    {
        renderingEngineOptions.AddModelBoundView<Title>("Title")
                              .AddModelBoundView<Container>("Container")
                              .AddModelBoundView<ColumnSplitter>("ColumnSplitter")
                              .AddModelBoundView<RowSplitter>("RowSplitter")
                              .AddModelBoundView<PageContent>("PageContent")
                              .AddModelBoundView<RichText>("RichText")
                              .AddModelBoundView<Promo>("Promo") // Add this line to register view
                              .AddModelBoundView<LinkList>("LinkList")
                              .AddModelBoundView<Image>("Image")
                              .AddModelBoundView<PartialDesignDynamicPlaceholder>("PartialDesignDynamicPlaceholder")
                              .AddModelBoundView<Navigation>("Navigation");

        return renderingEngineOptions;
    }
}
```

## Example 2: View Component
The following view component additionally to the Image field received from layout response gets the data from third-party weather service and combine everything in the same model class.

Model classes:
```typescript
using Sitecore.AspNetCore.SDK.LayoutService.Client.Response.Model.Fields;
using Sitecore.AspNetCore.SDK.RenderingEngine.Binding.Attributes;

namespace Sitecore.AspNetCore.Starter.Models.WeatherModels
{
  public class WeatherModel: BaseModel
  {
    [SitecoreComponentField(Name = "Image")]
    public ImageField? ImageField { get; set; }

    public CurrentWeatherData? WeatherData { get; set; }
  }
}


using System.Text.Json.Serialization;

public class CurrentWeatherData
{
  [JsonPropertyName("coord")]
  public Coordinates Coord { get; set; }

  [JsonPropertyName("weather")]
  public List<WeatherInfo> Weather { get; set; }

  [JsonPropertyName("base")]
  public string Base { get; set; }

  [JsonPropertyName("main")]
  public MainWeatherInfo Main { get; set; }

  [JsonPropertyName("visibility")]
  public int Visibility { get; set; }

  [JsonPropertyName("wind")]
  public WindInfo Wind { get; set; }

  [JsonPropertyName("clouds")]
  public CloudsInfo Clouds { get; set; }

  [JsonPropertyName("dt")]
  public long Timestamp { get; set; }

  [JsonPropertyName("sys")]
  public SystemInfo Sys { get; set; }

  [JsonPropertyName("timezone")]
  public int Timezone { get; set; }

  [JsonPropertyName("id")]
  public int Id { get; set; }

  [JsonPropertyName("name")]
  public string Name { get; set; }

  [JsonPropertyName("cod")]
  public int Cod { get; set; }
}

public class Coordinates
{
  [JsonPropertyName("lon")]
  public double Longitude { get; set; }

  [JsonPropertyName("lat")]
  public double Latitude { get; set; }
}

public class MainWeatherInfo
{
  [JsonPropertyName("temp")]
  public double Temperature { get; set; }

  [JsonPropertyName("feels_like")]
  public double FeelsLike { get; set; }

  [JsonPropertyName("temp_min")]
  public double TempMin { get; set; }

  [JsonPropertyName("temp_max")]
  public double TempMax { get; set; }

  [JsonPropertyName("pressure")]
  public int Pressure { get; set; }

  [JsonPropertyName("humidity")]
  public int Humidity { get; set; }

  [JsonPropertyName("sea_level")]
  public int? SeaLevel { get; set; }

  [JsonPropertyName("grnd_level")]
  public int? GroundLevel { get; set; }
}

public class WindInfo
{
  [JsonPropertyName("speed")]
  public double Speed { get; set; }

  [JsonPropertyName("deg")]
  public int Direction { get; set; }

  [JsonPropertyName("gust")]
  public double? Gust { get; set; }
}

public class CloudsInfo
{
  [JsonPropertyName("all")]
  public int All { get; set; }
}

public class SystemInfo
{
  [JsonPropertyName("country")]
  public string Country { get; set; }

  [JsonPropertyName("sunrise")]
  public long Sunrise { get; set; }

  [JsonPropertyName("sunset")]
  public long Sunset { get; set; }
}

public class WeatherInfo
{
  [JsonPropertyName("id")]
  public int Id { get; set; }

  [JsonPropertyName("main")]
  public string Main { get; set; }

  [JsonPropertyName("description")]
  public string Description { get; set; }

  [JsonPropertyName("icon")]
  public string Icon { get; set; }
}
```
View Component class:
```typescript
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ViewComponents;
using Sitecore.AspNetCore.SDK.RenderingEngine.Binding;
using Sitecore.AspNetCore.Starter.Models.WeatherModels;
using System.Text.Json;

namespace Sitecore.AspNetCore.Starter.ViewComponents
{
  [ViewComponent(Name = ViewComponentName)]
  public class WeatherViewComponent(IViewModelBinder modelBinder): ViewComponent
  {

    public const string ViewComponentName = "Weather";

    private readonly IViewModelBinder _modelBinder = modelBinder;

    public async Task<IViewComponentResult> InvokeAsync()
    {
      IViewComponentResult result = new ContentViewComponentResult(string.Empty);
      WeatherModel model = await _modelBinder.Bind<WeatherModel>(ViewContext);

      using HttpClient client = new HttpClient();

      string url = "https://api.openweathermap.org/data/2.5/weather?q=Oslo&units=metric&appid=APP_ID_HERE";

      try
      {
        HttpResponseMessage response = await client.GetAsync(url);
        response.EnsureSuccessStatusCode();

        string jsonString = await response.Content.ReadAsStringAsync();
        model.WeatherData = JsonSerializer.Deserialize<CurrentWeatherData>(jsonString);

        result = View("/Views/Shared/Components/Weather/Weather.cshtml", model);
      }
      catch (Exception e)
      {
        Console.WriteLine(e.Message);
      }

      return result;
    }
  }
}
```

View:
```typescript
@model Sitecore.AspNetCore.Starter.Models.WeatherModels.WeatherModel

<div class="component weather @Model.Styles @Model.GridParameters" id="@Model.Id">
  <sc-img asp-for="@Model.ImageField" class="weather-image" />

  <div class="weather-info">
    <h2>@Model?.WeatherData?.Weather[0].Main - @Model?.WeatherData?.Weather[0].Description</h2>
    <div class="weather-details">
      <div class="weather-temp">
        Temp: <span class="current-temp">@Model?.WeatherData?.Main?.Temperature</span><br/>
        Feels like: <span class="feels-like">@Model?.WeatherData?.Main?.FeelsLike</span><br />
        Humidity: <span class="humidity">@Model?.WeatherData?.Main.Humidity</span><br />
      </div>
      @* An example of adding a partial view *@
      @await Html.PartialAsync("~/Views/Shared/Components/Weather/WeatherText.cshtml", Model)
    </div>
  </div>
</div>
```

Registering a component (an additional line in the ServiceCollectionExtensions class):

```typescript
using Sitecore.AspNetCore.SDK.RenderingEngine.Configuration;
using Sitecore.AspNetCore.Starter.Models.LinkList;
using Sitecore.AspNetCore.Starter.Models.Navigation;
using Sitecore.AspNetCore.Starter.Models.Title;
using Sitecore.AspNetCore.Starter.ViewComponents;

namespace Sitecore.AspNetCore.Starter.Extensions;

public static class ServiceCollectionExtensions
{
    public static RenderingEngineOptions AddStarterKitViews(this RenderingEngineOptions renderingEngineOptions)
    {
    renderingEngineOptions.AddModelBoundView<Title>("Title")
                          .AddModelBoundView<Container>("Container")
                          .AddModelBoundView<ColumnSplitter>("ColumnSplitter")
                          .AddModelBoundView<RowSplitter>("RowSplitter")
                          .AddModelBoundView<PageContent>("PageContent")
                          .AddModelBoundView<RichText>("RichText")
                          .AddModelBoundView<Promo>("Promo")
                          .AddModelBoundView<LinkList>("LinkList")
                          .AddModelBoundView<Image>("Image")
                          .AddModelBoundView<PartialDesignDynamicPlaceholder>("PartialDesignDynamicPlaceholder")
                          .AddModelBoundView<Navigation>("Navigation")
                          .AddViewComponent(WeatherViewComponent.ViewComponentName);

        return renderingEngineOptions;
    }
}
```

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

```typescript

@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>
Registering of the partial view:
```

```typescript

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");
  );
}
```




Example 1: Model-Bound View

Example 2: View Component

Example 3: Partial view

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    blockquote: "blockquote",
    code: "code",
    h2: "h2",
    p: "p",
    pre: "pre",
    svg: "svg",
    use: "use",
    ..._provideComponents(),
    ...props.components
  };
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "The provided code is intended as a guideline and must be tailored to suit your specific implementation requirements. Please ensure thorough end-to-end testing is conducted to validate its functionality and performance in your environment."
      }), "\n"]
    }), "\n", _jsxs(_components.h2, {
      id: "example-1-model-bound-view",
      children: ["Example 1: Model-Bound View", _jsx(_components.a, {
        className: "anchor",
        title: "Quick link to category",
        href: "#example-1-model-bound-view",
        children: _jsx(_components.svg, {
          width: "16",
          height: "16",
          viewBox: "0 0 16 16",
          display: "inline",
          className: "MarkdownContent-module__qZFooG__anchor",
          children: _jsx(_components.use, {
            xlinkHref: "#link-icon",
            href: "#link-icon"
          })
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "Model class: Promo.cs"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-typescript",
        children: "using Sitecore.AspNetCore.SDK.LayoutService.Client.Response.Model.Fields;\nusing Sitecore.AspNetCore.SDK.RenderingEngine.Binding.Attributes;\n\nnamespace Sitecore.AspNetCore.Starter.Models;\n\npublic class Promo : BaseModel\n{\n    public const string VARIANT_WITH_TEXT = \"WithText\";\n\n    [SitecoreComponentField]\n    public ImageField? PromoIcon { get; set; }\n\n    [SitecoreComponentField]\n    public TextField? PromoText { get; set; }\n\n    [SitecoreComponentField]\n    public HyperLinkField? PromoLink { get; set; }\n\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "View file: Promo.cshtml"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-typescript",
        children: "@model Sitecore.AspNetCore.Starter.Models.Promo\n\n<div class=\"component promo @Model.Styles @Model.GridParameters\" id=\"@Model.Id\">\n    <div class=\"component-content\">\n        <div class=\"field-promoicon\">\n            <sc-img asp-for=\"@Model.PromoIcon\" />\n        </div>\n        <div class=\"promo-text\">\n            @{\n                string variantClass = Model.FieldNames == Promo.VARIANT_WITH_TEXT ? \"promo-text\" : string.Empty;\n            }\n            <div>\n                <div class=\"field-promotext\">\n                    <sc-text class=\"@variantClass\" asp-for=\"@Model.PromoText\"></sc-text>\n                </div>\n            </div>\n            <div class=\"field-promolink\">\n                <sc-link class=\"@variantClass\" asp-for=\"@Model.PromoLink\"></sc-link>\n            </div>\n        </div>\n    </div>\n</div>\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "Registering a component (an additional line in the ServiceCollectionExtensions class):"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-typescript",
        children: "using Sitecore.AspNetCore.SDK.RenderingEngine.Configuration;\nusing Sitecore.AspNetCore.Starter.Models.LinkList;\nusing Sitecore.AspNetCore.Starter.Models.Navigation;\nusing Sitecore.AspNetCore.Starter.Models.Title;\n\nnamespace Sitecore.AspNetCore.Starter.Extensions;\n\npublic static class ServiceCollectionExtensions\n{\n    public static RenderingEngineOptions AddStarterKitViews(this RenderingEngineOptions renderingEngineOptions)\n    {\n        renderingEngineOptions.AddModelBoundView<Title>(\"Title\")\n                              .AddModelBoundView<Container>(\"Container\")\n                              .AddModelBoundView<ColumnSplitter>(\"ColumnSplitter\")\n                              .AddModelBoundView<RowSplitter>(\"RowSplitter\")\n                              .AddModelBoundView<PageContent>(\"PageContent\")\n                              .AddModelBoundView<RichText>(\"RichText\")\n                              .AddModelBoundView<Promo>(\"Promo\") // Add this line to register view\n                              .AddModelBoundView<LinkList>(\"LinkList\")\n                              .AddModelBoundView<Image>(\"Image\")\n                              .AddModelBoundView<PartialDesignDynamicPlaceholder>(\"PartialDesignDynamicPlaceholder\")\n                              .AddModelBoundView<Navigation>(\"Navigation\");\n\n        return renderingEngineOptions;\n    }\n}\n"
      })
    }), "\n", _jsxs(_components.h2, {
      id: "example-2-view-component",
      children: ["Example 2: View Component", _jsx(_components.a, {
        className: "anchor",
        title: "Quick link to category",
        href: "#example-2-view-component",
        children: _jsx(_components.svg, {
          width: "16",
          height: "16",
          viewBox: "0 0 16 16",
          display: "inline",
          className: "MarkdownContent-module__qZFooG__anchor",
          children: _jsx(_components.use, {
            xlinkHref: "#link-icon",
            href: "#link-icon"
          })
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "The following view component additionally to the Image field received from layout response gets the data from third-party weather service and combine everything in the same model class."
    }), "\n", _jsx(_components.p, {
      children: "Model classes:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-typescript",
        children: "using Sitecore.AspNetCore.SDK.LayoutService.Client.Response.Model.Fields;\nusing Sitecore.AspNetCore.SDK.RenderingEngine.Binding.Attributes;\n\nnamespace Sitecore.AspNetCore.Starter.Models.WeatherModels\n{\n  public class WeatherModel: BaseModel\n  {\n    [SitecoreComponentField(Name = \"Image\")]\n    public ImageField? ImageField { get; set; }\n\n    public CurrentWeatherData? WeatherData { get; set; }\n  }\n}\n\n\nusing System.Text.Json.Serialization;\n\npublic class CurrentWeatherData\n{\n  [JsonPropertyName(\"coord\")]\n  public Coordinates Coord { get; set; }\n\n  [JsonPropertyName(\"weather\")]\n  public List<WeatherInfo> Weather { get; set; }\n\n  [JsonPropertyName(\"base\")]\n  public string Base { get; set; }\n\n  [JsonPropertyName(\"main\")]\n  public MainWeatherInfo Main { get; set; }\n\n  [JsonPropertyName(\"visibility\")]\n  public int Visibility { get; set; }\n\n  [JsonPropertyName(\"wind\")]\n  public WindInfo Wind { get; set; }\n\n  [JsonPropertyName(\"clouds\")]\n  public CloudsInfo Clouds { get; set; }\n\n  [JsonPropertyName(\"dt\")]\n  public long Timestamp { get; set; }\n\n  [JsonPropertyName(\"sys\")]\n  public SystemInfo Sys { get; set; }\n\n  [JsonPropertyName(\"timezone\")]\n  public int Timezone { get; set; }\n\n  [JsonPropertyName(\"id\")]\n  public int Id { get; set; }\n\n  [JsonPropertyName(\"name\")]\n  public string Name { get; set; }\n\n  [JsonPropertyName(\"cod\")]\n  public int Cod { get; set; }\n}\n\npublic class Coordinates\n{\n  [JsonPropertyName(\"lon\")]\n  public double Longitude { get; set; }\n\n  [JsonPropertyName(\"lat\")]\n  public double Latitude { get; set; }\n}\n\npublic class MainWeatherInfo\n{\n  [JsonPropertyName(\"temp\")]\n  public double Temperature { get; set; }\n\n  [JsonPropertyName(\"feels_like\")]\n  public double FeelsLike { get; set; }\n\n  [JsonPropertyName(\"temp_min\")]\n  public double TempMin { get; set; }\n\n  [JsonPropertyName(\"temp_max\")]\n  public double TempMax { get; set; }\n\n  [JsonPropertyName(\"pressure\")]\n  public int Pressure { get; set; }\n\n  [JsonPropertyName(\"humidity\")]\n  public int Humidity { get; set; }\n\n  [JsonPropertyName(\"sea_level\")]\n  public int? SeaLevel { get; set; }\n\n  [JsonPropertyName(\"grnd_level\")]\n  public int? GroundLevel { get; set; }\n}\n\npublic class WindInfo\n{\n  [JsonPropertyName(\"speed\")]\n  public double Speed { get; set; }\n\n  [JsonPropertyName(\"deg\")]\n  public int Direction { get; set; }\n\n  [JsonPropertyName(\"gust\")]\n  public double? Gust { get; set; }\n}\n\npublic class CloudsInfo\n{\n  [JsonPropertyName(\"all\")]\n  public int All { get; set; }\n}\n\npublic class SystemInfo\n{\n  [JsonPropertyName(\"country\")]\n  public string Country { get; set; }\n\n  [JsonPropertyName(\"sunrise\")]\n  public long Sunrise { get; set; }\n\n  [JsonPropertyName(\"sunset\")]\n  public long Sunset { get; set; }\n}\n\npublic class WeatherInfo\n{\n  [JsonPropertyName(\"id\")]\n  public int Id { get; set; }\n\n  [JsonPropertyName(\"main\")]\n  public string Main { get; set; }\n\n  [JsonPropertyName(\"description\")]\n  public string Description { get; set; }\n\n  [JsonPropertyName(\"icon\")]\n  public string Icon { get; set; }\n}\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "View Component class:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-typescript",
        children: "using Microsoft.AspNetCore.Mvc;\nusing Microsoft.AspNetCore.Mvc.ViewComponents;\nusing Sitecore.AspNetCore.SDK.RenderingEngine.Binding;\nusing Sitecore.AspNetCore.Starter.Models.WeatherModels;\nusing System.Text.Json;\n\nnamespace Sitecore.AspNetCore.Starter.ViewComponents\n{\n  [ViewComponent(Name = ViewComponentName)]\n  public class WeatherViewComponent(IViewModelBinder modelBinder): ViewComponent\n  {\n\n    public const string ViewComponentName = \"Weather\";\n\n    private readonly IViewModelBinder _modelBinder = modelBinder;\n\n    public async Task<IViewComponentResult> InvokeAsync()\n    {\n      IViewComponentResult result = new ContentViewComponentResult(string.Empty);\n      WeatherModel model = await _modelBinder.Bind<WeatherModel>(ViewContext);\n\n      using HttpClient client = new HttpClient();\n\n      string url = \"https://api.openweathermap.org/data/2.5/weather?q=Oslo&units=metric&appid=APP_ID_HERE\";\n\n      try\n      {\n        HttpResponseMessage response = await client.GetAsync(url);\n        response.EnsureSuccessStatusCode();\n\n        string jsonString = await response.Content.ReadAsStringAsync();\n        model.WeatherData = JsonSerializer.Deserialize<CurrentWeatherData>(jsonString);\n\n        result = View(\"/Views/Shared/Components/Weather/Weather.cshtml\", model);\n      }\n      catch (Exception e)\n      {\n        Console.WriteLine(e.Message);\n      }\n\n      return result;\n    }\n  }\n}\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "View:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-typescript",
        children: "@model Sitecore.AspNetCore.Starter.Models.WeatherModels.WeatherModel\n\n<div class=\"component weather @Model.Styles @Model.GridParameters\" id=\"@Model.Id\">\n  <sc-img asp-for=\"@Model.ImageField\" class=\"weather-image\" />\n\n  <div class=\"weather-info\">\n    <h2>@Model?.WeatherData?.Weather[0].Main - @Model?.WeatherData?.Weather[0].Description</h2>\n    <div class=\"weather-details\">\n      <div class=\"weather-temp\">\n        Temp: <span class=\"current-temp\">@Model?.WeatherData?.Main?.Temperature</span><br/>\n        Feels like: <span class=\"feels-like\">@Model?.WeatherData?.Main?.FeelsLike</span><br />\n        Humidity: <span class=\"humidity\">@Model?.WeatherData?.Main.Humidity</span><br />\n      </div>\n      @* An example of adding a partial view *@\n      @await Html.PartialAsync(\"~/Views/Shared/Components/Weather/WeatherText.cshtml\", Model)\n    </div>\n  </div>\n</div>\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "Registering a component (an additional line in the ServiceCollectionExtensions class):"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-typescript",
        children: "using Sitecore.AspNetCore.SDK.RenderingEngine.Configuration;\nusing Sitecore.AspNetCore.Starter.Models.LinkList;\nusing Sitecore.AspNetCore.Starter.Models.Navigation;\nusing Sitecore.AspNetCore.Starter.Models.Title;\nusing Sitecore.AspNetCore.Starter.ViewComponents;\n\nnamespace Sitecore.AspNetCore.Starter.Extensions;\n\npublic static class ServiceCollectionExtensions\n{\n    public static RenderingEngineOptions AddStarterKitViews(this RenderingEngineOptions renderingEngineOptions)\n    {\n    renderingEngineOptions.AddModelBoundView<Title>(\"Title\")\n                          .AddModelBoundView<Container>(\"Container\")\n                          .AddModelBoundView<ColumnSplitter>(\"ColumnSplitter\")\n                          .AddModelBoundView<RowSplitter>(\"RowSplitter\")\n                          .AddModelBoundView<PageContent>(\"PageContent\")\n                          .AddModelBoundView<RichText>(\"RichText\")\n                          .AddModelBoundView<Promo>(\"Promo\")\n                          .AddModelBoundView<LinkList>(\"LinkList\")\n                          .AddModelBoundView<Image>(\"Image\")\n                          .AddModelBoundView<PartialDesignDynamicPlaceholder>(\"PartialDesignDynamicPlaceholder\")\n                          .AddModelBoundView<Navigation>(\"Navigation\")\n                          .AddViewComponent(WeatherViewComponent.ViewComponentName);\n\n        return renderingEngineOptions;\n    }\n}\n"
      })
    }), "\n", _jsxs(_components.h2, {
      id: "example-3-partial-view",
      children: ["Example 3: Partial view", _jsx(_components.a, {
        className: "anchor",
        title: "Quick link to category",
        href: "#example-3-partial-view",
        children: _jsx(_components.svg, {
          width: "16",
          height: "16",
          viewBox: "0 0 16 16",
          display: "inline",
          className: "MarkdownContent-module__qZFooG__anchor",
          children: _jsx(_components.use, {
            xlinkHref: "#link-icon",
            href: "#link-icon"
          })
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "To access the data that Experience Edge returns in a Razor view, you can add the following code to your Razor view:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-typescript",
        children: "\n@using MyRenderingHost.ViewModels;\n@using Sitecore.AspNetCore.SDK.LayoutService.Client.Response.Model.Fields;\n\n@{\n  var route = this.SitecoreRoute();\n  var context = this.SitecoreContext();\n  var component = this.SitecoreComponent().ReadFields<ContentBlock>();\n  var pageTitleField = route.ReadField<TextField>(\"pageTitle\");\n}\n\n<section>\n  <h1 asp-for=\"@pageTitleField\"></h1>\n  <h2>Site name: @context.Site.Name</h1>\n  <h2>Route name: @route.Name</h1>\n  <h2 asp-for=\"@component.Heading\"></h2>\n  <div>\n    <sc-text asp-for=\"@component.Content\"></sc-text>\n  </div>\n</section>\nRegistering of the partial view:\n"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-typescript",
        children: "\npublic void ConfigureServices(IServiceCollection services)\n{\n  var renderingEngineBuilder = services.AddSitecoreRenderingEngine(options =>\n    options\n\n      // Map Partials\n      .AddPartialView(\"HeaderBlock\", \"_HeaderBlock\")\n      .AddPartialView(name => name.StartsWith(\"sc\"), \"_OtherBlock\")\n\n      // Add fallback for any other component\n      .AddDefaultPartialView(\"_ComponentNotFound\");\n  );\n}\n"
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Examples for ASP.NET Core SDK 

This Cookbook provides a set of recipes to help implementing XM Cloud through setup, configuration and implementation.