C# Web控件与数据感应之模板循环输出

 

目录

关于模板循环输出

准备数据源

​范例运行环境

RepeatHtml 方法

设计与实现

如何获取模板内容

getOuterHtml 方法

getInnerHtml 方法

调用示例 

小结


关于模板循环输出

数据感应也即数据捆绑,是一种动态的,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 循环输出到指定的接收控件上,其参数设置见下表:

序号参数名类型说明
1Htmlstring要输出的 HtmlTable 对象

GetReaderData 方法可以访问数据库数据表进行查询结果的提取,并转化为 object[,] 二维数组,具体实现请参考我的文章:《C# Web控件与数据感应之 填充 HtmlTable》中的GetReaderData 方法实现代码。

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 模板块,需要在调用前显示,调用后隐藏。

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

  

小结

RepeatHtml 方法一般配合 getOuterHtml 方法使用,如果运行出现服务器字符串格式错误,请检查花括号输出的字段是否存在以及大小写情况,尽量与SQL语句输出保持一致。以上就是关于模板循环输出的介绍,我们可以根据自己的实际需要进行改造,本示例代码仅供您参考。 

感谢您的阅读,希望本文能够对您有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/347446.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

测试开发面经分享,面试七天速成 DAY 1

1. get、post、put、delete的区别 a. get请求&#xff1a; i. 用于从服务器获取资源。请求参数附加在URL的查询字符串中。 ii. 对服务器的请求是幂等的&#xff0c;即多次相同的GET请求应该返回相同的结果。 iii. 可以被缓存&#xff0c;可以被收藏为书签。 iv. 对于敏感数据不…

vscode打包vue项目

1&#xff09;npm install 2&#xff09;npm install -g vue/cli 3&#xff09;npm run build 第三步注意&#xff1a;要查看根目录下 package.json 配置&#xff1b; 如果和我的一样 3&#xff09;应该为 npm run build:prod 4)将dist 文件考到nginx等web服务器即可使用…

Go方法特性详解:简单性和高效性的充分体现

本文深入探讨了Go语言中方法的各个方面&#xff0c;包括基础概念、定义与声明、特性、实战应用以及性能考量。文章充满技术深度&#xff0c;通过实例和代码演示&#xff0c;力图帮助读者全面理解Go方法的设计哲学和最佳实践。 关注作者&#xff0c;分享互联网架构、云服务技术的…

Angular封装高德地图组件实现输入框搜索,地图点击选地点

Angular封装高德地图组件实现输入框搜索,地图点击选地点(Angular17版本) 话不多说直接上代码 创建一个独立组件 html代码: <div style"position: relative;"><input #searchInput nz-input placeholder"请输入地址"/><div #mapContaine…

如何快速上手Python,成为一名数据分析师

如何快速上手Python&#xff0c;成为一名数据分析师 成为一名数据分析师需要掌握Python编程语言以及数据分析相关的知识和技能。以下是一些步骤和建议&#xff0c;帮助你快速上手Python并成为一名数据分析师&#xff1a; 学习Python基础知识&#xff1a;首先&#xff0c;你需要…

机器学习-聚类算法

1.有监督学习与无监督学习 有监督&#xff1a;在训练集中给的数据中有X和Y&#xff0c;根据这些数据训练出一组参数对预测集进行预测 无监督&#xff1a;在训练集中给的数据只有X没有Y&#xff0c;根据X数据找相似度参数来对预测集进行预测 2.数据间的相似度 2.1距离相似度…

前端 Web 与原生应用端 WebView 通信交互 - HarmonyOS Next

基于鸿蒙 HarmonyOS Next 与前端 Vue 通信交互相关小结; DevEco Studio NEXT Developer Preview2 Vue js 两端相互拟定好协议后,通过前端页面的点击事件,将所需的数据传输给原生移动端组件方法中,处理后将消息回传至前端. 根据官方文档的案例尝试,但没成功 ... 后经过几经尝试…

随笔——预处理详解

目录 前言预定义符号#define#define定义常量#define定义宏 带有副作用的宏参数宏替换的规则宏和函数的对比#和###运算符##运算符 命名约定#undef命令行定义条件编译头文件的包含包含方式嵌套包含 其他预处理指令完 前言 之前我们在《随笔——编译与链接》中对预处理作了大致的…

【ARM Cache 及 MMU 系列文章 6 -- Cache 寄存器 CTR_EL0 | CLIDR | CCSIDR | CSSELR 使用详解 1】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 Cache 常用寄存器Cache CSSELR 寄存器Cache CSSELR 使用场景Cache CSSELR 操作示例 Cache CLIDR 寄存器LoUU 介绍LoUU 使用 LoUIS 介绍CLIDR 使用 Cache CCSIDR 寄存器Cache CTR_EL0 C…

中科数安 |-公司办公透明加密系统,数据防泄漏软件

#数据防泄漏软件# 中科数安是一家专注于提供企业级数据防泄漏解决方案的公司&#xff0c;其办公透明加密系统是专为保护企业内部核心数据资料设计的。 PC地址&#xff1a;——www.weaem.com 该系统通过以下主要功能模块实现高效的安全防护&#xff1a; 文档透明加密&#xff1…

滴滴出行 大数据研发实习生【继任】

大数据研发实习生JD 职位描述 1、负责滴滴核心业务的数据建设&#xff0c;设计并打造适应滴滴一站式出行平台业务特点的数仓体系。 2、负责抽象核心业务流程&#xff0c;沉淀业务通用分析框架&#xff0c;开发数仓中间层和数据应用产品。 3、负责不断完善数据治理体系&#xff…

【数据结构】栈的应用

目录 0 引言 1 栈在括号匹配中的应用 2 栈在表达式求值中的应用 2.1 算数表达式 2.2 中缀表达式转后缀表达式 2.3 后缀表达式求值 3 栈在递归中的应用 3.1 栈在函数调用中的作用 3.2 栈在函数调用中的工作原理 4 总结 0 引言 栈&#xff08;Stack&#xff09;是一…

WPF视频学习-基础知识篇

1.简介WPF&#xff1a; C# 一套关于windows界面应用开发框架 2.WPF和winform的差别 &#xff0c;(WPF比较新) 创建新项目使用模板&#xff1a; WPF使用.xaml后缀&#xff0c;双击可查看操作界面和设置代码&#xff0c;其文件展开之后中有MainWindow.xaml.cs为程序交互逻辑。…

linux笔记8--安装软件

文章目录 1. PMS和软件安装的介绍2. 安装、更新、卸载安装更新ubuntu20.04更新镜像源&#xff1a; 卸载 3. 其他发行版4. 安装第三方软件5. 推荐 1. PMS和软件安装的介绍 PMS(package management system的简称)&#xff1a;包管理系统 作用&#xff1a;方便用户进行软件安装(也…

nginx mirror流量镜像详细介绍以及实战示例

nginx mirror流量镜像详细介绍以及实战示例 1.nginx mirror作用2.nginx安装3.修改配置3.1.nginx.conf3.2.conf.d目录下添加default.conf配置文件3.3.nginx配置注意事项3.3.nginx重启 4.测试 1.nginx mirror作用 为了便于排查问题&#xff0c;可能希望线上的请求能够同步到测试…

PyCharm QThread 设置断点不起作用

背景&#xff1a; 端午节回来上班第一天&#xff0c;不想干活&#xff0c;领导又再后面看着&#xff0c;突然想起一个有意思的问题&#xff0c;为啥我的程序在子进程QThread的子类里打的断点不好用呢&#xff1f;那就解决一下这个问题吧。 原因&#xff1a; 如果您的解释器上…

开发框架表单设计器办公效率高吗?

对于很多职场人来说&#xff0c;拥有一款可以提质、增效、降本的办公利器是大有裨益的。随着科技的进步和发展&#xff0c;低代码技术平台凭借可视化界面、易操作、好维护、高效率等多个优势特点&#xff0c;成为大众喜爱的办公利器。开发框架表单设计器是减少信息孤岛&#xf…

macbook本地部署 pyhive环境连接 hive用例

前言 公司的测试和生产环境中尚未提供基于Hive的客户端。若希望尝试操作Hive表&#xff0c;目前一个可行的方案是使用Python语言&#xff0c;通过借助pyhive库&#xff0c;您可以对Hive表进行各种操作。以下是一些示例记录供您参考。 一、pyhive是什么&#xff1f; PyHive是一…

从零到一建设数据中台(番外篇)- 数据中台UI欣赏

番外篇 - 数据中台 UI 欣赏 话不多说&#xff0c;直接上图。 数据目录的重要性&#xff1a; 数据目录是一种关键的信息管理工具&#xff0c;它为组织提供了一个全面的、集中化的数据资产视图。 它不仅记录了数据的存储位置&#xff0c;还详细描述了数据的结构、内容、来源、使…

细说ARM MCU的串口接收数据的实现过程

目录 一、硬件及工程 1、硬件 2、软件目的 3、创建.ioc工程 二、 代码修改 1、串口初始化函数MX_USART2_UART_Init() &#xff08;1&#xff09;MX_USART2_UART_Init()串口参数初始化函数 &#xff08;2&#xff09;HAL_UART_MspInit()串口功能模块初始化函数 2、串口…