如何从 aspx.cs 页面后面的代码中设置 a:before css 样式答案

【问题标题】：How to set a:before css style from code behind aspx.cs page如何从 aspx.cs 页面后面的代码中设置 a:before css 样式
【发布时间】：2017-01-19 18:43:04
【问题描述】：

我的 aspx.cs 页面中有一个属性，其中包含图像的路径。我需要将此路径设置为 a:before 在 css 中的背景图像，如下所示：

我在 aspx.cs 页面中的属性名称是：FirstLinkIcon

现在在 .aspx 页面中我正在尝试：

<style>
    .m-quick-links ul li a:before {
        background-image: url('<%=FirstLinkIcon%>');
        background-position: 0 -4164px;
    }
</style>

但由于在 css 中使用，它在渲染页面时抛出错误。

我也尝试从后面的代码中设置这种样式：

firstLinkUrl.Style.Add("background-image", FirstLinkIcon);

但它在锚标记上设置背景图像而不是 a:before

请建议我如何从后面的代码中设置 a:before 样式？或者如果不能从后面的代码中完成，那么我如何访问 aspx 页面上的 css 中的代码后面的属性，如上所述？

我已经搜索过它，但没有得到任何帮助，所以发布为一个问题。

【问题讨论】：

您有母版页还是只有一个简单的 aspx 页面？
你说But it is throwing error in rendering page due to <%= %> use in css，我测试了它，它没有问题。如果您对您的场景进行更多解释，我可以帮助您比使用LiteralControl 的答案更简单
我也有一个母版页.. 但我只需要在特定的 ascx 页面上使用这种样式。我也在使用 Kentico CMS，因为我的 ascx 页面有一个 Web 部件，所以当我在我的 ascx 页面上使用内部样式标记时，我的 Web 部件没有加载并由于关键字。 @S.Serp
如果您有任何比 LiteralControl 更好的简单解决方案，请建议我也尝试一下。谢谢@S.Serp
你在哪里定义了style 标签？在那个usercontrol 或母版页或aspx ..？我在母版页和简单的 aspx 页面（不使用任何母版）中测试了<%=..%>，它可以工作。

标签： c# asp.net

【解决方案1】：

除非我忘记了 ASP.NET 的某些内容，否则无法在运行时修改关于伪元素的任何内容，而无需直接更改 <style> 元素。我建议在非伪元素中包含您需要的任何数据或逻辑。

【讨论】：

【解决方案2】：

经过研究，我终于找到了解决问题的方法。为此，我为 LiteralControl 创建了一个对象，然后使用字符串生成器通过在其中附加我的属性创建了一个样式标记作为字符串，现在我已将 LiteralControl 的 Text 属性初始化为上述样式标记字符串，最后将 LiteralControl 添加到页眉。

它在我的页面标题中使用属性值渲染生成的样式标记，并且渲染的样式应用于我的页面。以下是我在后面的代码中使用的代码：

System.Web.UI.LiteralControl ltr = new System.Web.UI.LiteralControl();
StringBuilder sb = new StringBuilder();
sb.Append("<style type=\"text/css\" rel=\"stylesheet\"> .m-quick-links ul li a:before { background-image: url(");
sb.Append(FirstLinkIcon); //here i am appending property value in css style
sb.Append(") !important; } </style>");
ltr.Text = sb.ToString();
this.Page.Header.Controls.Add(ltr);

以下是在我的页面标题上呈现的样式标记：

<style type="text/css" rel="stylesheet"> .m-quick-links ul li a:before { background-image: url(http://localhost:8082/assets/img/sprites/global-se8a7877705.png) !important; } </style>

【讨论】：

也可以直接用HtmlGenericControl style = new HtmlGenericControl("style");代替LiteralControl

【解决方案3】：

我在style 中简单地使用<%=...%> 进行了测试，并确保它有效。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl1.ascx.cs" Inherits="TestWebForm1.UserControl1" %>
<style>
  .class1:before { content:'<%=getContent()%>'; color: green; }
</style>

<div class="class1" style=" padding:10px; border:1px solid silver; width:300px;">
  <span>This is UserControl1:</span><br />

  <asp:TextBox runat="server" ID="utxt1" width="100px"></asp:TextBox>
  <asp:Button runat="server" ID="ubtn1" Text="+" OnClick="ubtn1_Click" />

</div>

及其背后的代码：

public partial class UserControl1 : System.Web.UI.UserControl
{

    public string getContent()
    {
        return DateTime.Now.ToShortTimeString();
    }
}

请注意，以这种方式在您的usercontrol 中嵌入样式标签并不好，因为它们将在您使用它们的body 中呈现（而不是在<head> 部分中）。

请说说你的情况有什么问题？

【讨论】：

好的.. 感谢您的回复，如果它在您的最终工作，那么我认为在我的应用程序中由于 Kentico CMS 而发生了一些事情，因为它不适合我。我在 kentico 中为我的应用程序的每个用户控件（.ascx 页面）都有一个 Web 部件，所以当我使用这个内部样式标记时，我的 Web 部件不会呈现并抛出无效字符错误