mvc3 razor, CSS in Helper

Question

In an mvc 3 razor project I have a helper which creates a component. I can use this helper to create as many components as I need in the same page.

I have different folders containing css files and their images.

Can I specify the css style of each component from the helper?

i.e @html.MyComponent(100, 200, "pink") will uses the style.css in pink folder.

Ps: I am not using html5 neither css3

score 1 · Answer 1 · edited May 23 '17 at 12:34

1

If you would use classes instead of files it would be much easier. I would just use different styles for themes. You should look at this question: ASP.NET MVC 3, how to do themes right

edited May 23 '17 at 12:34

Community

1
1

answered Mar 12 '12 at 14:58

Tomas Jansson

22,767
13
83
137

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

ASP.NET MVC 3 Razor: Include JavaScript file in the head tag

I think the same thing can be applied but I don't know if you can do it from a helper.

edited May 23 '17 at 10:24

Community

1
1

answered Mar 12 '12 at 14:54

auo

572
1
7
16

thank you for your answer but this doesn't help me much. in each css file I have a MyComponent class but its attributes are not the same (color, background ...) I can' load all the css in the same time if I have many instance of the component in the same time. – mehdouch Mar 12 '12 at 15:01

score 0 · Answer 3 · answered Mar 12 '12 at 15:16

If you are set on doing it this way - then

You need to select the css file at the top for pink
You need to include all style sheets in loading.
You need to dynamically include style sheets when requested by MyComponent. This is tough as you may end up double including them. You can accomplish this via an ActionFilter to write out the css tags at the end, but this is a hack and I wouldn't recommend it.

Stick with convention and your styles should be requested at the top, so you need to know which styles you are using on the page. Your components shouldn't care about loading a style sheet, it should already be loaded which means you have to make this decision at the top of your page. Since you should already 'know' the names at this point (pink, etc) you can easily write the code at the top to request these files via a simply


<LINK href="@string.Format("/{0}/style.css",YourStyleSheetnameIePinkInThisExample)" rel="stylesheet" type="text/css">

mvc3 razor, CSS in Helper

3 Answers3