Choose CSS file for a custom control in ASP MVC

Question

I have this Html Helper

public static MvcHtmlString EditButton(this HtmlHelper html, string action,
        string controller, bool state, Themes theme)
    {
        var url = new UrlHelper(html.ViewContext.RequestContext);
        var linkBuilder = new TagBuilder("link");
        string path;

        switch (theme)
        {
            case Themes.brown:
                path = "../../Content/themes/" + Themes.brown .ToString()+ "/style.css";
                break;
            case Themes.darkblue:
                path = "../../Content/themes/" + Themes.darkblue.ToString() + "/style.css";
                break;
            case Themes.darkorange:
                path = "../../Content/themes/" + Themes.darkorange.ToString() + "/style.css";
                break;
            case Themes.defaultTheme:
                path = "../../Content/themes/" + Themes.defaultTheme.ToString() + "/style.css";
                break;
            case Themes.green:
                path = "../../Content/themes/" + Themes.green.ToString() + "/style.css";
                break;
            case Themes.greyblue:
                path = "../../Content/themes/" + Themes.greyblue.ToString() + "/style.css";
                break;
            case Themes.lightblue:
                path = "../../Content/themes/" + Themes.lightblue.ToString() + "/style.css";
                break;
            case Themes.lightorange:
                path = "../../Content/themes/" + Themes.lightorange.ToString() + "/style.css";
                break;
            case Themes.pink:
                path = "../../Content/themes/" + Themes.pink.ToString() + "/style.css";
                break;
            case Themes.red:
                path = "../../Content/themes/" + Themes.red.ToString() + "/style.css";
                break;
            case Themes.yellow:
                path = "../../Content/themes/" + Themes.yellow.ToString() + "/style.css";
                break;
            default:
                path = "../../Content/themes/" + Themes.defaultTheme.ToString() + "/style.css";
                break;
        }
        linkBuilder.MergeAttribute("href", "@Url.Content(" + path + ")");
        linkBuilder.MergeAttribute("rel", "stylesheet");
        linkBuilder.MergeAttribute("type", "text/css");

        //génrer le tag <a>
        var builder = new TagBuilder("a");

        //ajouter les différents attributs du tag
        builder.MergeAttribute("href", url.Action(action, controller));
        builder.MergeAttribute("alt", "edit");
        builder.MergeAttribute("title", "Edit");



        if (state)
        {
            builder.AddCssClass("edit_active");
        }

        else
        {
            builder.AddCssClass("edit_inactive");
        }

        string anchorHtml = builder.ToString(TagRenderMode.Normal);

        return MvcHtmlString.Create(anchorHtml);
    }

I want to choose the CSS file for each theme. Is that the right way to do it ?

Darin Dimitrov · Accepted Answer · 2012-03-06 17:06:11Z

1

Is that the right way to do it ?

No.

There are many issues with your code, I don't know where to start. You could directly skip towards the end of my answer where I present a possible improvement of your helper if you don't care about my rants that are about to follow.

You should never hardcode urls in an ASP.NET MVC application. You should always use url helpers when dealing with urls.

So instead of:

path = "../../Content/themes/" + Themes.brown .ToString()+ "/style.css";

you should use the url helper:

path = url.Content(string.Format("~/Content/themes/{0}/style.css", Themes.brown));

Obviously the same remark applies to the other switch cases.

and then replace:

linkBuilder.MergeAttribute("href", "@Url.Content(" + path + ")");

with:

linkBuilder.Attributes["href"] = path;

Also your entire switch statement could probably be replaced with a single line of code:

var path = url.Content(string.Format("~/Content/themes/{0}/style.css", theme));

In addition to that you don't seem to be doing anything useful with the linkBuildervariable that you construct. You build it and leave to be garbage collected without ever injecting it into the result.

Another issue is that you never set any content for the anchor. You are simply generating an empty <a>. Is it what you want?

So, to recap, you should really split those into 2 helpers:

One that generates the CSS <link> for the choosen theme and one that renders the anchor.

Let's roll them:

public static IHtmlString ThemeLink(this HtmlHelper html, Themes theme)
{
    var url = new UrlHelper(html.ViewContext.RequestContext);
    var linkBuilder = new TagBuilder("link");
    var path = url.Content(string.Format("~/Content/themes/{0}/style.css", theme));
    linkBuilder.Attributes["href"] = path;
    linkBuilder.Attributes["rel"] = "stylesheet";
    linkBuilder.Attributes["type"] = "text/css";
    return new HtmlString(linkBuilder.ToString(TagRenderMode.SelfClosing));
}

and the button:

public static IHtmlString EditButton(
    this HtmlHelper html,
    string action,
    string controller,
    bool state
)
{
    var url = new UrlHelper(html.ViewContext.RequestContext);
    var htmlAttributes = new RouteValueDictionary(new
    {
        alt = "edit",
        title = "Edit"
    });
    if (state)
    {
        htmlAttributes["class"] = "edit_active";
    }
    else
    {
        htmlAttributes["class"] = "edit_inactive";
    }
    return html.ActionLink(" ", action, controller, null, htmlAttributes);
}

and then in your Layout or a dedicated overriden section in your view for the <head> you will first include the correct CSS:

@section Styles {
    @Html.ThemeLink(Themes.brown)
}

and then later in your code you will generate buttons:

@Html.EditButton("myaction", "mycontroller", true)
@Html.EditButton("myaction", "mycontroller", false)
...

edited Mar 6, 2012 at 17:06

answered Mar 6, 2012 at 16:51

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

7 Comments

kbaccouche Over a year ago

Thanks a lot, sorry for the messy code I just started with .net

Darin Dimitrov Over a year ago

@the_ruby_racer, no worries, we all must start somewhere and then gradually improve.

kbaccouche Over a year ago

Isn't there a way to create two controls in the same page and each one has its own theme ?

Darin Dimitrov Over a year ago

@the_ruby_racer, you could append an additional CSS class to the button which will indicate the theme.

kbaccouche Over a year ago

sorry for bothering you again, but the theme has to be related to a CSS file. So when I choose a control to be linked to a theme, I want it to be related to a specific CSS file. Is that possible ?

|

Collectives™ on Stack Overflow

Choose CSS file for a custom control in ASP MVC

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related