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 ?

Answer 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)
...