如何解决C#动态生成表格行在jQuery中无法解析为HTML的问题

Razor引擎默认会对通过@输出的字符串做HTML编码，以此防范XSS攻击。你的<tr>、<td>标签被转义成了<tr>、<td>这类HTML实体，导致浏览器将其识别为纯文本而非可解析的HTML元素。

方法1：前端用Html.Raw输出原始HTML #

修改jQuery代码里的Razor输出部分，用Html.Raw()包裹ViewData的值，让Razor直接输出未编码的HTML字符串：

var _myNames = '@Html.Raw(ViewData["tblValue"])';
var tableBody = $("#tbody"); // 直接通过ID定位tbody更高效
tableBody.append(_myNames);

方法2：后端先编码内容，再输出HTML #

如果transaction_number包含用户输入的内容，直接输出原始HTML存在XSS风险，需要先对内容做HTML编码再拼接标签：

using System.Web;

// 生成表格行的代码
dynamic tbl = "<tr>";
foreach(var tran in Transactions)
{
    // 对交易号进行HTML编码，避免注入风险
    var encodedNumber = HttpUtility.HtmlEncode(tran["transaction_number"]);
    this.tbl = this.tbl + "<td>" + encodedNumber + "</td>";
}
this.tbl = this.tbl + "</tr>";
ViewData["tblValue"] = this.tbl;

前端依然使用方法1中的Html.Raw输出即可。

方法3：用TagBuilder规范生成HTML（推荐） #

手动拼接HTML字符串容易出错，ASP.NET提供了TagBuilder类来安全、规范地生成HTML元素：

using System.Web.Mvc;

// 生成表格行的代码
var trTag = new TagBuilder("tr");
foreach(var tran in Transactions)
{
    var tdTag = new TagBuilder("td");
    // SetInnerText会自动对内容做HTML编码
    tdTag.SetInnerText(tran["transaction_number"].ToString());
    trTag.InnerHtml.AppendHtml(tdTag);
}
ViewData["tblValue"] = trTag.ToString(TagRenderMode.Normal);

前端同样使用Html.Raw输出：

var _myNames = '@Html.Raw(ViewData["tblValue"])';
var tableBody = $("#tbody");
tableBody.append(_myNames);

内容的提问来源于stack exchange，提问作者Vasanth R