使用@HtmlHelper向控制器传值时如何保持Bootstrap按钮样式正常

问题根因 #

你样式异常的核心原因是HTML结构不符合规范：不允许将<a>标签嵌套在<button>标签内，两种可交互元素嵌套会触发样式冲突、点击行为异常。另外你提到的原生写法也存在规范问题：<button>标签本身不支持href属性，该写法属于不标准的兼容用法，存在功能隐患。

Bootstrap官方推荐的可跳转按钮的正确实现方式，是直接给<a>标签添加按钮类样式，不需要嵌套<button>标签。

解决方案 #

你可以用@Url.Action辅助生成跳转地址，既保留HtmlHelper的参数传递能力，也能完全匹配你需要的按钮结构，代码如下：

<a href="@Url.Action("EditForm", "Dashboard", new { id = Model.FormId })" class="btn btn-success btn-icon-split">
    <span class="icon text-white-50">
        <i class="fas fa-edit"></i>
    </span>
    <span class="text" id="Edit">Edit</span>
</a>

该写法的传参逻辑和你之前用的@Html.ActionLink完全一致，生成的URL会自动匹配路由规则带上id参数，同时完全符合Bootstrap的按钮结构规范，样式渲染会和你需要的效果完全一致。

如果你不需要自定义图标等复杂内部结构，也可以直接给@Html.ActionLink添加按钮类样式实现纯文本跳转按钮：

@Html.ActionLink("Edit", "EditForm", "Dashboard", new { id = Model.FormId }, new { @class = "btn btn-success" })

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