使用C#编程以编程方式更改CSS文件

Question

使用C#的ASP.NET。我是这种编程语言的新手，并且想知道是否有可能做出改变。

.main
{
    padding: 0px 12px;
    margin: 0px 0px 0px 0px;
    min-height: 630px;
    width:auto;
    background-image:url('background.png');
  }

基于按钮单击的背景图片URL。通过C#代码实现基于按钮单击

protected void initiative_Click(object sender, ImageClickEventArgs e)
        {
            Session["agency"] = "Initiative";
        }

但最重要的是，CSS文件与按钮点击所在的不同页面相关联。

- user1776590

---

你能否用 JavaScript 在客户端完成这个操作？ - GarethL

我已经尝试过了，但它不起作用...所以想知道是否可能。 - user1776590

Answer 1

选项1 与其更改CSS文件，不如根据会话应用不同的类。

.main
{
    padding: 0px 12px;
    margin: 0px 0px 0px 0px;
    min-height: 630px;
    width:auto;
}

.agency1 { background-image: url('agency1.png'); }
.agency2 { background-image: url('agency2.png'); }
.agency3 { background-image: url('agency3.png'); }

然后在您的 div 中添加两个类

<div class="main <%=Session["agency"]%>"></div>

选项2 创建一个通用处理程序，呈现特定的CSS并将其添加到您的页面中

<link href="GenerateCss.ashx" rel="stylesheet" />

在你的 GenerateCss.ashx.cs 文件中，你会有类似这样的内容。

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string image = "main";
        if (context.Session != null && context.Session["agency"] != null)
        {
            image = context.Session["agency"].ToString();
        }

        string result = ".main{padding: 0px 12px; margin: 0px 0px 0px 0px; min-height: 630px; width:auto; background-image:url('" + image + ".png');}";
        context.Response.Write(result);
    }

非常小心，如果使用不当，这可能会为您设置XSS攻击 您需要确保session["agency"]不受用户控制。也就是说，用户不能提供该值，因为这将允许他们注入任何他们想要的内容。

我不建议使用第二个选项，因为您将为每个请求调用它，而且在可以使其静态的情况下不断生成CSS并不是一个好主意。如果您可以使用选项1，我认为它会更好。

- nerdybeardo

---

但是代码所在的页面却无法加载，因为它位于 site.master 文件中。 - user1776590

一旦您点击按钮，将触发一个后台事件，该事件将重新加载页面。如果您根据会话中的内容命名图像名称，则在导航到其他页面时，您将不会遇到问题。 - nerdybeardo

Answer 2

只需创建另一个类似于.main的CSS类，除了background-image属性之外。

.someclass
{
    padding: 0px 12px;
    margin: 0px 0px 0px 0px;
    min-height: 630px;
    width:auto;
    background-image:url('newbackground.png');

}

例子：

<div id="myDiv" runat="server" class="main"></div>

  protected void initiative_Click(object sender, ImageClickEventArgs e)
  {
     myDiv.CssClass="someclass"
  }

注意：你需要确保你的 div 标签有 runat="server" 属性，这样才能够从后端代码访问它。

- Priyank Patel

---

@user1776590 你想要更改哪些控件的背景图像？ - Priyank Patel

@user1776590 你想要改变body的背景图片吗？ - Priyank Patel

<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>

</div> - user1776590

这会更改当前页面的背景还是转到另一个页面，因为它具有不同于先前页面的site.master。 - user1776590

@user1776590 我认为当前页面。 - Priyank Patel

Answer 3

你可以有类似这样的代码：

<div class="main" id="mainContainer" runat="server"><asp:ContentPlaceHolder ID="MainContent" runat="server"/></div>

在服务器端，执行以下操作：

mainContainer.Attributes.Add("style", "background-image('myImage.png')");

或者，更好的方法是，您可以更改CSS类：

mainContainer.Attributes.Add("class", "className");

- Razvan Trifan

---

这行代码位于母版幻灯片上，而不是正在运行的页面上。 - user1776590

Answer 4

如果你真的需要更改CSS，那么我可以推荐这个CSS解析器，它将使你能够读取CSS文件，更改它，然后再次写出。但正如已经指出的那样，通过在相关的HTML元素上设置样式来在客户端进行更改可能更好。

- Polyfun