如何将MVC脚手架生成的Edit链接改为Bootstrap蓝色按钮？

嘿，这个需求很好实现，我给你两种常用的方案，你可以根据自己的习惯选：

方案一：直接改造原链接（推荐） #

Bootstrap的按钮样式不仅支持<button>标签，也能直接用在<a>标签上，这样既能保留MVC路由助手的原有功能，又能快速变成蓝色按钮。

原始代码：

<td> <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> | </td>

修改后的代码：

<td>
    <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary">Edit</a> |
</td>

只需要给<a>标签加上btn btn-primary这两个类就搞定了，是不是超简单？这样显示出来就是标准的Bootstrap蓝色按钮，但点击逻辑和原来的Edit链接完全一致。

方案二：用<button>标签实现 #

如果你更倾向于用按钮标签来实现，也可以通过表单提交的方式来保留路由跳转功能：

<td>
    <form asp-action="Edit" asp-route-id="@item.Id" method="get" style="display: inline-block;">
        <button type="submit" class="btn btn-primary">Edit</button>
    </form> |
</td>

这里把按钮放在一个method="get"的表单里，同时给表单加了display: inline-block样式，避免按钮独占一行影响布局。点击按钮时会提交表单，跳转到对应的Edit页面，效果和方案一一样。

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