如何将ASPX页面中H4标签的值通过锚点传递到另一ASPX页面

方案一：服务器端绑定（适合动态生成内容场景） #

1. 修改源页面（first page.aspx）代码 #

给H4标签添加runat="server"，同时动态生成带参数的锚点链接：

<div class="col-lg-4 col-md-12 col-sm-12" runat="server" id="line_1">
    <div class="card">
        <div class="card-header position-relative">
            <table style="width: 100%">
                <tr>
                    <td style="text-align: left; width: 75%">
                        <h4 class="mb-0 ml-4 line_name" id="line_name_1" runat="server">Place1Line</h4>
                    </td>
                </tr>
            </table>
            <a href='<%= GetLineUrl(line_name_1.InnerText) %>' class="stretched-link"></a>
        </div>
        <div class="card-body"></div>
    </div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" runat="server" id="line_2">
    <div class="card">
        <div class="card-header position-relative">
            <table style="width: 100%">
                <tr>
                    <td style="text-align: left; width: 75%">
                        <h4 class="mb-0 ml-4 line_name" id="line_name_2" runat="server">Place2Line</h4>
                    </td>
                </tr>
            </table>
            <a href='<%= GetLineUrl(line_name_2.InnerText) %>' class="stretched-link"></a>
        </div>
        <div class="card-body"></div>
    </div>
</div>

2. 源页面后台（first page.aspx.cs）添加方法 #

负责生成编码后的目标URL：

protected string GetLineUrl(string lineName)
{
    string encodedName = Server.UrlEncode(lineName);
    return $"LinePage.aspx?lineName={encodedName}";
}

3. 目标页面后台（LinePage.aspx.cs）赋值 #

在Page_Load事件中读取参数并设置Label文本：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string lineName = Request.QueryString["lineName"];
        if (!string.IsNullOrEmpty(lineName))
        {
            Label2.Text = Server.UrlDecode(lineName);
        }
    }
}

方案二：客户端JavaScript实现（适合静态内容场景） #

1. 修改源页面（first page.aspx）代码 #

替换锚点链接为点击事件，动态拼接参数：

<div class="col-lg-4 col-md-12 col-sm-12" runat="server" id="line_1">
    <div class="card">
        <div class="card-header position-relative">
            <table style="width: 100%">
                <tr>
                    <td style="text-align: left; width: 75%">
                        <h4 class="mb-0 ml-4 line_name" id="line_name_1">Place1Line</h4>
                    </td>
                </tr>
            </table>
            <a href="javascript:void(0)" onclick="navigateToLinePage('line_name_1')" class="stretched-link"></a>
        </div>
        <div class="card-body"></div>
    </div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" runat="server" id="line_2">
    <div class="card">
        <div class="card-header position-relative">
            <table style="width: 100%">
                <tr>
                    <td style="text-align: left; width: 75%">
                        <h4 class="mb-0 ml-4 line_name" id="line_name_2">Place2Line</h4>
                    </td>
                </tr>
            </table>
            <a href="javascript:void(0)" onclick="navigateToLinePage('line_name_2')" class="stretched-link"></a>
        </div>
        <div class="card-body"></div>
    </div>
</div>

<script>
function navigateToLinePage(h4Id) {
    var lineName = document.getElementById(h4Id).textContent.trim();
    var encodedName = encodeURIComponent(lineName);
    window.location.href = `LinePage.aspx?lineName=${encodedName}`;
}
</script>

2. 目标页面后台（LinePage.aspx.cs）赋值 #

和方案一的后台代码一致：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string lineName = Request.QueryString["lineName"];
        if (!string.IsNullOrEmpty(lineName))
        {
            Label2.Text = Server.UrlDecode(lineName);
        }
    }
}

注意事项 #

• 两种方案都对参数做了编码/解码处理，避免中文或特殊字符导致的乱码问题。
• 若H4内容为数据库动态生成，优先选择服务器端绑定方案，无需依赖客户端DOM。

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