zoukankan      html  css  js  c++  java
  • 『Asp.Net 组件』Asp.Net 服务器组件 内嵌CSS:将CSS封装到程序集中

    代码:

    <span style="font-family:Microsoft YaHei; font-size:12px">using System;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.HtmlControls;  
    using System.Web.UI.WebControls;  
    
    namespace DemoWebControl  
    {  
        /// <summary>  
        /// 自己的Asp.Net服务器组件 一个DIV控件:拖拽控件之后,自动输出 需要的 CSS到界面  
        /// </summary>  
        public class DemoCssCtrl : WebControl  
        {  
            protected bool IsDesignMode  
            {  
                get { return DesignMode || HttpContext.Current == null || Page == null; }  
            }  
            public string Text { get; set; }  
            protected override void OnPreRender(EventArgs e)  
            {  
                base.OnPreRender(e);  
    
                //输出 CSS 到 HTML文件的头部标签中  
                if (!IsDesignMode)  
                {  
                    HtmlLink linkCss = new HtmlLink();  
                    linkCss.Attributes.Add("type", "text/css");  
                    linkCss.Attributes.Add("rel", "stylesheet");  
                    linkCss.Attributes.Add("href", Page.ClientScript.GetWebResourceUrl(GetType(),   
                                                    "DemoWebControl.Resources.DemoCss01.css"));  
                    Page.Header.Controls.Add(linkCss);  
                }  
            }  
            //两个 嵌套的 DIV,内嵌CSS资源文件,拖拽控件即可实现 HTML 和 CSS文件 都输出到页面  
            protected override void Render(HtmlTextWriter output)  
            {  
                output.Write("<div id="" + ClientID + "" name="" +   
                    ClientID + "" class="OuterDiv">
    ");  
                output.Write("<div class="InnerDiv">");  
                output.Write(Text);  
                output.Write("</div>
    ");  
                output.Write("</div>
    ");  
            }  
        }  
    
    }  
    </span>  
    <span style="font-family:Microsoft YaHei; font-size:12px"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoCssPage.aspx.cs"   
    Inherits="AspNetDemo.DemoCssPage" %>  
    <%@ Register assembly="DemoWebControl" namespace="DemoWebControl" tagprefix="Demo" %>  
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <div>  
    
            <Demo:DemoCssCtrl ID="DemoCss1" Text="两个DIV嵌套" runat="server" />  
    
        </div>  
        </form>  
    </body>  
    </html>  
    </span>  

    嵌入资源:
    这里写图片描述
    嵌入css代码:

    <span style="font-family:Microsoft YaHei; font-size:12px">.OuterDiv{ border: 1px solid RED;background-color: Blue; float: inherit; 200px; height:150px; }  
    .InnerDiv   
    {  
        border: 1px solid Yellow;  
        /*内嵌CSS无法指定具体路径的 图片,所以需要将 图片的字节流转成 Base64 编码 内嵌到 CSS文件中*/  
        background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4Qn/wD/2Q==');  
        float: inherit; 140px; height:80px; margin: 35px 30px 35px 30px;color: White;  
        font-family: 微软雅黑; text-align: center;   
    }  
    
            </span>  

    运行截图:
    这里写图片描述
    相关技术点:

    将一个CSS文件 内嵌到 程序集中,需要设置 文件VS属性(生成操作:签入的资源);
    程序集项目 AssemblyInfo.cs 中需要加入如下代码(其中 WebResource 包括 资源名称,资源类型):

    <span style="font-family:Microsoft YaHei; font-size:12px">// 可以指定所有这些值,也可以使用“内部版本号”和“修订号”的默认值,  
    // 方法是按如下所示使用“*”:  
    // [assembly: AssemblyVersion("1.0.*")]  
    [assembly: AssemblyVersion("1.0.0.0")]  
    [assembly: AssemblyFileVersion("1.0.0.0")]  
    
    //此标识 可以让 拖拽的控件 自动以 Demo 作为 tagprefix 属性,比如:  
    //<%@ Register assembly="DemoWebControl" namespace="DemoWebControl" tagprefix="Demo" %>  
    [assembly: TagPrefix("DemoWebControl", "Demo")]  
    
    [assembly: WebResource("DemoWebControl.Resources.DemoImage01.jpg", "image/jpeg")]  
    [assembly: WebResource("DemoWebControl.Resources.DemoImage02.jpg", "image/jpeg")]  
    [assembly: WebResource("DemoWebControl.Resources.DemoImage03.jpg", "image/jpeg")]  
    
    [assembly: WebResource("DemoWebControl.Resources.DemoCss01.css", "text/css")]  
    [assembly: WebResource("DemoWebControl.Resources.DemoJs01.js", "text/javascript")]</span>  

    获取 程序集中的 内嵌文件的 Url代码是:Page.ClientScript.GetWebResourceUrl(GetType(), @”资源名称”);
    将CSS文件设置到 HTML的 链接到头部:

    <span style="font-family:Microsoft YaHei; font-size:12px">protected override void OnPreRender(EventArgs e)  
    {  
          base.OnPreRender(e);  
          //输出 CSS 到 HTML文件的头部标签中  
          if (!IsDesignMode)  
          {  
               HtmlLink linkCss = new HtmlLink();  
               linkCss.Attributes.Add("type", "text/css");  
               linkCss.Attributes.Add("rel", "stylesheet");  
               linkCss.Attributes.Add("href", Page.ClientScript.GetWebResourceUrl(GetType(),  
                                                    "DemoWebControl.Resources.DemoCss01.css"));  
               Page.Header.Controls.Add(linkCss);  
          }  
    }</span>  
  • 相关阅读:
    算术入门之加减乘除
    scanf的返回值
    Flutter 开发环境配置
    DbContextOptionsBuilder
    MarkDown 的简单用法
    C# 多线程安全集合类
    .NET Core 中使用 MemoryCache 缓存
    JWT
    什么是跨域?跨域解决方法
    .Net Core 中配置的高级用法
  • 原文地址:https://www.cnblogs.com/PearlRan/p/4833066.html
Copyright © 2011-2022 走看看