在 Sitecore 页面上显示图标 (MVC)

Question

如问题所述，我只想在我的页面上显示一个图标。

我有一个名为 Driver 的模型：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TestSitecore.Models
{
    public class Driver
    {
        // Single-Line Text
        public HtmlString Heading { get; set; }
        // Multi-Line Text
        public HtmlString MainContent { get; set; }
        // Image
        public HtmlString MainImage { get; set; }
        // Single-Line Text
        public HtmlString Firstname { get; set; }
        // Single-Line Text
        public HtmlString Surname { get; set; }
        // Date
        public HtmlString DateOfBirth { get; set; }
        // Single-Line Text
        public HtmlString Nationality { get; set; }
        // Icon
        public HtmlString NationalityFlag { get; set; }

    }
}

在我的模型中，我将这些字段定义为 HtmlStrings，因为我想启用页面编辑器支持，但我在每个字段上方添加了注释以显示 Sitecore 字段类型。

我有一个名为 DriverController 的控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TestSitecore.Repositories;

namespace TestSitecore.Controllers
{
    public class DriverController : Controller
    {
        // GET: Driver
        public ActionResult Featured()
        {
            var repository = new DriverRepository();
            var driver = repository.GetDriver();

            return View(driver);
        }
    }
}

DriverController 使用存储库来填充模型数据并将其 return 到视图。

我有一个名为 DriverRepository 的存储库：

using Sitecore.Mvc.Presentation;
using Sitecore.Web.UI.WebControls;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using TestSitecore.Models;

namespace TestSitecore.Repositories
{
    public class DriverRepository
    {
        public Driver GetDriver()
        {
            var driver = new Driver();
            var rendering = RenderingContext.Current.Rendering;
            var datasource = rendering.Item;

            driver.Heading = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_HEADING));
            driver.MainImage = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_MAIN_IMAGE));

            driver.Firstname = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_FIRSTNAME));
            driver.Surname = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_SURNAME));
            driver.DateOfBirth = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_DATE_OF_BIRTH));
            driver.Nationality = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_NATIONALITY));
            driver.NationalityFlag = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_NATIONALITY_FLAG));

            return driver;
        }
    }
}

存储库使用 FieldRenderer.Render 方法启用页面编辑器支持。

最后我有一个名为 Featured 的视图：

@using TestSitecore.Models

@model Driver

<div class="highlight">
    <h2>@Model.Heading</h2>
    <div class="row">
        @Model.MainImage
    </div>
    <div class="row">
        <div class="col-md-12 col-lg12">
            @Constants.FIELD_NAME: @Model.Firstname
            <br />
            @Constants.FIELD_SURNAME: @Model.Surname
            <br />
            @Constants.FIELD_DATE_OF_BIRTH: @Model.DateOfBirth
            <br />
            @Constants.FIELD_NATIONALITY: @Model.Nationality
            <br />
            @Constants.FIELD_NATIONALITY_FLAG: @Model.NationalityFlag
            <br />
        </div>
    </div>
</div>

当我在我的页面上查看输出时，图标字段只显示图标的 Sitecore 路径，并不呈现图像。但它确实正确显示了主图像字段。您可以从下面的屏幕截图中看到这一点：

我也试过只发回一个纯字符串而不是 HtmlString，但这只是 return 的原始值。

我想我想问的是如何在页面上显示我的图标而不是图标的路径？还是我应该将字段类型切换为图像并将图标作为图像添加到媒体库中？

Answer 1

由于这些标志不在 Sitecore 图像字段中，渲染器不会为您创建 img 标签。所以你有两个选择：

将字段类型切换为图像并将标志添加到 Sitecore（如您所述）
更改 html 以显示 img 标签：<img src="@Model.NationalityFlag"/>（请注意，在这种情况下，您需要为编辑器提供编辑选项 - 您可以在编辑模式下更改输出或使用编辑框）

在 Sitecore 页面上显示图标 (MVC)

Display an Icon on a Sitecore page (MVC)

icons

sitecore

sitecore-mvc