如何为动态绑定的ASP.NET GridView字段添加超链接跳转？

你遇到的核心问题是：你没有利用ASP.NET GridView的服务器端数据绑定机制，而是通过前端AJAX手动克隆行并替换单元格文本。你在TemplateField里定义的HyperLink控件，只有当GridView通过服务器端DataBind()方法绑定数据时才会被渲染成对应的<a>标签；但你现在是前端自己克隆空行（或者初始行），然后把单元格内容直接替换成纯文本，自然就丢失了超链接结构。

这里提供两种可行的解决思路，你可以根据自己的场景选择：

思路1：修改前端AJAX回调，手动生成超链接HTML #

既然你选择前端手动填充数据，那就在填充第一个单元格（TDC_NO）时，直接生成带跳转链接的<a>标签，而不是纯文本。修改OnSuccess函数里的对应代码：

function OnSuccess(response) {
    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
    var customers = xml.find("Table");
    var row = $("[id*=gvCustomers] tr:last-child").clone(true);
    $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
    $.each(customers, function () {
        var customer = $(this);
        // 手动生成超链接，替换原来的纯文本填充逻辑
        var tdcNo = $(this).find("TDC_NO").text();
        // 用ResolveUrl确保路径正确，适配虚拟目录场景
        var linkUrl = '<%= ResolveUrl("~/Uncoated_Wire.aspx?Id=") %>' + tdcNo;
        $("td", row).eq(0).html(`<a href="${linkUrl}" target="_self">${tdcNo}</a>`);
        $("td", row).eq(1).html($(this).find("REVISION").text());
        $("td", row).eq(2).html($(this).find("REVISION_DATE").text());
        $("td", row).eq(3).html($(this).find("P_GROUP").text());
        $("[id*=gvCustomers]").append(row);
        row = $("[id*=gvCustomers] tr:last-child").clone(true);
    });
}

思路2：改用服务器端数据绑定+UpdatePanel（更符合ASP.NET常规做法） #

如果你不想手动处理前端HTML，可以用ASP.NET的UpdatePanel实现局部刷新，让GridView的服务器端绑定机制自动渲染HyperLink控件：

1. 前端把GridView放到UpdatePanel中：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" Font-Names="Arial" style="display: none" Font-Size="10pt" RowStyle-BackColor="#A1DCF2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor = "White">
            <Columns>
                <asp:TemplateField HeaderText = "TDC_NO" ItemStyle-Width="150px">
                    <ItemTemplate>
                        <asp:HyperLink runat="server" NavigateUrl='<%# Eval("TDC_NO", "~/Uncoated_Wire.aspx?Id={0}") %>' Text='<%# Eval("TDC_NO") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField ItemStyle-Width="150px" DataField="REVISION" HeaderText="REVISION" />
                <asp:BoundField ItemStyle-Width="150px" DataField="REVISION_DATE" HeaderText="REVISION_DATE" />
                <asp:BoundField ItemStyle-Width="150px" DataField="P_GROUP" HeaderText="P_GROUP" />
            </Columns>
        </asp:GridView>
        <asp:Button ID="THistory" runat="server" Text="Load History" OnClick="THistory_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

2. 后端添加按钮点击事件，直接绑定GridView：

protected void THistory_Click(object sender, EventArgs e)
{
    string query = "SELECT TDC_NO,REVISION,REVISION_DATE, P_GROUP from tdc_product1 ";
    OracleCommand cmd = new OracleCommand(query);
    DataSet ds = GetData(cmd);
    gvCustomers.DataSource = ds;
    gvCustomers.DataBind();
    gvCustomers.Style["display"] = "block";
    // 隐藏目标元素
    pdfFormInsideL1.Style["display"] = "none";
}

// 保留你原有的GetData方法
private static DataSet GetData(OracleCommand cmd) {
    string strConnString = ConfigurationManager.ConnectionStrings["conndbprodnew"].ConnectionString;
    using (OracleConnection con = new OracleConnection(strConnString)) {
        using (OracleDataAdapter sda = new OracleDataAdapter()) {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet()) {
                sda.Fill(ds);
                return ds;
            }
        }
    }
}

这种方式不需要自己编写AJAX逻辑，UpdatePanel会自动处理局部刷新，同时GridView的服务器端绑定会正确渲染你定义的HyperLink控件。

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