如何在 MVC Razor 中使用 Bootstrap Badge 类？答案

【问题标题】：How can I use the Bootstrap Badge class within MVC Razor?如何在 MVC Razor 中使用 Bootstrap Badge 类？
【发布时间】：2016-01-21 05:15:02
【问题描述】：

如何使用 Bootstrap Badge 类在按钮旁边显示一个数字？在这种情况下，我使用的是@ActionLink。我在引导页面上看到我应该为徽章使用 HTML 跨度。

代码：

        <div class="row">
            <div class="col-md-2">
                <div class="list-group">
                    @Html.ActionLink("Home", "Index", "Home", null, new { @class = "list-group-item" })
                    @Html.ActionLink("Auto's", "Lijst", "Auto", null, new { @class = "list-group-item" })
                    @Html.ActionLink("Medewerkers", "Lijst", "Medewerker", null, new { @class = "list-group-item" })
 <!--This one!-->   @Html.ActionLink("Dagprogramma", "Dagprogramma", "Medewerker", null, new { @class = "list-group-item"} )
                    @Html.ActionLink("Contact", "Contact", "Home", null, new { @class = "list-group-item" })
                </div>
            </div>

【问题讨论】：

徽章不就是一个span标签吗？ 5 您只需将其放在该操作链接的左侧即可。如果这不是您的意思，请澄清。
没用，还是谢谢。它只是将徽章放在 ActionLink 上方

标签： asp.net-mvc twitter-bootstrap asp.net-mvc-4 razor

【解决方案1】：

您不能在ActionLink 辅助方法生成的链接标记中包含自定义 html 标记。您可以做的是，编写一个锚标记并将跨度包含在其中。使用 Url.Action 方法生成正确的相对 URL 到您将用作链接的 href 属性值的操作方法。

 @Html.ActionLink("Medewerkers", "Lijst", "Medewerker", null, 
                                                   new { @class = "list-group-item" })

  <a href="@Url.Action("Dagprogramma","Medewerker")"
                class="list-group-item"> Dagprogramma <span class="badge">99</span>
  </a>
  @Html.ActionLink("Contact", "Contact", "Home", null, 
                                                       new { @class = "list-group-item" })

【讨论】：

我刚试过这个，它确实有效，但不是它应该的方式。它会创建一个额外的文本并且不会将徽章放在 ActionLink 上。截图：prntscr.com/9sotj3
你确定你的标记是正确的。我从答案中复制并粘贴并尝试了它，它对我来说很好，prntscr.com/9sovgj