Modify CSS file programmatically using C #

Question

Asp.net using C # I am new to this programming language and wondered if it is possible to change

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

The URL of the background image based on the click of a button. Then use button based C # code

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

but the main thing is that the CSS file is like on another page where the button is located.

Answer 1

Option 1 Instead of modifying your CSS file, different classes are based on the session.

 .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'); } 

Then add two classes to the div

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

Option 2 Create a generic handler that displays specific CSS and adds it to your page

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

In your GenerateCss.ashx.cs file you will have something like this

  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); } 

Be extremely careful, as this can lead to an XSS attack if used improperly . You need to make sure that the ["agency"] session is not controlled by the user. By this, I mean that the user cannot provide this value, as this will allow them to enter anything there.

I do not recommend the second option, though, because you will name it for each request, and not to continue to generate CSS when you can just make it static. If you can use option 1, I would say that it would be better.

Answer 2

Just create another CSS class similar to .main , except for the background-image property

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

Example:

 <div id="myDiv" runat="server" class="main"></div> protected void initiative_Click(object sender, ImageClickEventArgs e) { myDiv.CssClass="someclass" } 

Note. You need to make sure your div has the runat = "server" attribute in order to be accessible from the code behind.

Answer 3

If you really need to change the CSS, I can recommend this CSS parser that will let you read in the CSS file, modify it, and then write it again. But, as already mentioned, it might be better to change this client side by setting the style in the corresponding html element.

Answer 4

You might have something like:

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

On the server side, do the following:

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

Or, even beter, you can change the CSS class:

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