生成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>[e-mail]</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