如何将ASP.NET中__doPostBack从href移至onclick？解决读屏器兼容问题

这问题我之前帮团队处理过，确实ASP.NET WebForms默认生成的带javascript:__doPostBack的链接对屏幕阅读器不友好——像NVDA、JAWS这类工具会把整个脚本内容当成链接文本读出来，严重影响视障用户的使用体验。下面给你几个可行的解决方案，覆盖服务器端和前端两种场景：

方案一：自定义无障碍LinkButton控件（推荐） #

最彻底的方式是重写默认的LinkButton控件，让它生成符合无障碍标准的HTML。这样所有用到这个控件的地方都会自动生成正确的代码，不用重复修改。

public class AccessibleLinkButton : LinkButton
{
    protected override void Render(HtmlTextWriter writer)
    {
        // 设置href为#，同时添加回发脚本到onclick
        writer.AddAttribute(HtmlTextWriterAttribute.Href, "#");
        string postBackScript = Page.ClientScript.GetPostBackEventReference(this, string.Empty);
        writer.AddAttribute(HtmlTextWriterAttribute.Onclick, $"{postBackScript}; return false;");
        
        // 渲染链接标签和内容
        writer.RenderBeginTag(HtmlTextWriterTag.A);
        base.RenderContents(writer);
        writer.RenderEndTag();
    }
}

使用方法： #

1. 在项目中添加这个自定义控件类
2. 在ASPX页面顶部注册控件：

   <%@ Register TagPrefix="custom" Namespace="YourNamespace" Assembly="YourAssembly" %>
   

3. 用<custom:AccessibleLinkButton>代替原来的<asp:LinkButton>

这样生成的HTML就是你想要的格式：

<a href="#" onclick="__doPostBack('ctl00$...','DetailRow$3'); return false;">...</a>

加return false是为了阻止点击#时页面跳转到顶部的默认行为。

方案二：前端jQuery批量修复（快速临时方案） #

如果不想修改服务器端代码，可以用前端脚本批量处理所有生成的__doPostBack链接。适合已有大量页面需要快速修复的场景。

$(document).ready(function() {
    // 遍历所有包含javascript:__doPostBack的链接
    $('a[href^="javascript:__doPostBack"]').each(function() {
        // 提取回发脚本内容
        var postBackCode = $(this).attr('href').replace('javascript:', '');
        // 替换href为#，添加onclick事件并阻止默认跳转
        $(this).attr('href', '#')
               .attr('onclick', postBackCode + '; return false;');
    });

    // 如果用了UpdatePanel局部刷新，需要在刷新后重新执行
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
        $('a[href^="javascript:__doPostBack"]').each(function() {
            var postBackCode = $(this).attr('href').replace('javascript:', '');
            $(this).attr('href', '#')
                   .attr('onclick', postBackCode + '; return false;');
        });
    });
});

注意事项： #

• 依赖jQuery和ASP.NET的Sys.WebForms.PageRequestManager（如果用了UpdatePanel）
• 动态加载的内容需要在加载完成后重新执行处理逻辑

方案三：用Button控件伪装成链接（更优无障碍方案） #

其实还有一种更符合无障碍标准的思路：完全不用LinkButton，而是用普通的Button控件，通过CSS把它样式改成链接的样子。这样屏幕阅读器会识别为可点击的按钮，而不是带有脚本的链接，体验更好。

<asp:Button ID="btnViewDetail" runat="server" Text="查看详情" 
            CssClass="link-style-button" OnClick="btnViewDetail_Click" />

对应的CSS：

.link-style-button {
    background: transparent;
    border: none;
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font: inherit;
}
.link-style-button:hover,
.link-style-button:focus {
    color: #004499;
    text-decoration: none;
    outline: 1px dotted #0066cc; /* 焦点样式，无障碍必备 */
}

这个方案的优势是：

• 完全符合WAI-ARIA无障碍标准
• 不用处理__doPostBack的脚本问题，Button控件默认的回发机制就是通过onclick实现的
• 自带焦点状态，方便键盘导航用户操作

关于你原本修改方式的问题 #

你提到的直接把href改成#、移到onclick的思路是对的，但一定要记得加上return false，否则点击链接会触发页面跳转到顶部的默认行为，影响用户体验。另外，部分严格的屏幕阅读器可能还是会把#识别为无效链接，所以方案三的Button伪装方式会更稳妥。

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