Change a CSS file programmatically using c#

Question

Asp.net using c# I am new to this programming language and was wondering if it would be possible to change

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

the background image URL based on a button click.. Through then use of C# code based upon a button click

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

but the main thing is that the CSS file is liked to different page to where the button click is located.

I have tried and it dont work... so was wondering if it woiuld be possible — user1776590
– user1776590, Commented Oct 26, 2012 at 9:26

nerdybeardo · Accepted Answer · 2012-10-26 09:57:05Z

1

Option 1 Rather than change your CSS file apply different classes 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 your div

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

Option 2 Create a Generic Handler that renders the specific CSS and add that to your page

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

In your GenerateCss.ashx.cs file you would 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 could set you up for an XSS attack if used improperly You'll need to make sure that session["agency"] is not user controllable. By that I mean that the user cannot supply that value as this would allow them to inject anything they want in there.

I don't recommend the second option though because you're going to be calling this for every request and not a good idea to keep generating CSS when you can just make it static. If you can use option 1, I would say it would be better.

answered Oct 26, 2012 at 9:57

nerdybeardo

4,70525 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1776590 Over a year ago

but the page with the code in never loaded as it on the site.master file#

nerdybeardo Over a year ago

Once you click the button that will fire a postback event which will reload the page. If you base the image name on what is in the session then you will be fine when you navigate to the other page.

Polyfun · Accepted Answer · 2012-10-26 09:28:28Z

0

If you really need to change the CSS, then I can recommend this CSS parser, which will enable you to read in the CSS file, change it, and then write it out again. But as already pointed out, it may be better to change this client-side by setting the style on the relevant html element.

answered Oct 26, 2012 at 9:28

Polyfun

9,6914 gold badges34 silver badges40 bronze badges

Comments

Priyank Patel · Accepted Answer · 2012-10-26 09:37:43Z

0

Just make 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 that your div has runat="server" attribute in order to be accessible from code behind.

edited Oct 26, 2012 at 9:37

answered Oct 26, 2012 at 9:26

Priyank Patel

7,01611 gold badges62 silver badges88 bronze badges

5 Comments

Priyank Patel Over a year ago

@user1776590 What controls background-image are you trying to change?

Priyank Patel Over a year ago

@user1776590 Do you want to change background-image of the body?

user1776590 Over a year ago

user1776590 Over a year ago

will this change the backgournd on the current page or the one that it goes to as that has a different site.master to the previous page.

Priyank Patel Over a year ago

@user1776590 I think the current page.

Razvan Trifan · Accepted Answer · 2012-10-26 09:40:43Z

0

You could have something like:

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

On the server side, do this:

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

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

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

answered Oct 26, 2012 at 9:40

Razvan Trifan

5442 silver badges6 bronze badges

1 Comment

user1776590 Over a year ago

the line are on the master slide not the page that is running

Collectives™ on Stack Overflow

Change a CSS file programmatically using c#

4 Answers 4

2 Comments

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related