有时候,我们需要在后台拼接生成前端的html表格,一般的做法就是各种string、StringBuilder的拼接(例子省略...),这样的话如果表头不同就没法做到代码的重用,增加代码的冗余,下面我分享我的做法,以达到各位大牛抛砖引玉的效果。

首先新建一个公共配置静态类CommonConfiguration:

 public static class CommonConfiguration
{
public static string Width { get { return "Width"; } } public static string HeaderName { get { return "HeaderName"; } } /// <summary>
/// 定义表格单元
/// </summary>
public static string TableTdBody { get { return "<td>{0}</td>"; } }
}

接着定义一个公共帮助类:

public class CommonHelper
{
private const string FormatString = "<table style=\"{0}\" class=\"{1}\">";
private const string FormatTableHeader = "<th style=\"width:{0}px;\">{1}</th>"; // 定义表头字符串 /// <summary>
/// 生成前端table模板
/// </summary>
/// <typeparam name="T">表头实体</typeparam>
/// <param name="style">样式</param>
/// <param name="className">类名</param>
/// <param name="bodyString">表身</param>
/// <param name="tableHeader">表头实体数据</param>
/// <returns>Table模板</returns>
public static string HtmlResult<T>(string style, string className, string bodyString,
List<T> tableHeader) where T : class
{
var builder = new StringBuilder(); builder.AppendFormat(FormatString, style, className); builder.Append("<tr>");
foreach (var item in tableHeader)
{
builder.AppendFormat(FormatTableHeader, GetPropertyValue(item, CommonConfiguration.Width),
GetPropertyValue(item, CommonConfiguration.HeaderName));
}
builder.Append("</tr>");
builder.Append(bodyString); builder.Append("</table>"); return builder.ToString();
} /// <summary>
/// 根据属性名取得值
/// </summary>
/// <param name="entity">泛型实体</param>
/// <param name="propertyName">属性名</param>
/// <returns>对应属性值</returns>
public static string GetPropertyValue<T>(T entity, string propertyName) where T : class
{
var type = entity.GetType();
var propertyInfo = type.GetProperty(propertyName);
var value = (string)propertyInfo.GetValue(entity);
return value;
}
} public class TableHeader
{
/// <summary>
/// 表头宽度
/// </summary>
public string Width { get; set; }
/// <summary>
/// 表头名
/// </summary>
public string HeaderName { get; set; }
}

类TableHeader可定义自己喜欢的位置,我定义在这里是为了方便,代码很清晰,相信很容易看懂。

最后新建一个控制器HomeController用于调用这些代码生成html表格:

public ActionResult Index()
{
string tableBody = CommonConfiguration.TableTdBody;
StringBuilder sb = new StringBuilder(); var tableList = new List<TableHeader>
{
new TableHeader { Width = "", HeaderName = "Id" },
new TableHeader { Width = "", HeaderName = "CustomerGuid" },
new TableHeader { Width = "", HeaderName = "Username" },
new TableHeader { Width = "", HeaderName = "Email" },
new TableHeader { Width = "", HeaderName = "Password" },
new TableHeader { Width = "", HeaderName = "PasswordSalt" },
new TableHeader { Width = "", HeaderName = "Active" },
new TableHeader { Width = "", HeaderName = "Deleted" },
new TableHeader { Width = "", HeaderName = "LastIpAddress" },
new TableHeader { Width = "", HeaderName = "CreatedOn" },
}; var customers = _customerService.GetCustomers().ToArray(); customers.ForEach(c =>
{
sb.AppendFormat("<tr class=\"{0}\">", c.Active ? "success" : "warning");
sb.AppendFormat(tableBody, c.Id);
sb.AppendFormat(tableBody, c.CustomerGuid);
sb.AppendFormat(tableBody, c.Username);
sb.AppendFormat(tableBody, c.Email);
sb.AppendFormat(tableBody, c.Password);
sb.AppendFormat(tableBody, c.PasswordSalt);
sb.AppendFormat(tableBody, c.Active);
sb.AppendFormat(tableBody, c.Deleted);
sb.AppendFormat(tableBody, c.LastIpAddress);
sb.AppendFormat(tableBody, c.CreatedOn.ToString("yyyy-MM-dd"));
sb.Append("</tr>");
}); var htmlResult = CommonHelper.HtmlResult("border-color: solid 1px #008000", "table table-striped", sb.ToString(), tableList); ViewBag.Result = MvcHtmlString.Create(htmlResult); return View();
}

视图页:

@{
ViewBag.Title = "Index";
} <h2>Index</h2>
<div class="container">
@ViewBag.Result
</div>

最后查看生成的html格式效果:

  <table style="border-color: solid 1px #008000" class="table table-striped">
<tbody>
<tr>
<th style="width:10px;">Id</th>
<th style="width:20px;">CustomerGuid</th>
<th style="width:30px;">Username</th>
<th style="width:40px;">Email</th>
<th style="width:50px;">Password</th>
<th style="width:60px;">PasswordSalt</th>
<th style="width:70px;">Active</th>
<th style="width:80px;">Deleted</th>
<th style="width:90px;">LastIpAddress</th>
<th style="width:100px;">CreatedOn</th>
</tr>
<tr class="success">
<td></td>
<td>bee62ba2-9d53-495f-80d4-af4fe6ddaa16</td>
<td>Allen</td>
<td>@qq.com</td>
<td>0D59DB9C0211A16786F5EFD6B5809B6984B2AF96</td>
<td>TW0lAH4=</td>
<td>True</td>
<td>False</td>
<td>127.0.0.1</td>
<td>--</td>
</tr>
</tbody>
</table>

这里我用了bootstrap作为表格的样式,你们可自定义class。

--鱼头鱼尾

--QQ:875755898

生成HTML表格的后台模板代码的更多相关文章

  1. Swagger结合mustache模板生成后台接口代码、以及前后台建模代码

    之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...

  2. [开源] FreeSql.AdminLTE.Tools 根据实体类生成后台管理代码

    前言 FreeSql 发布至今已经有9个月,功能渐渐完善,自身的生态也逐步形成,早在几个月前写过一篇文章<ORM 开发环境之利器:MVC 中间件 FreeSql.AdminLTE>,您可以 ...

  3. 用Case类生成模板代码

    将类定义为case类会生成许多模板代码,好处在于: ①会生成一个apply方法,这样就可以不用new关键字创建新的实例. ②由于case类的构造函数参数默认是val,那么构造函数参数会自动生成访问方法 ...

  4. Android Studio 配置快速生成模板代码

    前言 Android studio 有提供快速生成模板代码的功能,其实这个功能也可以自定义配置.此篇博客将讲解如何使用此功能 进入Settings 选择 Editor > Live Templa ...

  5. Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述

    挤一下: 一开始以为没有多少人用就没建群,但是加我的人太多了,好多问题都是重复的,所以建个群大家互相沟通交流方便点,但是建的有点晚,错过了好多人所以群里人有点少,QQ群: 157216616 小提示 ...

  6. Yii2的相关学习记录,后台模板和gii(三)

    前面已经可以正常登录,但我们需要体验下最常用的增删查改的操作.这里就需要gii,通过gii可以方便的生成表单.表格的框架,不需要我们再写重复的东西. gii访问地址:http://localhost/ ...

  7. 使用代码生成工具Database2Sharp快速生成工作流模块控制器和视图代码

    在前面随笔<基于Metronic的Bootstrap开发框架--工作流模块功能介绍>和<基于Metronic的Bootstrap开发框架--工作流模块功能介绍(2)>中介绍了B ...

  8. C#反射实现 C# 反射 判断类的延伸类型 使用代码生成工具Database2Sharp快速生成工作流模块控制器和视图代码 C# ADO.NET的SqlDataReader对象,判断是否包含指定字段 页面中添加锚点的几种方式 .net 简单实用Log4net(多个日志配置文件) C# 常用小点

    C#反射实现   一.反射概念: 1.概念: 反射,通俗的讲就是我们在只知道一个对象的内部而不了解内部结构的情况下,通过反射这个技术可以使我们明确这个对象的内部实现. 在.NET中,反射是重要的机制, ...

  9. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. pyspark 连 MongoDB复制集

    解决问题思路: 核心:0-理解pyspark的执行与java jar的关系: 1-看控制台,看日志: 2-jar缺不缺,版本号,放哪里. [root@hadoop1 mylocalRepository ...

  2. 使用C语言获取字符串或文件的MD5值

    libmd5地址:https://sourceforge.net/projects/libmd5-rfc/ MD5Demo1.c #include <stdio.h> #include & ...

  3. 如何去除Office Excel的密码保护?

    企图更改Excel文件内容,然而却弹出如下提示: 根据提示,我尝试解除保护表,却要求输入密码: 这就尴尬了=_=密码不是我设定的 问了度娘,找到了解决方案 将Excel文件扩展名更改为rar, 使用压 ...

  4. 第六届蓝桥杯C++B组省赛

    1.奖券数目 2.星系炸弹 3.三羊献瑞 4.格子中输出 5.九数组分数 6.加法变乘法 7.牌型种数 8.移动距离 9.垒骰子 10.生命之树 1.奖券数目 奖券数目有些人很迷信数字,比如带“4”的 ...

  5. POJ2976:Dropping tests(01分数规划入门)

    In a certain course, you take n tests. If you get ai out of bi questions correct on test i, your cum ...

  6. 「网络流24题」「LuoguP2774」方格取数问题(最大流 最小割

    Description 在一个有 m*n 个方格的棋盘中,每个方格中有一个正整数.现要从方格中取数,使任意 2 个数所在方格没有公共边,且取出的数的总和最大.试设计一个满足要求的取数算法.对于给定的方 ...

  7. MYSQL数据库学习----插入、更新、删除

    一:插入数据 1 为表的所有字段插入数据 INSERT INTO 表名 (值1,值2, 值3...); 2 为表的指定字段插入数据 INSERT INTO 表名(字段1,字段2,...) VALUES ...

  8. Sublime Text3配置自动联想python

    1.安装Package Control 通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码 Sublime Text 3  ...

  9. 笔记本创建wifi热点

    如何在Win8系统上建立WIFI热点 | 浏览: 2511 | 更新: 2013-04-10 01:55 | 标签: win8 59 28 全文阅读分步阅读   步骤 1 2 3 4 5 6 7 8 ...

  10. C++实现查找链表中环的入口节点

    /* * 寻找链表中环的入口节点.cpp * * Created on: 2018年4月10日 * Author: soyo */ #include<iostream> using nam ...