---
title: "Commerce Search Results MVC view"
slug: "commerce-search-results-mvc-view"
abstract: "Overview of the Commerce Search Results MVC view structure and code."
---
# Commerce Search Results MVC view

In the MVC (Model View Controller) model, the route (the code that parses the HTTP request) points to a controller (the .NET code) that generates a model (the object). This object is parsed by a view (in SXA Storefront, a Razor view). The view consists of presentation components that determine how data is displayed.

![The MVC view](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/MVCView.png)

> [!note]
> You can customize the Commerce Search Results [MVC view](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-manager/mvc-and-renderings.html) as required. For more information, see [Override the default Rendering View Provider](https://doc.sitecore.com/xp/en/developers/103/sitecore-experience-commerce/override-the-default-rendering-view-provider.html "Override the default Rendering View Provider") and [Customize rendering HTML per site](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/customize-rendering-html-per-site.html).

The Commerce Search Results MVC view is stored in its own folder under `/views/Commerce/CommerceSearchResults`. The Commerce Search Results MVC view has the following structure:

```csharp
/* Reference the model containing all the catalog content but excluding price and stock info */
@model Sitecore.XA.Feature.Search.Models.SearchResultsRenderingModel

@{
  /* SXA handling of the data class variant attribute */
  string variantClass = string.Empty;
  if (Model.Attributes.ContainsKey("class"))
  {
    variantClass = Model.Attributes["class"].Aggregate();
  }

  /* Get a handle to the storefront context */
  var storefrontContext = ServiceLocator.ServiceProvider.GetRequiredService<IStorefrontContext>();
}

/* Component enclosing markup, including data properties specifying the search service endpoint and parameters as JSON */
<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties' data-cxa-component-class="CommerceSearchResults" data-cxa-component-initialized="false" data-cxa-component-type="component">

  /*
     Label translations originating from storefront Commerce Terms in Commerce Control Panel.
     Included as hidden markup as Scriban template cannot get a reference to it with the standard extension methods
  */
  @Html.Hidden("InStockDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.InStock))
  @Html.Hidden("OutOfStockDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.OutOfStock))
  @Html.Hidden("BackOrderableDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.BackOrderable))
  @Html.Hidden("PreOrderableDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.PreOrderable))

  /* When exporting markup using Creative Exchange, show 'Results not found' output */
  @if (WebUtil.GetQueryString(Sitecore.XA.Feature.Search.Constants.CreativeExchangeExport) != "true")
  {
    <div class="component-content">
      @Model.MessageIsEmpty
      <div class="no-results" style="display: @Model.StyleDisplay">
        @Html.Sxa().Field("ResultsNotFoundText", Model.DataSourceItem, !Model.IsControlEditable)
        @Html.Sxa().Field("Text", Model.Item, !Model.IsControlEditable)
      </div>
      <div class="progress"></div>
    </div>
  }
  else
  {
    /* Product cards are rendered using unordered lists HTML as markup */
    <ul class="search-result-list">
      <li>
		/* Loop processing the content of the rendering variant against the model and current item */
        @foreach (BaseVariantField variantField in Model.VariantFields)
        {
          @Html.RenderingVariants().RenderVariant(variantField, Model.PageItem, false, Model)
        }
      </li>
    </ul>
  }
</div>
@using System.Web.Mvc.Html
@using Microsoft.Extensions.DependencyInjection
@using Sitecore.Commerce.XA.Feature.Catalog
@using Sitecore.Commerce.XA.Foundation.Common.Context
@using Sitecore.DependencyInjection
@using Sitecore.Web
@using Sitecore.XA.Foundation.MarkupDecorator.Extensions
@using Sitecore.XA.Foundation.RenderingVariants.Extensions
@using Sitecore.XA.Foundation.SitecoreExtensions.Extensions
@using Sitecore.XA.Foundation.Variants.Abstractions.Fields

@model Sitecore.XA.Feature.Search.Models.SearchResultsRenderingModel

@{
  string variantClass = string.Empty;
  if (Model.Attributes.ContainsKey("class"))
  {
    variantClass = Model.Attributes["class"].Aggregate();
  }
  var storefrontContext = ServiceLocator.ServiceProvider.GetRequiredService<IStorefrontContext>();
}

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "search-results", Model.Attributes) data-class-variant="@variantClass" data-properties='@Model.JsonDataProperties' data-cxa-component-class="CommerceSearchResults" data-cxa-component-initialized="false" data-cxa-component-type="component">

  @Html.Hidden("InStockDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.InStock))
  @Html.Hidden("OutOfStockDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.OutOfStock))
  @Html.Hidden("BackOrderableDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.BackOrderable))
  @Html.Hidden("PreOrderableDisplayName", storefrontContext.GetProductStockStatusName(CatalogFeatureConstants.InventoryStatuses.PreOrderable))

  @if (WebUtil.GetQueryString(Sitecore.XA.Feature.Search.Constants.CreativeExchangeExport) != "true")
  {
    <div class="component-content">
      @Model.MessageIsEmpty
      <div class="no-results" style="display: @Model.StyleDisplay">
        @Html.Sxa().Field("ResultsNotFoundText", Model.DataSourceItem, !Model.IsControlEditable)
        @Html.Sxa().Field("Text", Model.Item, !Model.IsControlEditable)
      </div>
      <div class="progress"></div>
    </div>
  }
  else
  {
    <ul class="search-result-list">
      <li>
        @foreach (BaseVariantField variantField in Model.VariantFields)
        {
          @Html.RenderingVariants().RenderVariant(variantField, Model.PageItem, false, Model)
        }
      </li>
    </ul>
  }
</div>

```

The following is an example of the enclosing markup for the rendering, when it is running live on the storefront site:

![An example of the enclosing markup for the rendering](https://doc.sitecore.com/api/markdown-image/xp/en/developers/103/sitecore-experience-commerce/images/MVCExample.png)