如何在 ASCX 文件中动态设置背景颜色？

Question

我有一个名为 AegHero 的 ASCX 文件，其中包含 WebPart 的标记。我还有一个 BackgroundColor 属性包含一个 class 名称，该 class 名称对应于具有特定背景颜色的 class。

我认为我的问题是我没有在后面的代码中正确定义值。我正在使用下拉菜单让用户 select 一种颜色：

这是我的 AegHero.ascx:

<asp:PlaceHolder runat="server">
    <div id="mainHeroContainer" class="fullWidth-hero-container <%= BackgroundColor %>">
        <div class="fullWidth-hero-container-inner">
            <h2 class="fillWidth-hero-title"><%=Title %></h2>
            <p class="fillWidth-hero-subtilte"><%=SubTitle %></p>

            <% if (ShowButton)
                {%>
            <a class="btn button" href="<%= ButtonUrl %>"><%= ButtonLabel %></a>
            <%} %>
        </div>
    </div>
</asp:PlaceHolder>

下面是我的代码：

public partial class AegHero : GenericWebPart
    {
        protected string Title => Html("Title", string.Empty);
        protected string SubTitle => Html("subTitle", string.Empty);
        protected bool ShowButton => GetBooleanValue("ShowButton", false);
        protected string ButtonUrl => StringProperty("ButtonUrl", string.Empty);
        protected string ButtonLabel => StringProperty("ButtonLabel", string.Empty);
        protected string BackgroundColor
        {
            get { return StringProperty("BackgroundColor", string.Empty); }
            set { BackgroundColor = value; }
        }

        public override void OnContentLoaded()
        {
            base.OnContentLoaded();

            if (BackgroundColor.CompareTo("#002147") == 0)
            {
                BackgroundColor = "perussian-backGround";
            }
            else if (BackgroundColor.CompareTo("#0077c2") == 0)
            {
                BackgroundColor = "lochmara-backGround";
            }
            else if (BackgroundColor.CompareTo("#858e99") == 0)
            {
                BackgroundColor = "gray-backGround";
            }
        }
    }
}

这是我的 css classes:

.gray-backGround {
  background: #858e99;
}

.lochmara-backGround {
  background: #0077c2;
}

.perussian-backGround {
  background: #002147;
}

我正在尝试根据收到的十六进制值设置 <%= BackgroundColor %>；然而，当我查看我的 chrome 检查器时， class 没有改变。如何正确地从 backgroundColor 属性中获取值并将其设置为 <div>?

Chrome 检查员：

Answer 1

您可能想了解如何 create/develop custom webparts 开始。我这样说是因为您 public 属性没有从 UI 中的 Web 部件检索存储的值。这是一个标准的属性示例：

public string BackgroundColor
{
    get
    {
        return DataHelper.GetNotEmpty(GetValue("BackgroundColor"), string.Empty);
    }
    set
    {
        SetValue("BackgroundColor", value);
    }
}

GetValue("BackgroundColor") 方法获取您在 Kentico UI 的 Web 部件属性上创建的列的字符串名称，并检索存储在数据库中的给定 page/template。这允许编辑器 select 或从前端 Kentico UI 输入颜色，并允许您在代码中使用它。

阅读更多文档，它应该会让您朝着正确的方向前进。

如何在 ASCX 文件中动态设置背景颜色？

How to dynamically set the background color in an ASCX file?

c#

asp.net

kentico

ascx