标签:
有时候,我们需要在后台拼接生成前端的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
标签:
原文地址:http://www.cnblogs.com/YUTOUYUWEI/p/5734790.html