生成HTML表格的后台模板代码

有时候，我们需要在后台拼接生成前端的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 = "10", HeaderName = "Id" },
new TableHeader { Width = "20", HeaderName = "CustomerGuid" },
new TableHeader { Width = "30", HeaderName = "Username" },
new TableHeader { Width = "40", HeaderName = "Email" },
new TableHeader { Width = "50", HeaderName = "Password" },
new TableHeader { Width = "60", HeaderName = "PasswordSalt" },
new TableHeader { Width = "70", HeaderName = "Active" },
new TableHeader { Width = "80", HeaderName = "Deleted" },
new TableHeader { Width = "90", HeaderName = "LastIpAddress" },
new TableHeader { Width = "100", 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>1</td>
<td>bee62ba2-9d53-495f-80d4-af4fe6ddaa16</td>
<td>Allen</td>
<td>875755898@qq.com</td>
<td>0D59DB9C0211A16786F5EFD6B5809B6984B2AF96</td>
<td>TW0lAH4=</td>
<td>True</td>
<td>False</td>
<td>127.0.0.1</td>
<td>2016-06-18</td>
</tr>
</tbody>
</table>

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

--鱼头鱼尾

--QQ：875755898