26 Add Badges using Partial Views

Badges can be added using partial views or JQuery/Ajax. In this procedure, we will use partial views.

1. Create an action that returns the count of the items

   Example: /Controllers/DepartmentController.cs

public ActionResult GetCountFacultiesPartial(int id)
{
    // Modify the condition inside the Count() to suite your needs
    int count = db.Faculties.Count(p => p.DepartmentId == id);
    return PartialView(count);
}

2. Create the partial view that holds the count

   Example: /Views/Department/GetCountFacultiesPartial.cshtml

@model int
<span class="badge">@Model</span>

3. Include a link to the partial view in the parent/main view. The link can also be included in the _layout.cshtml

@Html.Action("GetCountFacultiesPartial", "Department", new { id = item.Id })

4. Test the results

   Example: Go to /Department/Index

Note: In Bootstrap 3, the badges do not have colors. You may use CSS and Background-color to change the color of a badge.