『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\">\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>