Skip to content

Commit ca5eca8

Browse files
rajendranr-5483rajendranr-5483
authored
Merge pull request SyncfusionExamples#3 from Backiaraj/UG
Prepared UG samples for Barcode and Badge controls
2 parents 6b3b08e + e093130 commit ca5eca8

File tree

362 files changed

+299006
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

362 files changed

+299006
-0
lines changed

‎Badge/BadgeCustomSample/BadgeCustomSample.csproj‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net6.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
</PropertyGroup>
8+
9+
<ItemGroup>
10+
<PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="20.1.0.58" />
11+
</ItemGroup>
12+
13+
</Project>

‎Badge/BadgeCustomSample/BadgeCustomSample.sln‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.0.32112.339
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BadgeCustomSample", "BadgeCustomSample.csproj", "{49FEC67F-243D-4DFD-9CF3-4A34217B97EC}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{49FEC67F-243D-4DFD-9CF3-4A34217B97EC}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{49FEC67F-243D-4DFD-9CF3-4A34217B97EC}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{49FEC67F-243D-4DFD-9CF3-4A34217B97EC}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{49FEC67F-243D-4DFD-9CF3-4A34217B97EC}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {32894621-1E63-469A-B256-D89D653419B0}
24+
EndGlobalSection
25+
EndGlobal

‎Badge/BadgeCustomSample/Pages/BadgeintoListView.cshtml‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
@page
2+
@model BadgeCustomSample.Pages.BadgeintoListViewModel
3+
@{
4+
List<object> data = new List<object>();
5+
data.Add(new { id = "p_01", text = "Primary", messages = "3 New", badge = "e-badge e-badge-primary", icons = "primary", type = "Primary" });
6+
data.Add(new { id = "p_02", text = "Social", messages = "27 New", badge = "e-badge e-badge-secondary", icons = "social", type = "Primary" });
7+
data.Add(new { id = "p_03", text = "Promotions", messages = "7 New", badge = "e-badge e-badge-success", icons = "promotion", type = "Primary" });
8+
data.Add(new { id = "p_04", text = "Updates", messages = "13 New", badge = "e-badge e-badge-info", icons = "updates", type = "Primary" });
9+
data.Add(new { id = "p_05", text = "Starred", messages = "", badge = "", icons = "starred", type = "All Labels" });
10+
data.Add(new { id = "p_06", text = "Important", messages = "2 New", badge = "e-badge e-badge-danger", icons = "important", type = "All Labels" });
11+
data.Add(new { id = "p_07", text = "Sent", messages = "", badge = "", icons = "sent", type = "All Labels" });
12+
data.Add(new { id = "p_08", text = "Outbox", messages = "", badge = "", icons = "outbox", type = "All Labels" });
13+
data.Add(new { id = "p_09", text = "Drafts", messages = "7 New", badge = "e-badge e-badge-warning", icons = "draft", type = "All Labels" });
14+
}
15+
<div class="col-lg-12 control-section">
16+
<div class="sample_container badge-list">
17+
<ejs-listview id='lists' dataSource=@data headerTitle='Inbox' template="@Html.Raw("<div class='listWrapper' style='width: inherit; height: inherit;'><span class='${icons} list_svg'>&nbsp;</span><span class='list_text'>${text}</span>${if(messages !== '')}<span class='${badge}' style='float: right; margin-top: 16px; font-size: 12px;'>${messages}</span>${/if}</div>")" showHeader=true actionComplete="onActionComplete">
18+
<e-listview-fieldsettings groupBy="type">
19+
</e-listview-fieldsettings>
20+
</ejs-listview>
21+
</div>
22+
</div>
23+
24+
25+
<style>
26+
.control-section {
27+
overflow: auto;
28+
}
29+
30+
.sample_container.badge-list {
31+
max-width: 350px;
32+
margin: auto;
33+
}
34+
35+
#lists {
36+
margin: auto;
37+
border: 1px solid rgba(0, 0, 0, 0.12)
38+
}
39+
40+
#lists .e-list-item {
41+
cursor: pointer;
42+
height: 50px;
43+
line-height: 48px;
44+
border: 0;
45+
}
46+
47+
/* SVG Icons and Customization */
48+
49+
.list_svg {
50+
width: 24px;
51+
height: 24px;
52+
display: inline-block;
53+
margin-top: 11px;
54+
margin-right: 16px;
55+
}
56+
57+
.list_text {
58+
width: 60%;
59+
display: inline-block;
60+
vertical-align: top;
61+
}
62+
63+
.updates {
64+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M17.024 13.812l.022.162v.893c0 .487-.007.942-.022 1.366-.012.423-.027.833-.042 1.23v2.435c0 .415.022.799.064 1.15.042.35.11.559.202.622.091.063.232.095.422.095h.328l.105.324c-.041.073-.125.136-.253.189-.127.055-.226.063-.296.028H14.126a.556.556 0 0 1-.34-.109v-.27c.086-.108.22-.162.403-.162h.38c.185-.109.294-.219.328-.328.036-.108.054-.3.054-.573a7.32 7.32 0 0 0 .042-.819c0-.29.007-.527.021-.709V17.233c0-.636-.018-1.041-.053-1.213-.034-.173-.082-.386-.138-.64a20.09 20.09 0 0 1-.455.19c-.176.072-.291.108-.348.108l-.105-.162c0-.162.09-.307.274-.434l.38-.27a6.472 6.472 0 0 1 .847-.406c.227-.144.469-.265.73-.365.26-.1.554-.176.878-.229zm-.952-5.736a.9.9 0 0 1 .613.243c.184.162.343.361.477.595.135.235.2.451.2.65 0 .451-.129.802-.39 1.054-.261.254-.453.397-.572.434a1.424 1.424 0 0 1-.412.054.934.934 0 0 1-.455-.122c-.15-.082-.293-.23-.433-.447a1.834 1.834 0 0 1-.277-.676c-.027-.307.044-.63.213-.974.17-.342.373-.577.613-.703.17-.072.31-.108.423-.108zM16 3.465C9.088 3.465 3.464 9.088 3.464 16c0 6.913 5.624 12.536 12.536 12.536S28.536 22.913 28.536 16c0-6.912-5.624-12.535-12.536-12.535zM16 1.6c7.94 0 14.4 6.46 14.4 14.4S23.94 30.4 16 30.4 1.6 23.94 1.6 16 8.06 1.6 16 1.6z'/%3E%3C/svg%3E") no-repeat 100% 100%;
65+
}
66+
67+
.promotion {
68+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M6 4c.4 0 .7.2 1 .4.5.6.5 1.5-.1 2-.5.5-1.4.5-1.9-.1s-.5-1.4.1-1.9c.2-.3.6-.4.9-.4zm0-1c-.6 0-1.2.2-1.6.6-1 .9-1.1 2.4-.2 3.4.9 1 2.4 1 3.4.2 1-.9 1-2.4.1-3.4C7.3 3.2 6.6 3 6 3zm.3-3l7.1 1 18 19.6L18.9 32 .9 12.4.6 5.3z'/%3E%3C/svg%3E") no-repeat 100% 100%;
69+
}
70+
71+
.social {
72+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M15.254 19.089c.996 0 3.587 1.992 3.786 8.27l-19.03.199s-.498-7.97 5.579-8.37c2.392-.398 4.783 1.993 6.178 1.793 1.295-.198 2.59-1.892 3.487-1.892zm3.886-2.69c.797 0 1.793 1.495 2.989 1.694 1.096.198 3.188-1.993 5.18-1.595 5.082.3 4.684 7.573 4.684 7.573l-11.558-.1c-.697-3.687-2.391-5.181-3.288-5.38.598-1.594 1.495-2.192 1.993-2.192zm-8.17-9.963c2.79 0 4.98 2.49 4.98 5.679 0 3.089-2.19 5.679-4.98 5.679-2.79 0-4.982-2.491-4.982-5.68 0-3.088 2.192-5.678 4.982-5.678zm11.657-1.994c2.49 0 4.583 2.293 4.583 5.082 0 2.79-2.092 5.082-4.583 5.082s-4.583-2.293-4.583-5.082c0-2.79 2.092-5.082 4.583-5.082z'/%3E%3C/svg%3E") no-repeat 100% 100%;
73+
}
74+
75+
.primary {
76+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M1 7.5h10v2H2v18h28v-18h-9v-2h10a1 1 0 0 1 1 1v20a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-20a1 1 0 0 1 1-1zm14-5h2v13.172l2.536-2.536 1.414 1.414L17 18.5l-1 1-1-1-3.95-3.95 1.414-1.414L15 15.672z'/%3E%3C/svg%3E") no-repeat 100% 100%;
77+
}
78+
79+
.draft {
80+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M10.262 23.448l2.295 2.298-3.443 1.149zm6.886-6.895l2.296 2.298-5.739 5.746-2.295-2.298zm3.443-3.448l2.295 2.299-2.295 2.298-2.295-2.298zM21 3.414V7h3.785zM6 2v28h20V9h-4.833C20.062 9 19 8.137 19 7.032V2zm.167-2h14.414L28 7.586V30c0 1.103-.73 2-1.833 2h-20C5.064 32 4 31.103 4 30V2C4 .897 5.064 0 6.167 0z'/%3E%3C/svg%3E") no-repeat 100% 100%;
81+
}
82+
83+
.outbox {
84+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M2 9.63V26h28.001V9.67L15.998 20.08zM2 6v1.134l14.001 10.452 14-10.408L30 6zm0-2h28c1.103 0 2 .897 2 2v20c0 1.103-.897 2-2 2H2c-1.103 0-2-.897-2-2V6c0-1.103.897-2 2-2z'/%3E%3C/svg%3E") no-repeat 100% 100%;
85+
}
86+
87+
.sent {
88+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M6.756 7.527l6.997 8.487-7.02 8.516 20.126-8.457zM0 2.48l32 13.603L.024 29.52l11.135-13.506z'/%3E%3C/svg%3E") no-repeat 100% 100%;
89+
}
90+
91+
.important {
92+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M1.3 2.7c.7 0 1.3.6 1.3 1.3v25.2c0 .7-.6 1.3-1.3 1.3-.7 0-1.3-.6-1.3-1.3V4c0-.7.6-1.3 1.3-1.3zm10.3-1.2C18.2 1.5 23.7 5 32 2v17.5c-11.1 4-17.1-3.7-27.7 1V3.1c2.7-1.2 5-1.6 7.3-1.6z'/%3E%3C/svg%3E") no-repeat 100% 100%;
93+
}
94+
95+
.starred {
96+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M16 1.6l4.45 9.48 9.95 1.52-7.2 7.38 1.7 10.42-8.9-4.92-8.9 4.92 1.7-10.42-7.2-7.38 9.951-1.52z'/%3E%3C/svg%3E") no-repeat 100% 100%;
97+
}
98+
</style>
99+
<script type="text/javascript">
100+
function onActionComplete() {
101+
var list = document.getElementById('lists').getElementsByClassName('e-list-group-item')[0];
102+
list.style.display = 'none';
103+
}
104+
</script>

‎Badge/BadgeCustomSample/Pages/BadgeintoListView.cshtml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
4+
namespace BadgeCustomSample.Pages
5+
{
6+
public class BadgeintoListViewModel : PageModel
7+
{
8+
public void OnGet()
9+
{
10+
}
11+
}
12+
}

‎Badge/BadgeCustomSample/Pages/DynamicBadge.cshtml‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
@page
2+
@model BadgeCustomSample.Pages.DynamicBadgeModel
3+
@{
4+
List<object> data = new List<object>();
5+
data.Add(new { id = "p_01", text = "Primary", messages = "3 New", badge = "e-badge e-badge-primary", icons = "primary", type = "Primary" });
6+
data.Add(new { id = "p_02", text = "Social", messages = "27 New", badge = "e-badge e-badge-secondary", icons = "social", type = "Primary" });
7+
data.Add(new { id = "p_03", text = "Promotions", messages = "7 New", badge = "e-badge e-badge-success", icons = "promotion", type = "Primary" });
8+
data.Add(new { id = "p_04", text = "Updates", messages = "13 New", badge = "e-badge e-badge-info", icons = "updates", type = "Primary" });
9+
data.Add(new { id = "p_05", text = "Starred", messages = "", badge = "", icons = "starred", type = "All Labels" });
10+
data.Add(new { id = "p_06", text = "Important", messages = "2 New", badge = "e-badge e-badge-danger", icons = "important", type = "All Labels" });
11+
data.Add(new { id = "p_07", text = "Sent", messages = "", badge = "", icons = "sent", type = "All Labels" });
12+
data.Add(new { id = "p_08", text = "Outbox", messages = "", badge = "", icons = "outbox", type = "All Labels" });
13+
data.Add(new { id = "p_09", text = "Drafts", messages = "7 New", badge = "e-badge e-badge-warning", icons = "draft", type = "All Labels" });
14+
}
15+
<div class="col-lg-12 control-section">
16+
<div class="sample_container badge-list">
17+
<ejs-listview id='lists' dataSource=@data headerTitle='Inbox' template="@Html.Raw("<div class='listWrapper' style='width: inherit; height: inherit;'><span class='${icons} list_svg'>&nbsp;</span><span class='list_text'>${text}</span>${if(messages !== '')}<span class='${badge}' style='float: right; margin-top: 16px; font-size: 12px;'>${messages}</span>${/if}</div>")" showHeader=true actionComplete="onActionComplete">
18+
<e-listview-fieldsettings groupBy="type"></e-listview-fieldsettings>
19+
</ejs-listview>
20+
<p class='crossline'></p>
21+
<span class='incr_button'>
22+
<button class='e-btn e-primary' id='button'>Increment Badge Count</button>
23+
</span>
24+
</div>
25+
</div>
26+
27+
28+
<style>
29+
.control-section {
30+
overflow: auto;
31+
}
32+
33+
.sample_container.badge-list {
34+
max-width: 650px;
35+
margin: auto;
36+
height: 540px;
37+
}
38+
39+
#lists {
40+
width: 370px;
41+
display: inline-block;
42+
border: 1px solid rgba(0, 0, 0, 0.12)
43+
}
44+
45+
#lists ul li:first-child {
46+
display: none;
47+
}
48+
49+
.incr_button {
50+
vertical-align: top;
51+
position: relative;
52+
top: 250px;
53+
display: inline-block;
54+
}
55+
56+
.crossline {
57+
display: inline-block;
58+
height: 100%;
59+
margin: 0 20px;
60+
width: 1px;
61+
background: #8080805c;
62+
}
63+
64+
#lists .e-list-item {
65+
cursor: pointer;
66+
height: 50px;
67+
line-height: 48px;
68+
border: 0;
69+
}
70+
71+
/* SVG Icons and Customization */
72+
73+
.list_svg {
74+
width: 24px;
75+
height: 24px;
76+
display: inline-block;
77+
margin-top: 11px;
78+
margin-right: 16px;
79+
}
80+
81+
.list_text {
82+
width: 60%;
83+
display: inline-block;
84+
vertical-align: top;
85+
}
86+
87+
.updates {
88+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M17.024 13.812l.022.162v.893c0 .487-.007.942-.022 1.366-.012.423-.027.833-.042 1.23v2.435c0 .415.022.799.064 1.15.042.35.11.559.202.622.091.063.232.095.422.095h.328l.105.324c-.041.073-.125.136-.253.189-.127.055-.226.063-.296.028H14.126a.556.556 0 0 1-.34-.109v-.27c.086-.108.22-.162.403-.162h.38c.185-.109.294-.219.328-.328.036-.108.054-.3.054-.573a7.32 7.32 0 0 0 .042-.819c0-.29.007-.527.021-.709V17.233c0-.636-.018-1.041-.053-1.213-.034-.173-.082-.386-.138-.64a20.09 20.09 0 0 1-.455.19c-.176.072-.291.108-.348.108l-.105-.162c0-.162.09-.307.274-.434l.38-.27a6.472 6.472 0 0 1 .847-.406c.227-.144.469-.265.73-.365.26-.1.554-.176.878-.229zm-.952-5.736a.9.9 0 0 1 .613.243c.184.162.343.361.477.595.135.235.2.451.2.65 0 .451-.129.802-.39 1.054-.261.254-.453.397-.572.434a1.424 1.424 0 0 1-.412.054.934.934 0 0 1-.455-.122c-.15-.082-.293-.23-.433-.447a1.834 1.834 0 0 1-.277-.676c-.027-.307.044-.63.213-.974.17-.342.373-.577.613-.703.17-.072.31-.108.423-.108zM16 3.465C9.088 3.465 3.464 9.088 3.464 16c0 6.913 5.624 12.536 12.536 12.536S28.536 22.913 28.536 16c0-6.912-5.624-12.535-12.536-12.535zM16 1.6c7.94 0 14.4 6.46 14.4 14.4S23.94 30.4 16 30.4 1.6 23.94 1.6 16 8.06 1.6 16 1.6z'/%3E%3C/svg%3E") no-repeat 100% 100%;
89+
}
90+
91+
.promotion {
92+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M6 4c.4 0 .7.2 1 .4.5.6.5 1.5-.1 2-.5.5-1.4.5-1.9-.1s-.5-1.4.1-1.9c.2-.3.6-.4.9-.4zm0-1c-.6 0-1.2.2-1.6.6-1 .9-1.1 2.4-.2 3.4.9 1 2.4 1 3.4.2 1-.9 1-2.4.1-3.4C7.3 3.2 6.6 3 6 3zm.3-3l7.1 1 18 19.6L18.9 32 .9 12.4.6 5.3z'/%3E%3C/svg%3E") no-repeat 100% 100%;
93+
}
94+
95+
.social {
96+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M15.254 19.089c.996 0 3.587 1.992 3.786 8.27l-19.03.199s-.498-7.97 5.579-8.37c2.392-.398 4.783 1.993 6.178 1.793 1.295-.198 2.59-1.892 3.487-1.892zm3.886-2.69c.797 0 1.793 1.495 2.989 1.694 1.096.198 3.188-1.993 5.18-1.595 5.082.3 4.684 7.573 4.684 7.573l-11.558-.1c-.697-3.687-2.391-5.181-3.288-5.38.598-1.594 1.495-2.192 1.993-2.192zm-8.17-9.963c2.79 0 4.98 2.49 4.98 5.679 0 3.089-2.19 5.679-4.98 5.679-2.79 0-4.982-2.491-4.982-5.68 0-3.088 2.192-5.678 4.982-5.678zm11.657-1.994c2.49 0 4.583 2.293 4.583 5.082 0 2.79-2.092 5.082-4.583 5.082s-4.583-2.293-4.583-5.082c0-2.79 2.092-5.082 4.583-5.082z'/%3E%3C/svg%3E") no-repeat 100% 100%;
97+
}
98+
99+
.primary {
100+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M1 7.5h10v2H2v18h28v-18h-9v-2h10a1 1 0 0 1 1 1v20a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-20a1 1 0 0 1 1-1zm14-5h2v13.172l2.536-2.536 1.414 1.414L17 18.5l-1 1-1-1-3.95-3.95 1.414-1.414L15 15.672z'/%3E%3C/svg%3E") no-repeat 100% 100%;
101+
}
102+
103+
.draft {
104+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M10.262 23.448l2.295 2.298-3.443 1.149zm6.886-6.895l2.296 2.298-5.739 5.746-2.295-2.298zm3.443-3.448l2.295 2.299-2.295 2.298-2.295-2.298zM21 3.414V7h3.785zM6 2v28h20V9h-4.833C20.062 9 19 8.137 19 7.032V2zm.167-2h14.414L28 7.586V30c0 1.103-.73 2-1.833 2h-20C5.064 32 4 31.103 4 30V2C4 .897 5.064 0 6.167 0z'/%3E%3C/svg%3E") no-repeat 100% 100%;
105+
}
106+
107+
.outbox {
108+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M2 9.63V26h28.001V9.67L15.998 20.08zM2 6v1.134l14.001 10.452 14-10.408L30 6zm0-2h28c1.103 0 2 .897 2 2v20c0 1.103-.897 2-2 2H2c-1.103 0-2-.897-2-2V6c0-1.103.897-2 2-2z'/%3E%3C/svg%3E") no-repeat 100% 100%;
109+
}
110+
111+
.sent {
112+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M6.756 7.527l6.997 8.487-7.02 8.516 20.126-8.457zM0 2.48l32 13.603L.024 29.52l11.135-13.506z'/%3E%3C/svg%3E") no-repeat 100% 100%;
113+
}
114+
115+
.important {
116+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M1.3 2.7c.7 0 1.3.6 1.3 1.3v25.2c0 .7-.6 1.3-1.3 1.3-.7 0-1.3-.6-1.3-1.3V4c0-.7.6-1.3 1.3-1.3zm10.3-1.2C18.2 1.5 23.7 5 32 2v17.5c-11.1 4-17.1-3.7-27.7 1V3.1c2.7-1.2 5-1.6 7.3-1.6z'/%3E%3C/svg%3E") no-repeat 100% 100%;
117+
}
118+
119+
.starred {
120+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M16 1.6l4.45 9.48 9.95 1.52-7.2 7.38 1.7 10.42-8.9-4.92-8.9 4.92 1.7-10.42-7.2-7.38 9.951-1.52z'/%3E%3C/svg%3E") no-repeat 100% 100%;
121+
}
122+
</style>
123+
<script type="text/javascript">
124+
var badgeElements;
125+
function onActionComplete() {
126+
badgeElements = Array.prototype.slice.call(document.getElementById('lists').getElementsByClassName('e-badge'));
127+
128+
document.getElementById('button').addEventListener('click', function buttonClick() {
129+
badgeElements.forEach((element) => {
130+
element.textContent = (Number(element.textContent.split(' ')[0])) + 1 + ' New';
131+
})
132+
});
133+
}
134+
</script>

‎Badge/BadgeCustomSample/Pages/DynamicBadge.cshtml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
4+
namespace BadgeCustomSample.Pages
5+
{
6+
public class DynamicBadgeModel : PageModel
7+
{
8+
public void OnGet()
9+
{
10+
}
11+
}
12+
}

‎Badge/BadgeCustomSample/Pages/Error.cshtml‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@page
2+
@model ErrorModel
3+
@{
4+
ViewData["Title"] = "Error";
5+
}
6+
7+
<h1 class="text-danger">Error.</h1>
8+
<h2 class="text-danger">An error occurred while processing your request.</h2>
9+
10+
@if (Model.ShowRequestId)
11+
{
12+
<p>
13+
<strong>Request ID:</strong> <code>@Model.RequestId</code>
14+
</p>
15+
}
16+
17+
<h3>Development Mode</h3>
18+
<p>
19+
Swapping to the <strong>Development</strong> environment displays detailed information about the error that occurred.
20+
</p>
21+
<p>
22+
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
23+
It can result in displaying sensitive information from exceptions to end users.
24+
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
25+
and restarting the app.
26+
</p>

‎Badge/BadgeCustomSample/Pages/Error.cshtml.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
using System.Diagnostics;
4+
5+
namespace BadgeCustomSample.Pages
6+
{
7+
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
8+
[IgnoreAntiforgeryToken]
9+
public class ErrorModel : PageModel
10+
{
11+
public string? RequestId { get; set; }
12+
13+
public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
14+
15+
private readonly ILogger<ErrorModel> _logger;
16+
17+
public ErrorModel(ILogger<ErrorModel> logger)
18+
{
19+
_logger = logger;
20+
}
21+
22+
public void OnGet()
23+
{
24+
RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
25+
}
26+
}
27+
}

0 commit comments

Comments
 (0)