『Asp.Net 组件』Asp.Net 服务器组件内嵌CSS：将CSS封装到程序集中

2023-02-24 07:32:13

代码：

<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\">\r\n");

            output.Write("<div class=\"InnerDiv\">");

            output.Write(Text);

            output.Write("</div>\r\n");

            output.Write("</div>\r\n");

        }

    }  

}

</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; width: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; width: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>

码农公寓

相关文章