在ASP MVC中为自定义控件选择CSS文件

时间:2012-03-06 16:48:39

标签: asp.net-mvc-3 razor html-helper

我有这个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);
    }

我想为每个主题选择CSS文件。这是正确的方法吗?

1 个答案:

答案 0 :(得分:1)

  

这是正确的方法吗?

没有

您的代码存在许多问题,我不知道从哪里开始。你可以直接跳到我的答案的最后,如果你不关心我将要跟随的咆哮,我会提出你帮助的可能改进。

您永远不应该在ASP.NET MVC应用程序中对URL进行硬编码。在处理网址时,您应该始终使用网址助手。

所以而不是:

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

你应该使用url helper:

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

显然,同样的说法适用于其他开关案例。

然后替换:

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

使用:

linkBuilder.Attributes["href"] = path;

此外,您的整个switch语句可能会被一行代码替换:

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

除此之外,您似乎没有对您构造的linkBuilder变量做任何有用的事情。你构建它并留下垃圾收集而不将其注入结果。

另一个问题是您从未为锚点设置任何内容。您只是生成一个空的<a>。这是你想要的吗?


所以,回顾一下,你应该把它们分成两个帮手:

为选择的主题生成CSS <link>的一个,以及渲染锚的一个。

让我们滚动它们:

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

和按钮:

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

然后在您的布局或视图中<head>的专用覆盖部分,您将首先包含正确的CSS:

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

然后在代码中生成按钮:

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