2012-07-12 93 views
5

我是新來的ASP.NET工作,但我正在開發一個自定義控件,其中有一個多視圖控件,它顯示了一堆不同的東西。其中的一些顯示使用JQuery UI元素,如標籤和手風琴,這將有相當多的自定義。將CSS規則放在ASCX自定義控件中的位置?

因爲我將有很多CSS規則只適用於自定義控件中的元素(而不是我們網站的其他部分),所以我想知道在哪裏放置CSS樣式規則。

我通常只是把一個樣式表放在網站根目錄的某個地方,然後從那裏引用它。但是當我玩ASP.NET的時候,我感覺我應該把所有的代碼(包括CSS,JS等)放在自定義控件中。這讓人感覺更「程序化」,把所有東西放在一起。

任何人都可以adivse我應該如何做到這一點? ASP.NET中的Web開發的最佳實踐是什麼?

回答

7

如果你創建的控制是一個單獨的程序,你可以嵌入CSS文件的組件內,使其可重複使用的,並從控制創建直接鏈接到這些文件,然後在你的控制你將註冊他們在你的頁面被呈現爲link標籤

注:請記住,你需要以紀念在彙編的CSS文件作爲嵌入的資源

只需選擇您的文件|然後proeprties並改變其生成操作屬性並將其設置爲:嵌入式資源

enter image description here

在下面的代碼:

  • AjaxEnabled.Web.UI代表你的程序集的命名空間

  • DefaultStyle.css代表嵌入的CSS文件名稱

下面的代碼示例顯示步驟需要:(您的自定義服務器控件)

[assembly: WebResource("AjaxEnabled.Web.UI.DefaultStyle.css", "text/css")] 

    protected override void OnInit(EventArgs e) 
    { 
     base.OnInit(e); 

     if (this.Page.Header != null) 
     { 
      if (!this.Page.ClientScript.IsClientScriptBlockRegistered("defaultCss")) 
      { 
       var link = new HtmlLink(); 

       link.Href = this.Page.ClientScript.GetWebResourceUrl(
        typeof(YourControlType), 
        "AjaxEnabled.Web.UI.DefaultStyle.css" 
       ); 
       link.Attributes.Add("rel", "stylesheet"); 
       link.Attributes.Add("type", "text/css"); 

       this.Page.Header.Controls.Add(link); 
       this.Page.ClientScript.RegisterClientScriptBlock(
        typeof(Page), 
        "defaultCss", 
        string.Empty 
       ); 
      } 
     } 
    } 

你需要在你的頁面添加ScriptManager控制的實例包含自定義控件

<asp:ScriptManager runat="server" ID="sm"/> 

而在您的ASPX頁面中,您需要將header部分標記爲服務器控件

<head runat="server"> 

以下代碼:

link.Href = this.Page.ClientScript.GetWebResourceUrl(
       typeof(YourControlType), 
       "AjaxEnabled.Web.UI.DefaultStyle.css"); 

呈現一個鏈接直接嵌入在組件中的CSS文件


這種情況:

if (!this.Page.ClientScript.IsClientScriptBlockRegistered("defaultCss")) 
... 
this.Page.ClientScript.RegisterClientScriptBlock(
         typeof(Page), 
         "defaultCss", 
         string.Empty 
        ); 

確保CSS僅在頁面中呈現一次,即使您放棄了多個控件實例

+0

出於興趣,爲什麼需要單獨的程序集? – saille 2012-07-12 04:48:37

+0

只有當你想完全將你的風格封裝在控件中時才需要。如果你這樣做了,那麼你可以簡單地共享你的包含你的控件的ddl和CSS文件,因爲它們將被嵌入到程序集中。但是,如果您只打算在一個站點中使用您的控件,這不是必需的。我將更新答案以顯示最初使用嵌入程序集 – Jupaol 2012-07-12 04:51:21

+0

中的資源所需的代碼,但我不會分發代碼。但它是商業CMS的插件,所以一旦我滿意,我想我會接受這個解決方案,以便我們可以將完整的代碼作爲一個包發佈給其他人使用。感謝您的全面回答:) – nedlud 2012-07-12 06:19:28

3

建議我們使用外部樣式表編寫所有規則。但是,我們也可以用下面的方法寫在HTML/aspx文件的<head>節(又建議):

<style type="text/css"> 
    .customClass { 
     /* Add Rules here*/ 
    } 
</style> 

也可以使用任何地方在HTML/apsx/ASCX頁/控制上述方式(不推薦),但它也會起作用。

0

你應該把你正在使用的頁面。

爲什麼?

  1. 在頁面上的多個控件的情況下,如果你申請的風格/ JS到該用戶控件而不引用到外部樣式表或腳本,你會看到很多的CSS/JS代碼被重複每個單獨的控制。
  2. 更好地管理代碼。
  3. CSS的控制與頁面有關,而不是控件本身,所以同一個控件可以用於多個頁面,這可能需要不同的樣式。
+0

_在頁面上的多個控件的情況下,如果您將風格應用到usercontrol,您會看到很多CSS代碼被重複控制._ **這是不正確的,你可以控制只呈現一個CSS鏈接** – Jupaol 2012-07-12 05:11:15

+0

在他的問題中的OP說:「我覺得我應該把我所有的代碼(包括CSS,JS等)的自定義控制內」。這意味着他沒有考慮參考。 – 2012-07-12 05:12:31