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

时间:2016-11-04 12:32:14

标签: icons sitecore sitecore-mvc

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

我有一个名为模型的驱动程序:

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使用存储库填充模型数据并将其返回到视图。

我有一个名为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方法,该方法启用页面编辑器支持。

最后我有一个名为精选的视图:

@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>

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

Page Output

我也试过发回一个普通的字符串而不是HtmlString但只返回原始值。

我想我要问的是如何在页面上显示我的图标,而不是在图标的情况下显示路径?或者我应该只将字段类型切换为图像并将图标作为图像添加到媒体库中?

1 个答案:

答案 0 :(得分:1)

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

  • 将字段类型切换为Image并将标志添加到Sitecore(如您所述)
  • 更改html以显示img标签:<img src="@Model.NationalityFlag"/>(请注意,在这种情况下,您需要为编辑器提供编辑功能 - 您可以在编辑模式下更改输出或使用编辑框)