選擇自定義控制CSS文件中的ASP MVC

Question

我有這樣的HTML幫助

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文件。這是做到這一點的正確方法嗎？

Answer 1

這是正確的做法嗎？

號

有你的代碼中的許多問題，我不知道從哪裏開始。如果你不關心我即將發生的爭吵，你可以直接跳到我的答案的末尾，在那裏我提出了你的幫助者可能的改進。

你不應該在ASP.NET MVC應用程序中硬編碼URL。處理網址時，您應該始終使用網址助手。

所以不是：

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

你應該使用的網址助手：

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>。這是你想要的嗎？

---

因此，回顧一下，你真的應該分裂成那些助手2：

一個產生的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) 
...