---
title: "Commerce Search結果のMVCビュー"
slug: "commerce-search-results-mvc-view"
abstract: "Commerce Search Results MVCビュー構造とコードの概要。"
---
# Commerce Search結果のMVCビュー

MVC(モデルビューコントローラ)モデルでは、HTTPリクエストを解析するコード(ルート)がモデル(オブジェクト)を生成するコントローラ(.NETコード)を指しています。このオブジェクトはビュー(SXAストアフロントのRazorビュー)によって解析されます。ビューはデータの表示方法を決定するプレゼンテーションコンポーネントで構成されています。

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

> !注Commerce Search Results [MVCビュー](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-manager/en/mvc-and-renderings.html) は必要に応じてカスタマイズ可能です。詳細については、「 [デフォルトのレンダリングビュープロバイダーをオーバーライド」](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/override-the-default-rendering-view-provider.html "Override the default Rendering View Provider") および [「サイトごとのレンダリングHTMLカスタマイズ](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/customize-rendering-html-per-site.html)」をご覧ください。

Commerce Search Results MVCビューは /views/Commerce/CommerceSearchResultsの下にある独立したフォルダに格納されています。Commerce Search Results MVCビューの構造は以下の通りです:

/\* 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>

以下は、レンダリングがストアフロントサイト上で稼働している際の囲みマークアップの例です:

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