Merge pull request #3809 from syncfusion-content/ES-935084-Badge

kmkrish001 · web-flow · commit fb8b0f44f3d1 · 2025-01-24T11:33:18.000+05:30
934883: Test and resolve issues in UG all sections - ASP core Badge control.
diff --git a/ej2-asp-core-mvc/badge/EJ2_ASP.MVC/getting-started-asp-mvc.md b/ej2-asp-core-mvc/badge/EJ2_ASP.MVC/getting-started-asp-mvc.md
@@ -25,7 +25,7 @@ This section briefly explains about how to include [ASP.NET MVC Badge](https://w
 
 ## Add stylesheet
 
-Here, the theme is referred using CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` file as follows,
+Here, the theme is referred using CDN inside the `<head>` of **~/Views/Shared/_Layout.cshtml** file as follows,
 
 {% tabs %}
 {% highlight c# tabtitle="~/_Layout.cshtml" %}
@@ -43,7 +43,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentatio
 
 ## Add ASP.NET MVC Badge control
 
-Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Badge control in `~/Home/Index.cshtml` page.
+Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Badge control in **~/Home/Index.cshtml** page.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
diff --git a/ej2-asp-core-mvc/badge/EJ2_ASP.NETCORE/getting-started-asp-core.md b/ej2-asp-core-mvc/badge/EJ2_ASP.NETCORE/getting-started-asp-core.md
@@ -25,7 +25,7 @@ This section briefly explains about how to include [ASP.NET Core Badge](https://
 
 ## Add stylesheet
 
-Here, the theme is referred using CDN inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file as follows,
+Here, the theme is referred using CDN inside the `<head>` of **~/Pages/Shared/_Layout.cshtml** file as follows,
 
 {% tabs %}
 {% highlight cshtml tabtitle="~/_Layout.cshtml" %}
@@ -43,7 +43,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentati
 
 ## Add ASP.NET Core Badge Control
 
-Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Badge tag helper in `~/Pages/Index.cshtml` page.
+Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Badge tag helper in **~/Pages/Index.cshtml** page.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
diff --git a/ej2-asp-core-mvc/badge/how-to/badge-customization.md b/ej2-asp-core-mvc/badge/how-to/badge-customization.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Badge Customization in ##Platform_Name## Badge Component
-description: Learn here all about Badge Customization in Syncfusion ##Platform_Name## Badge component of Syncfusion Essential JS 2 and more.
+title: Badge Customization in ##Platform_Name## Badge control | Syncfusion
+description: Learn here all about Badge Customization in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Badge Customization
 publishingplatform: ##Platform_Name##
@@ -10,9 +10,9 @@ documentation: ug
 
 # Customization in ##Platform_Name## Badge Control
 
-## Colour customization
+## Color customization
 
-Even though badges come with `8 predefined colors`, you can also customize the colour of the badge as desired.
+Even though Badges come with `8 predefined colors`, you can also customize the color of the Badge as desired.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
@@ -37,9 +37,9 @@ Even though badges come with `8 predefined colors`, you can also customize the c
 
 ![Badge Color Customization](../images/colorcustom.PNG)
 
-## Customize badge size
+## Customize Badge size
 
-Badges are designed to change its size based on the content. To change the size of a badge, adjust the `font size` of the badge.
+Badges are designed to change its size based on the content. To change the size of a Badge, adjust the `font size` of the Badge.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
@@ -66,7 +66,7 @@ Badges are designed to change its size based on the content. To change the size
 
 ## Custom position
 
-Even though the badges support the conventional `top` and `bottom` positions, the position of the badges can be changed as desired. This can be done by adding a custom class to the badge element to override the default position applied from the source.
+Even though the Badges support the conventional `top` and `bottom` positions, the position of the Badges can be changed as desired. This can be done by adding a custom class to the Badge element to override the default position applied from the source.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
diff --git a/ej2-asp-core-mvc/badge/how-to/dynamic-badge-content.md b/ej2-asp-core-mvc/badge/how-to/dynamic-badge-content.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Dynamic Badge Content in ##Platform_Name## Badge Component
-description: Learn here all about Dynamic Badge Content in Syncfusion ##Platform_Name## Badge component of Syncfusion Essential JS 2 and more.
+title: Dynamic Badge Content in ##Platform_Name## Badge control | Syncfusion
+description: Learn here all about Dynamic Badge Content in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Dynamic Badge Content
 publishingplatform: ##Platform_Name##
@@ -10,7 +10,7 @@ documentation: ug
 
 # Dynamic Badge Content
 
-Badges in real-time needs to be updated dynamically based on the requirements. The following sample demonstrates how to update the badges content dynamically. Click the increment button to change the badge value.
+Badges in real-time needs to be updated dynamically based on the requirements. The following sample demonstrates how to update the Badges content dynamically. Click the increment button to change the Badge value.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
diff --git a/ej2-asp-core-mvc/badge/how-to/integrate-badge-into-listview.md b/ej2-asp-core-mvc/badge/how-to/integrate-badge-into-listview.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Integrate Badge Into Listview in ##Platform_Name## Badge Component
-description: Learn here all about how to integrate badge into Listview in Syncfusion ##Platform_Name## Badge component of Syncfusion Essential JS 2 and more.
+title: Integrate Badge Into Listview in ##Platform_Name## Badge control | Syncfusion
+description: Learn here all about how to integrate Badge into Listview in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Integrate Badge Into Listview
 publishingplatform: ##Platform_Name##
@@ -10,9 +10,9 @@ documentation: ug
 
 # Integrate Badge into ListView
 
-The badges can be integrated with the `listview` component to indicate new notification with colour based on priority.
+The Badges can be integrated with the `listview` control to indicate new notification with color based on priority.
 
-In the following sample, `default` badges are used and there is no need to customize the badge size. The component will automatically adjust the size based on the container element.
+In the following sample, `default` Badges are used and there is no need to customize the Badge size. The control will automatically adjust the size based on the container element.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
diff --git a/ej2-asp-core-mvc/badge/overview.md b/ej2-asp-core-mvc/badge/overview.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Overview in ##Platform_Name## Badge Component
-description: Learn here all about Overview in Syncfusion ##Platform_Name## Badge component of Syncfusion Essential JS 2 and more.
+title: Overview in ##Platform_Name## Badge control | Syncfusion
+description: Learn here all about Overview in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Index
 publishingplatform: ##Platform_Name##
@@ -16,6 +16,6 @@ Badges can be used to alert users about new or unread messages, notifications, a
 
 * **[Types](/badge/types/)** - Provided 8 different types of Badges.
 
-* **[Predefined Colours](/badge/types/#badge-styles)** - Provided 8 predefined situational colours of Badges.
+* **[Predefined Colors](/badge/types/#badge-styles)** - Provided 8 predefined situational colors of Badges.
 
 * **[Position](/badge/types/#position)** - Supports 3 different positions, such as `default`, `top` and `bottom`.
diff --git a/ej2-asp-core-mvc/badge/types.md b/ej2-asp-core-mvc/badge/types.md
@@ -10,11 +10,11 @@ documentation: ug
 
 # Types in ##Platform_Name## Badge Control
 
-This section explains different styles and types of the badges.
+This section explains different styles and types of the Badges.
 
 ## Badge styles
 
-The Essential<sup style="font-size:70%">&reg;</sup> JS 2 Badge has the following predefined styles that can be used with `.e-badge` class to change the appearance of a badge.
+The Essential<sup style="font-size:70%">&reg;</sup> JS 2 Badge has the following predefined styles that can be used with `.e-badge` class to change the appearance of a Badge.
 
 | Class Name | Description |
 |------------|-------------|
@@ -52,7 +52,7 @@ The Essential<sup style="font-size:70%">&reg;</sup> JS 2 Badge has the following
 
 ## Badge types
 
-The types of Essential<sup style="font-size:70%">&reg;</sup> JS 2 badges are as follows:
+The types of Essential<sup style="font-size:70%">&reg;</sup> JS 2 Badges are as follows:
 
 * Circle
 * Pill
@@ -64,7 +64,7 @@ The types of Essential<sup style="font-size:70%">&reg;</sup> JS 2 badges are as
 
 ### Circle
 
-The circle badge style can be applied by adding the modifier class `.e-badge-circle` to the target element.
+The circle Badge style can be applied by adding the modifier class `.e-badge-circle` to the target element.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
@@ -91,7 +91,7 @@ The circle badge style can be applied by adding the modifier class `.e-badge-cir
 
 ### Pill
 
-The pill badge style can be applied by adding the modifier class `.e-badge-pill` to the target element.
+The pill Badge style can be applied by adding the modifier class `.e-badge-pill` to the target element.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
@@ -118,7 +118,7 @@ The pill badge style can be applied by adding the modifier class `.e-badge-pill`
 
 ### Link
 
-When badge modifier classes are applied to the anchor tag, the badge’s appearance will change from normal state to hover state on mouseover.
+When Badge modifier classes are applied to the anchor tag, the Badge’s appearance will change from normal state to hover state on mouseover.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
@@ -145,7 +145,7 @@ When badge modifier classes are applied to the anchor tag, the badge’s appeara
 
 ### Notification
 
-The notification badge style can be applied by adding the modifier class `.e-badge-notification` to the target element. Notification badges are used when a content or a context needs special attention. While using the notification badge, set the parent element to `position: relative`.
+The notification Badge style can be applied by adding the modifier class `.e-badge-notification` to the target element. Notification Badges are used when a content or a context needs special attention. While using the notification Badge, set the parent element to `position: relative`.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
@@ -172,7 +172,7 @@ The notification badge style can be applied by adding the modifier class `.e-bad
 
 ### Dot
 
-Dot can be applied by adding the modifier class `.e-badge-dot` to the target element. Dot badges are similar to notification badges, but in a minimalistic way. While using the dot badge, set the parent element to `position: relative`.
+Dot can be applied by adding the modifier class `.e-badge-dot` to the target element. Dot Badges are similar to notification Badges, but in a minimalistic way. While using the dot Badge, set the parent element to `position: relative`.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
@@ -199,7 +199,7 @@ Dot can be applied by adding the modifier class `.e-badge-dot` to the target ele
 
 ### Overlap
 
-The overlap badge can be used with `notification` or `dot` badge, which overlaps with the target element by adding the modifier class`.e-badge-overlap`. While using the overlap badge, set the parent element to `position: relative`.
+The overlap Badge can be used with `notification` or `dot` Badge, which overlaps with the target element by adding the modifier class`.e-badge-overlap`. While using the overlap Badge, set the parent element to `position: relative`.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
@@ -226,7 +226,7 @@ The overlap badge can be used with `notification` or `dot` badge, which overlaps
 
 ### Position
 
-The default position of the `notification` or `dot` badge is top. But, the position can be changed to `bottom` using the modifier class `.e-badge-bottom`. For example, the bottom class modifier is used with dot badge to display the status in the avatar as shown in the following sample.
+The default position of the `notification` or `dot` Badge is top. But, the position can be changed to `bottom` using the modifier class `.e-badge-bottom`. For example, the bottom class modifier is used with dot Badge to display the status in the avatar as shown in the following sample.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
diff --git a/ej2-asp-core-mvc/code-snippet/badge/position/tagHelper b/ej2-asp-core-mvc/code-snippet/badge/position/tagHelper
