CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrapasp.net-mvc-4razor
Mike Lammers
Mike Lammers

Reputation: 564

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

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>

Upvotes: 0

Views: 1937

Answers (1)

Shyju
Shyju

Reputation: 218752

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

Upvotes: 3

Related Questions