Contents
- Prerequisites
- Create ASP.NET Core web application with Razor pages
- Add stylesheet
- Add ASP.NET Core Badge Control
- See also
Having trouble getting help?
Contact Support
Contact Support
Getting Started with ASP.NET Core Badge Control
20 Feb 20251 minute to read
This section briefly explains about how to include ASP.NET Core Badge control in your ASP.NET Core application using Visual Studio.
Prerequisites
System requirements for ASP.NET Core controls
Create ASP.NET Core web application with Razor pages
Add stylesheet
Here, the theme is referred using CDN inside the <head>
of ~/Pages/Shared/_Layout.cshtml file as follows,
<head>
...
<!-- Syncfusion ASP.NET Core controls styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/28.2.3/fluent.css" />
</head>
NOTE
Checkout the Themes topic to learn different ways (CDN, NPM package, and CRG) to refer styles in ASP.NET Core application, and to have the expected appearance for Syncfusion® ASP.NET Core controls.
Add ASP.NET Core Badge Control
Now, add the Syncfusion® ASP.NET Core Badge tag helper in ~/Pages/Index.cshtml page.
<div id='element'>
<h1>Badge Component <span class="e-badge e-badge-primary">New</span></h1>
</div>
<style>
#element {
display: flex;
width: 400px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
justify-content: center;
}
</style>
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core Badge control will be rendered in the default web browser.
NOTE