利用C#实现HTML模板的循环输出_C#

关于模板循环输出

数据感应也即数据捆绑，是一种动态的，web控件与数据源之间的交互，模板循环输出，是指使用 ui 前端设计的 html 模板片断，并结合数据记录进行循环输出的过程，比如，有如下如图输出：

如图人员列表是一个循环输出的过程，我们按照图示设计模板，并结合数据查询结果即可，模板代码如下：

<div id="pitemdetail" runat="server" class="query-box" onclick="waittip(this);window.location='answer.aspx?cid={wxmpcid}&pid={cid}'" 
                style="border-radius:5px; cursor:pointer; padding:10px; background-color:white; margin-bottom:10px">
                   <div style="display:flex;flex-direction:row; flex-wrap:wrap;justify-content:space-between; "><label style="cursor:pointer; font-size:12pt; color:gray; "  >
                   <b>{name}</b></label>{dtip}</div>
                    <div style="width:100%; color:silver; ">{dname}</div>
                    
                    <div></div>
</div><!-- pitemdetail  -->
 
<asp:literal id="result" runat="server"></asp:literal>

其中 id 为 pitemdetail 的 div 即为设计模板片断，其设计要点如下：

（1）需要添加 runat="server" 服务器标记

（2）输出的数据，用花括号和字段名表示，如代码中的 "{wxmpcid}","{name}" 。字段名可以用dataset.tables.colums 里的序号进行表示，如 “{0}”，“{1}” ，用序号表示，性能会略有提升，但从代码易读性来讲相对较差。

（3）不可在模板中放置其它服务器控件

id 为 result 的 literal 控件（用于显示最原始状态静态文本的输出控件），隶属于microsoft.web.ui.webcontrols 集合，该控件用于存储并显示最后的输出结果。

本文将介绍如何中通过 c# 实现操作 html 模板的循环输出。

准备数据源

我们在 ms sql server 创建 ccvc_pricelist（支付卡等级表），其结构如下表：

序号	字段名	类型	说明
1	[pname]	[nvarchar](10)	产品名称
2	[ccvc]	[int]	初始积分
3	[price]	[money]	产品价格
4	[logourl]	[nvarchar](500)	产品logo

执行如下创建表的 sql 语句：

create table [dbo].[ccvc_pricelist](
	[pname] [nvarchar](50) not null,
	[ccvc] [int] not null,
	[price] [money] not null,
	[logourl] [nvarchar](500) null,
) 
go

执行如下sql语句，创建一些数据：

 
insert into ccvc_pricelist(pname,ccvc,price,logourl]) values('礼遇卡',24000,1900.00,'v1.jpg');
insert into ccvc_pricelist(pname,ccvc,price,logourl]) values('金卡',56000,6900.00,'v2.jpg');
insert into ccvc_pricelist(pname,ccvc,price,logourl]) values('白金卡',120000,15900.00,'v3.jpg');
insert into ccvc_pricelist(pname,ccvc,price,logourl]) values('钻石卡',210000,18900.00,'v4.jpg');
insert into ccvc_pricelist(pname,ccvc,price,logourl]) values('至尊卡',1000000,78900.00,'v5.jpg');

通过查询分析器，执行查询sql语句，显示如下图：

最后我们将数据填充到 datareader ,并生成对应的二维数组。

范例运行环境

操作系统： windows server 2019 datacenter

数据库：microsoft sql server 2016

.net版本： .netframework4.0 或以上

开发工具：vs2019 c#

repeathtml 方法

设计与实现

repeathtml 方法主要是通过 object[,] 二维对象数组数据源进行提取并根据模板 html 循环输出到指定的接收控件上，其参数设置见下表：

序号	参数名	类型	说明
1	html	string	要输出的 htmltable 对象

getreaderdata 方法可以访问数据库数据表进行查询结果的提取，并转化为 object[,] 二维数组

repeathtml 方法实现代码如下：

arraylist paras=new arraylist();
string refsql="";
bool hastitle=false;
system.data.commandtype ct=system.data.commandtype.text;
 
 
public string repeathtml(string html)
{
                string rv = "";
                object[,] readerdata = getreaderdata("sqlserver","您的连接串",refsql,paras,hastitle,ct);
                if (readerdata == null) return "";
                if (hastitle == true)
                {
                    for (int k = 0; k < readerdata.getlength(1); k++) //列
                    {
                        string fieldname = readerdata[0,k].tostring();
                        html = html.replace("{" + fieldname + "}", "{" + k.tostring() + "}");
                    }
                }
                for (int i = (hastitle == true ? 1 : 0); i < readerdata.getlength(0); i++) //行
                {
                    object[] repl = new object[readerdata.getlength(1)];
                    for (int j = 0; j < readerdata.getlength(1); j++) //列
                    {
                        repl[j] = readerdata[i, j].tostring() ;
                    }
                    rv+=string.format(html, repl);
                }
                return rv;
}//repeathtml

如何获取模板内容

获取服务器控件的内容元素可划分为两个范围，类似 javascript 里的 innerhtml（获取 html 元素内部的内容，即元素的子节点，不包括元素本身的标签）和 outerhtml（除了包含 innerhtml 的全部内容外，还包含对象标签本身，用于获取 html 元素及其包含的内容的完整html表示，包括元素本身在内），下面我们将逐一实现这两种服务器方法：

getouterhtml 方法

getouterhtml 通过传递服务器控件参数，获取服务器控件完整的html元素内容，代码如下：

public string  getouterhtml(control ctl){
                system.text.stringbuilder strb = new system.text.stringbuilder();
                system.io.stringwriter sw = new system.io.stringwriter(strb);
                system.web.ui.htmltextwriter htw = new htmltextwriter(sw);
                ctl.rendercontrol(htw);
                string str = strb.tostring();
                return str;
}

getinnerhtml 方法

getinnerhtml 基于 getouterhtml 方法，获取服务器控件内部元素的所有内容，传递参数用法相同，实现代码如下：

public string getinnerhtml(control ctl)
{
                string str = "";
                for (int j = 0; j < ctl.controls.count; j++)
                {
                    str += getouterhtml(ctl.controls[j]);
                }
                return str;
}

调用示例

客户端模板设计代码如下：

<div id="pitemdetail" runat="server" style=" width:270px; border-radius:10px; cursor:pointer; padding:10px; background-color:whitesmoke; margin-bottom:10px">
     <div style="display:flex;flex-direction:row; flex-wrap:wrap;justify-content:space-between; ">
     <img src="{logourl}" width="125" height="75" /><div><span style="font-size:14pt;">{pname}</span><div style="width:100%; color:gray;font-size:9pt "><br>售价：{price}元<br>赠积分：{ccvc}</div></div></div>
</div><!-- pitemdetail  -->
 
<asp:literal id="result" runat="server"></asp:literal>

服务端示例代码如下：

string refsql="select [pname],[ccvc],[price], logourl from [ccvc_pricelist]  order by ccvc";
bool hastitle=false;
system.data.commandtype ct=system.data.commandtype.text;
 
        pitemdetail.visible = true;
        string itemmodule = getouterhtml(pitemdetail);
        result.text = repeathtml(itemmodule);
        pitemdetail.visible = false;

提示：pitemdetail 模板块，需要在调用前显示，调用后隐藏。

调用成功显示效果如下图所示：