【问题标题】:How to add a css reference within a server control?如何在服务器控件中添加 CSS 引用?
【发布时间】:2010-11-24 21:22:32
【问题描述】:

我构建了一个使用自定义 CSS 的自定义服务器控件。我遇到的问题是我必须在使用控件的每个页面上设置对 css 文件的引用。

我可以在控件中设置这个引用吗?这样我就可以只添加控件而不用担心引用。

【问题讨论】:

    标签: c# .net asp.net css


    【解决方案1】:

    您需要按照以下步骤将 css/javascript/image 添加到 Web 控件本身中。

    1. 修改 AssemblyInfo.cs 文件,添加网络资源

      [程序集:System.Web.UI.WebResource("CustomControls.Styles.GridStyles.css", "text/css"), PerformSubstitution = true)]

    2. 将所需文件(css/javascript/images)添加到自定义服务器控制解决方案。请注意,我们可以在解决方案中添加文件夹,然后使用 '.'(dot)

    3. 单独添加它
    4. 更重要的是,我们应该将新添加的 css/javascript/image 文件的 BuildAction 属性从 Content 更改为 Embedded Resource。

    5. 此外,我们应该从 DLL 加载存储的资源。最好的事件是 OnPreRender 下面是渲染css的示例代码

      protected override void OnPreRender(EventArgs e) 
         {
              bool linkIncluded = false;
              foreach (Control c in Page.Header.Controls)
              {
                  if (c.ID == "GridStyle")
                  {
                      linkIncluded = true;
                  }
              }
              if (!linkIncluded)
              {
                  HtmlGenericControl csslink = new HtmlGenericControl("link");
                  csslink.ID = "GridStyle";
                  csslink.Attributes.Add("href", Page.ClientScript.GetWebResourceUrl(this.GetType(), "CustomControls.Styles.GridStyles.css"));
                  csslink.Attributes.Add("type", "text/css");
                  csslink.Attributes.Add("rel", "stylesheet");
                  Page.Header.Controls.Add(csslink);
              }
          }
      

    同样用于添加 javascript

    protected override void OnPreRender(EventArgs e)
        {
            string resourceName = "CustomControls.GridViewScript.js";
            ClientScriptManager cs = this.Page.ClientScript;
            cs.RegisterClientScriptResource(this.GetType(), resourceName);
        }
    

    类似地使用 CSS 文件中的添加图像。使用下面的代码

    background: url('<%=WebResource("CustomControls.Styles.Cross.png")%>') no-repeat 95% 50%;
    

    谢谢。

    【讨论】:

      【解决方案2】:

      这是我用来以编程方式向 Page 添加 css 引用的方法:

      HtmlLink link = new HtmlLink();
      link.Href = relativePath;
      link.Attributes["type"] = "text/css";
      link.Attributes["rel"] = "stylesheet";
      Page.Header.Controls.Add(link);
      

      也许你应该添加一些代码来检查css文件是否添加到标题控件中。

      【讨论】:

      • 我应该将它嵌入到自定义服务器控件的哪个位置?
      • 创作周期的哪个阶段?
      • CreateChildControls 是合适的,我认为。
      【解决方案3】:

      如果你想构建 webcontrol,它将是可重用的,并且在一个包含 css、js 和其他资源的程序集中,而不是你可以使用 WebResources

      Working with Web Resources in ASP.NET 2.0

      【讨论】:

        【解决方案4】:

        您可以使用ScriptManager 来实现 - 这也将帮助您将样式表嵌入到自定义控件库的 DLL 中。

        或者您可以只引用母版页中的 CSS。除非您要打包一个自定义控件库来销售等,否则 ScriptManager 与母版页解决方案相比需要付出很多额外的努力

        【讨论】:

          【解决方案5】:

          我认为您可以将Canavar's code 添加到一个基类中,该基类将包含在所有需要它的类中。

          public class myclass : BaseClass
          {
              var customCSS = customcss();
               Page.Header.Controls.Add(customCSS); }
          

          和你的基类:

          public class BaseClass : Page
          {
              public HtnlLink customcss(){
                  HtmlLink link = new HtmlLink();
              link.Href = relativePath;
              link.Attributes["type"] = "text/css";
              link.Attributes["rel"] = "stylesheet";
              return link;
          }
          }
          

          或者你可以沿着这条路线走

          myObject.Attributes.Add("style","width:10px; height:100px;");
          

          myObject.Attributes.Add("style",customStyle(););
          

          这是在你的基类中的什么地方

          public String customStyle()
          {
          return "width:10px; height:20px;";
          }
          

          customstyle 将是这样的函数:

          但我会假设您在网站的其余部分使用 CSS,所以也许可以通过这种方法将样式添加到您在所有页面上使用的样式表中,您可以使用以下代码:

          myObject.Attributes.Add("class","customControl");
          

          这将从您的主样式表中引用正确的 CSS 样式,始终包含在样式表中。

          除非我在这里遗漏了什么......

          【讨论】:

            猜你喜欢
            • 2011-02-08
            • 2011-06-03
            • 1970-01-01
            • 2012-12-05
            • 2016-02-27
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多