直接通过User Control生成HTML-asp.net页面的换皮肤方案

简介: 前些日子看了园友Jeffrey Zhao的关于User Control生成HTML的两篇文章. 因为我不喜欢看到我们的工程中有比较多的ashx文件(同时对于IHttpHandler接口,我的意见是尽量尝试不用IHttpHandler),就琢磨了一下如何不用这个ashx和IHttpHandler也能做到同样的功能,有点发现.

前些日子看了园友Jeffrey Zhao的关于User Control生成HTML的两篇文章. 因为我不喜欢看到我们的工程中有比较多的ashx文件(同时对于IHttpHandler接口,我的意见是尽量尝试不用IHttpHandler),就琢磨了一下如何不用这个ashx和IHttpHandler也能做到同样的功能,有点发现.在这里提出另外一个方法,和大家分享.核心就是覆盖Page类的Render方法.

先来看我的一个用来做皮肤的HTML文件HTMLPage1.htm:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
< HTML >
    
< HEAD >
        
< TITLE ></ TITLE >
        
< META  NAME ="GENERATOR"  Content ="Microsoft Visual Studio 7.0" >
    
</ HEAD >
    
< BODY >
        
< P >< FONT  face ="宋体" > test </ FONT ></ P >
        
< P >< FONT  face ="宋体" > testee </ FONT ></ P >
        
<!-- $MyUserControl1$ -->
        
< P >< FONT  face ="宋体" > teest </ FONT ></ P >
        
< P >< FONT  face ="宋体" > Tttttest </ FONT ></ P >
        
<!-- $MyUserControl2$ -->
        
< P >< FONT  face ="宋体" > Ttttessssttt </ FONT ></ P >
        
< P > &nbsp; </ P >
    
</ BODY >
</ HTML >

 

这个HTML文件十分简单.当然实际中你可以做得很复杂,做试验就简单点.只要原理通就可以了. 其中有两个特别得地方:<!--$MyUserControl1$-->是用来标记在此处要嵌入一个叫MyUserControl1的UserControl, <!--$MyUserControl2$-->也类似.就是说这个HTML文件有两块地方的内容要由两个UserControl来提供.这是一个特殊的HTML文件,需要一个特殊的呈现器来将其解释并呈现出来.我们来看这个特殊的呈现器:一个覆盖了Render方法的aspx页面.

WebForm1.aspx:

<% @ Page language = " c# "  Codebehind = " WebForm1.aspx.cs "  AutoEventWireup = " True "  EnableEventValidation = " false "  Inherits = " WebApplication1.WebForm1 "  validaterequest = " false "   %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
< HTML >
    
< HEAD >
        
< title > WebForm1 </ title >
        
< meta  name ="GENERATOR"  Content ="Microsoft Visual Studio 7.0" >
        
< meta  name ="CODE_LANGUAGE"  Content ="C#" >
        
< meta  name ="vs_defaultClientScript"  content ="JavaScript" >
        
< meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
    
</ HEAD >
    
< body >
        
< form  id ="Form1"  method ="post"  runat ="server" >
        
</ form >
    
</ body >
</ HTML >

其实就是一个空的aspx页面,有一个服务器端的Form而已. 稍有不同的是要加上: EnableEventValidation="false"和validaterequest="false",原因稍后再说.

再来看这个页面的后端代码WebForm1.aspx.cs:

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Text;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;

namespace  WebApplication1
{
    
///   <summary>
    
///  Summary description for WebForm1.
    
///   </summary>
     public   partial   class  WebForm1 : System.Web.UI.Page
    {

        
protected   void  Page_Load( object  sender, System.EventArgs e)
        {
            MyUserControl1 ctl1;
            MyUserControl2 ctl2;
            ctl1 
=  (MyUserControl1) this .Page.LoadControl( " MyUserControl1.ascx " );
            ctl2 
=  (MyUserControl2) this .Page.LoadControl( " MyUserControl2.ascx " );
            
this .Page.Controls.Add(ctl1);
            
this .Page.Controls.Add(ctl2);
        }

        
public   override   void  VerifyRenderingInServerForm(Control control)
        {
            
return ;
        }

        
protected   override   void  Render(HtmlTextWriter writer)
        {
            StringBuilder strBuilder;
            System.IO.StringWriter strWriter;
            System.Web.UI.HtmlTextWriter htmlWriter;
            
string  strResponse;
            
string  strControl;

            System.IO.FileStream fileStream 
=  System.IO.File.OpenRead(Server.MapPath( " HTMLPage1.htm " ));
            System.IO.TextReader rd 
=   new  System.IO.StreamReader(fileStream);
            strResponse 
=  rd.ReadToEnd();


            strBuilder 
=   new  StringBuilder();
            strWriter 
=   new  System.IO.StringWriter(strBuilder);
            htmlWriter 
=   new  System.Web.UI.HtmlTextWriter(strWriter);
            
this .Controls[ 1 ].RenderControl(htmlWriter);
            strControl 
=  strBuilder.ToString();
            strControl 
=  strControl.Replace( " </form> " string .Empty);
            strResponse 
=  strResponse.Replace( " <BODY> " " <BODY> "   +  strControl);
            strResponse 
=  strResponse.Replace( " </BODY> " " </FORM></BODY> " );

            strBuilder 
=   new  StringBuilder();
            strWriter 
=   new  System.IO.StringWriter(strBuilder);
            htmlWriter 
=   new  System.Web.UI.HtmlTextWriter(strWriter);
            
this .Controls[ 3 ].RenderControl(htmlWriter);
            strControl 
=  strBuilder.ToString();
            strResponse 
=  strResponse.Replace( " <!--$MyUserControl1$--> " , strControl);

            strBuilder 
=   new  StringBuilder();
            strWriter 
=   new  System.IO.StringWriter(strBuilder);
            htmlWriter 
=   new  System.Web.UI.HtmlTextWriter(strWriter);
            
this .Controls[ 4 ].RenderControl(htmlWriter);
            strControl 
=  strBuilder.ToString();
            strResponse 
=  strResponse.Replace( " <!--$MyUserControl2$--> " , strControl);

            writer.Write(strResponse);
        }

        
#region  Web Form Designer generated code
        
override   protected   void  OnInit(EventArgs e)
        {
            
//
            
//  CODEGEN: This call is required by the ASP.NET Web Form Designer.
            
//
            InitializeComponent();
            
base .OnInit(e);
        }

        
///   <summary>
        
///  Required method for Designer support - do not modify
        
///  the contents of this method with the code editor.
        
///   </summary>
         private   void  InitializeComponent()
        {
        }
        
#endregion
    }
}

 

解释:

1. Page_Load中须将要呈现的两个UserControl装入,并且不管是Get还是Post都要执行.只有这样才能让这两个UserControl经历Page请求的生命周期,同时让asp.net维持这两个UserControl的ViewState和客户端的事件响应代码.

2.覆盖VerifyRenderingInServerForm方法是为了让asp.net引擎不产生一些诸如UserControl中的服务器端TextBox控件需要在一个服务器端的Form中运行的错误信息.这样在UserControl中放置任何一个服务器端控件都可以了.

3.覆盖默认的Render方法. 这个自定义的Render方法先读入我的Html皮肤文件. 然后构造了htmlwriter, 用于保存form的html输出. 我在WebForm1.aspx里面定义的一个空的服务器端Form, 用RenderControl方法来取得其HTML输出.注意,因为这个Form经历了Page请求的生命周期,所以这个Form的HTML输出都带有ViewState和客户段PostBack响应的javascript代码. 请特别注意这几行代码:

            strControl = strControl.Replace("</form>", string.Empty);     //去掉form的HTML内容最后的</form>,只留下前面的<form>....
            strResponse = strResponse.Replace("<BODY>", "<BODY>" + strControl);    //asp.net form和HTML皮肤文件进行结合
            strResponse = strResponse.Replace("</BODY>", "</FORM></BODY>");       //asp.net form和HTML皮肤文件进行结合

    我们已经得到Form的HTML输出,其内容是这样的: <form>..........</form>. <form>标签在两头. 因为要把这个Form的内容和HTML皮肤的内容相结合.必须在皮肤HTML中的<BODY>后面加上<form>的内容, 同时在皮肤HTML中的</BODY>之前加上</form>. 这样就成了一个asp.net的form.  有读者可能会问,能不能在此页面中做多个服务器段的Form, 回答是不行. 原因是asp.net的引擎从1.0开始就不支持一个aspx页面中有多一个的服务器段form.据我所知这一点一直没有改变.

    Form的HTML内容已经处理了, 两个UserControl也类似, 用RenderControl方法取到其HTML内容, 再用String的Replace方法将我们的特殊标记替换成UserControl的HTML内容. 注意,因为这两个UserControl经历了Page请求的生命周期, 所以其HTML就带有相应的客户端javascipt PostBack方法, 能响应如Click等等事件.

4. 关于WebForm1.aspx里面的EnableEventValidation="false"和validaterequest="false", 因为asp.net服务器在处理Post过来的请求时要验证其请求是否原始的Page产生,如果我们不加两个false, 当我们点击UserControl上的按钮进行PostBack时, asp.net服务器会保错. 因为这个改造的Page已经不是我们原始的那个Page. 

关于通用化的考虑:

1.大凡采用皮肤的asp.net应用一般不会只有一套皮肤,这些皮肤HTML可以存在数据库中. 在用的时候不必象这里采用的方式从一个HTML文件中取出来,而可以采用从数据库中取出.

2.针对不同页面内容,HTML皮肤可以引入不同的UserControl. 这就要求特殊的呈现器在Page_load中解析HTML皮肤,根据HTML皮肤的指定,来装入相应的UserControl.

3. 如何向UserControl传递参数? 因为有些UserControl需要一些参数才能显示相应的内容, 我想在UserControl的代码中完全可以访问Request.Form或者Request.QueryString来取得所需要的参数.

关于内存开销,性能的问题

目前这样的样例代码还没有考虑太多这方面的问题. 我认为可能的问题包括:

如果一个HTML皮肤引入较多的UserControl时,可能会有性能上的问题.

在这里的String.Replace比较多.内存开销可能会比较大.

水平有限,欢迎指正.

 另注: 此方法在asp.net 1.1/2.0/3.0下都可行

对博客园的话:不知道怎么回事,居然点一下发出两篇Post了.有意思.

目录
相关文章
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
3月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
48 5
|
10天前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
|
19天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
40 2
|
1月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
33 1
|
2月前
|
移动开发 编解码 监控
HTML5 Video(视频)作为背景的优化方案
使用 HTML5 `&lt;video&gt;` 标签作为网页背景视频可以提升视觉效果,但需优化以确保性能和用户体验。主要方法包括:选择合适的视频格式(MP4、WebM、Ogg)和分辨率(720p 或更低),压缩文件大小,确保视频静音和循环播放,使用 CSS 设置全屏样式,根据设备和网络条件加载视频或静态图像,使用 `playsinline` 属性和延迟加载技术提高性能,确保无障碍性,并监控页面加载时间。合理应用背景视频可增强网站视觉效果而不影响用户体验。
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
46 6
|
30天前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
59 0
|
1月前
|
XML Web App开发 数据格式
HTML 页面显示 XML 数据
10月更文挑战第2天
|
1月前
|
数据可视化 小程序 JavaScript
DIYGW可视化快速生成VUE3静态html页面
DIYGW可视化快速生成VUE3静态html页面
40 0