客户端资源未加载到自定义块

Question

我需要客户端资源导入方面的帮助，根据我创建的 ClientResourceProvider 和 QbankClientResourceRegister 的文档。请检查以下内容。

QbankClientResourceRegister：

[ClientResourceRegistrator]
    public class QbankClientResourceRegister : IClientResourceRegistrator
    {
        public void RegisterResources(IRequiredClientResourceList requiredResources)
        {
            requiredResources.Require("epi-cms.widgets.base").AtHeader();
            requiredResources.Require("qbank.picker").AtFooter();
        }
    }

ClientResourceProvider：

[ClientResourceProvider]
    public class ClientResourceProvider : IClientResourceProvider
    {
        public IEnumerable<ClientResource> GetClientResources()
        {
            return new[]
            {
                  new ClientResource
                  {
                    Name = "epi-cms.widgets.base",
                    Path = Paths.ToClientResource("QbankModule", "ClientResources/Scripts/Editors/QBankMediaPicker.js"),
                    ResourceType = ClientResourceType.Script
                    
                  },
                  new ClientResource
                  {
                    Name = "qbank.picker",
                    Path = Paths.ToClientResource("QbankModule", "ClientResources/Scripts/qbank-connector.js"),
                    ResourceType = ClientResourceType.Script
                  }
            };
        }
    }

moduel 文件夹中的 module.config 文件：

<?xml version="1.0" encoding="utf-8"?>
<module name="QbankModule" loadFromBin="false" clientResourceRelativePath="" viewEngine="Razor" authorizationPolicy="episerver:cmsadmin"
        moduleJsonSerializerType="None" preferredUiJsonSerializerType="Net">
  <assemblies>
    <add assembly="Qbank.Connector.EpiServerModule5" />
    <add assembly="Qbank.Connector.EpiCore11" />
    <add assembly="Qbank.Connector.EpiCore" />
    <add assembly="Qbank.Connector.Core" />
  </assemblies>
  
  <clientResources>
    <add name="epi-cms.widgets.base" path="ClientResources/Styles/qbankplugin.css" resourceType="Style"/>
    <add name="qbank.picker" path="ClientResources/scripts/editors/QbankMediaPicker.js" resourceType="Script"/>
  </clientResources>
  
  <dojo>
    <paths>
      <add name="qbank" path="ClientResources/scripts" />
    </paths>
  </dojo>
</module>

加载以下特定块时我需要加载 QbankMediaPicker.js：

[ContentType(
    DisplayName = "Banner",
    GUID = "0d1c8743-4d48-470f-8afb-7e62d84f6092",
    GroupName = SystemTabNames.Content)]
    public class BannerBlock : BlockData
    {
        [Display(
           Name = "Header",
           Description = "Enter a header for the block",
           GroupName = SystemTabNames.Content,
           Order = 1
           )]
        [Required]
        public virtual string Header { get; set; }

        [Display(
            Name = "Description",
            Description = "Enter a Description for the block",
            GroupName = SystemTabNames.Content,
            Order = 2
            )]
        [Required]
        public virtual XhtmlString Description { get; set; }

        [Display(
             Name = "QBankSampleImage",
            Description = "QBankSampleImage for the block",
            GroupName = SystemTabNames.Content,
            Order = 3)]
        //[Qbank.Connector.EpiCore.DataAnnotations.MediaFormat("#310")]
        [UIHint(Qbank.Connector.Core.Web.UIHint.QBankMedia)]
        public virtual ContentReference QBankSampleImage { get; set; }

也从论坛中得到了此信息：

从部分视图/组件中请求资源已停止在 CMS12 中工作。该修复程序将在 12.4.0 中发布。请参阅此处的论坛主题：https://world.optimizely.com/forum/developer-forum/cms-12/thread-container/2022/2/require-client-resources-only-when-specific-block-type-is-rendered /

实际上，我将EPiServer.Framework和EPiServer.CMS.Core软件包升级到了最新版本（12.4.0）。但 EPiServer.CMS 包似乎还没有版本 12.4.*。但是，当我创建自定义块时，我仍然无法导入客户端资源。

关于版本，我注意到修复程序将在版本 12.4.0 上发布，那么它是在 EPiServer.CMS 包上吗？或者在 EPiServer.Framework / EPiServer.CMS.Core 包中？

如果是 EPiServer.CMS 包，是否意味着我们需要等待下一个版本（12.4.0）进行修复？或者您知道有什么解决方法吗？

Answer 1

您应该使用类似以下内容的内容来告诉 CMS 您的组件需要哪些客户端资源：

public class MyBlockViewComponent : ViewComponent
{
    public MyBlockViewComponent(IRequiredClientResourceList requiredClientResourceList)
    {
        requiredClientResourceList.RequireScript("/scripts/some-script.js, "someName", new[] { "someDependency" }).AtFooter();
    }

    // ...
}

此外，您需要确保在某处呈现 Footer 和/或 Header 部分，例如例如在共享布局视图中，例如 @Html.RequiredClientResources("Footer")。

编辑：请注意，您可以使用稍微不同的语法来加载命名资源而不是显式路径，上面只是一些示例代码。