如何在MVC Razor中使用Bootstrap Badge类?

时间:2016-01-20 21:08:07

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

如何使用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>

1 个答案:

答案 0 :(得分:3)

您不能在ActionLink辅助方法生成的链接标记中包含自定义html标记。你可以做的是,写一个锚标记并在其中包含范围。使用Url.Action方法为动作方法生成正确的相对网址,您将将其用作链接的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" })