How can I use the Bootstrap Badge class within MVC Razor?

Question

How can I use the Bootstrap Badge class to show a number next to the button? In this case I am using the @ActionLink. I've seen on the bootstrap page that I'm supposed to use a HTML span for the Badge.

Code:

        <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>

Answer 1

You cannot include custom html markup inside the link markup generated by ActionLink helper method. What you can do is, write an anchor tag and include the span inside that. Use the Url.Action method to generate the correct relative url to the action method which you will use as the link's href attribute value.

 @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" })