⚠️ STRICT USAGE RULES — MANDATORY FOR ALL CODE GENERATION
These rules are non-negotiable. They must be followed for every code generation request using this skill.
Rule A — Use Only Provided Reference Files
- You must always read
references/getting-started.md for every request
- Read other reference files only if they directly match the user's query:
barcode-types.md → 1D linear barcodes (Code39, Code128, Codabar, etc.)qr-code.md → QR codes with optional logo embeddingdata-matrix.md → DataMatrix barcodescustomization.md → color, size, display text propertiesexport.md → PNG/JPG/Base64 export functionality
- No external knowledge is allowed:
- ❌ Do NOT use internet documentation
- ❌ Do NOT use training-data assumptions
- ✅ If a feature cannot be confirmed from reference files, apply Rule B
Rule B — No Guessing, No Inference
If a feature, property, API, or behavior is not explicitly documented in the reference files:
You must NOT:
- Invent properties or methods
- Infer missing APIs or parameters
- Assume deprecated or undocumented features exist
- Generalize from other Syncfusion components
Instead, respond with:
⚠️ NOT DOCUMENTED: [feature name] is not covered in the reference files.
Skipping this feature to avoid generating incorrect code.
Barcode Components Overview
Syncfusion EJ2 ASP.NET Core provides three barcode components via tag helpers:
| Component |
Tag Helper |
Best For |
Key Properties |
| BarcodeGenerator |
<ejs-barcodegenerator> |
Linear 1D barcodes (Code39, Code128, Codabar, etc.) |
type, value, foreColor, width, height |
| QR Code Generator |
<ejs-qrcodegenerator> |
2D QR codes, URLs, large payloads |
value, width, height, foreColor, logoUrl |
| DataMatrix Generator |
<ejs-datamatrixgenerator> |
2D labels, print media, compact storage |
value, width, height, foreColor |
All three support:
- ✅ Custom colors (
foreColor)
- ✅ Dimension control (
width, height)
- ✅ Display text customization
- ✅ Export to PNG/JPG/Base64
Navigation Guide
Always read references/getting-started.md first, then read only files relevant to the request.
| Reference File |
Read When the Query Involves |
| 📄 getting-started.md |
Every request — NuGet setup, tag helper registration, CDN, script manager |
| 📄 barcode-types.md |
1D barcodes, Code39, Code128, Codabar, Code11, Code32, Code93, barcode selection guidance |
| 📄 qr-code.md |
QR code rendering, logo embedding, error correction, versioning (v1–v40) |
| 📄 data-matrix.md |
DataMatrix overview, rendering, use cases |
| 📄 customization.md |
Color (foreColor), dimensions (width/height), display text, rendering mode |
| 📄 export.md |
Image export (PNG/JPG), Base64 export, export methods |
Quick Start
1. Install NuGet Package
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper (~/Pages/_ViewImports.cshtml)
@addTagHelper *, Syncfusion.EJ2
3. Add CDN Resources (~/Pages/Shared/_Layout.cshtml)
<head>
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
</head>
<body>
...
<ejs-scripts></ejs-scripts>
</body>
4. Basic Examples
BarcodeGenerator (Code128)
<ejs-barcodegenerator id="barcode"
width="200px"
height="150px"
type="Code128"
value="SYNCFUSION"
mode="SVG">
</ejs-barcodegenerator>
QR Code
<ejs-qrcodegenerator id="qrcode"
width="200px"
height="200px"
value="https://syncfusion.com"
mode="SVG">
</ejs-qrcodegenerator>
DataMatrix
<ejs-datamatrixgenerator id="datamatrix"
width="200px"
height="150px"
value="Syncfusion"
mode="SVG">
</ejs-datamatrixgenerator>
Common Patterns
Choose Barcode Type by Content
| Use Case |
Recommended Type |
Reason |
| Numeric only, short data |
Codabar or Code11 |
Compact, simple |
| Alphanumeric, uppercase |
Code39 |
Industry standard for labels |
| Full ASCII, variable length |
Code128 |
Most versatile, widely supported |
| Pharmaceutical (Italian) |
Code32 |
Specialized regulatory requirement |
| Dense alphanumeric data |
Code93 |
Better compression than Code39 |
| URL or large payload |
QR Code |
Handles complex data, scannable by phones |
| Label/print media with compact storage |
DataMatrix |
Industry standard for logistics |
Customize Colors (All Generators)
<ejs-barcodegenerator id="barcode"
width="200px" height="150px"
type="Code128" value="SYNCFUSION"
foreColor="red" mode="SVG">
</ejs-barcodegenerator>
Embed Logo in QR Code
<ejs-qrcodegenerator id="qrcode"
width="200px" height="200px"
value="https://syncfusion.com"
logoUrl="logo.png"
mode="SVG">
</ejs-qrcodegenerator>
Export Barcode on Button Click
<button as JPG</button>
<script>
function exportBarcode() {
var barcode = document.getElementById("barcode").ej2_instances[0];
barcode.exportImage('MyBarcode', 'JPG');
}
function exportAsBase64() {
var barcode = document.getElementById("barcode").ej2_instances[0];
var base64String = barcode.exportAsBase64Image('PNG');
console.log(base64String);
}
</script>
Hide Display Text
<ejs-barcodegenerator id="barcode"
width="200px" height="150px"
type="Code128" value="SYNCFUSION"
displayText.visibility="false"
mode="SVG">
</ejs-barcodegenerator>
When to Use This Skill
✅ Rendering any barcode type in ASP.NET Core
✅ Choosing between BarcodeGenerator, QR Code, and DataMatrix
✅ Customizing barcode appearance (color, size, text)
✅ Embedding a logo in a QR code
✅ Exporting barcodes as images or Base64 strings
✅ Selecting appropriate barcode type for use case
1---2name: syncfusion-aspnetcore-barcodes3description: Implement Syncfusion ASP.NET Core Barcode components including BarcodeGenerator (1D codes like Code39, Code128, Codabar), QR Code Generator, and DataMatrix Generator. Use this when rendering barcodes, implementing QR codes with logo embedding, or generating DataMatrix codes. This skill covers barcode type selection, color and dimension customization, display text configuration, and export functionality (JPG, PNG, Base64).4---56# ⚠️ STRICT USAGE RULES — MANDATORY FOR ALL CODE GENERATION78These rules are **non-negotiable**. They must be followed for **every** code generation request using this skill.910## Rule A — Use Only Provided Reference Files1112- You must always read **`references/getting-started.md`** for every request13- Read other reference files **only if they directly match the user's query**:14 - `barcode-types.md` → 1D linear barcodes (Code39, Code128, Codabar, etc.)15 - `qr-code.md` → QR codes with optional logo embedding16 - `data-matrix.md` → DataMatrix barcodes17 - `customization.md` → color, size, display text properties18 - `export.md` → PNG/JPG/Base64 export functionality19- **No external knowledge** is allowed:20 - ❌ Do NOT use internet documentation21 - ❌ Do NOT use training-data assumptions22 - ✅ If a feature cannot be confirmed from reference files, apply Rule B2324## Rule B — No Guessing, No Inference2526If a feature, property, API, or behavior is **not explicitly documented** in the reference files:2728**You must NOT:**29- Invent properties or methods30- Infer missing APIs or parameters31- Assume deprecated or undocumented features exist32- Generalize from other Syncfusion components3334**Instead, respond with:**35```36⚠️ NOT DOCUMENTED: [feature name] is not covered in the reference files.37Skipping this feature to avoid generating incorrect code.38```3940---4142# Barcode Components Overview4344Syncfusion EJ2 ASP.NET Core provides three barcode components via tag helpers:4546| Component | Tag Helper | Best For | Key Properties |47|---|---|---|---|48| **BarcodeGenerator** | `<ejs-barcodegenerator>` | Linear 1D barcodes (Code39, Code128, Codabar, etc.) | `type`, `value`, `foreColor`, `width`, `height` |49| **QR Code Generator** | `<ejs-qrcodegenerator>` | 2D QR codes, URLs, large payloads | `value`, `width`, `height`, `foreColor`, `logoUrl` |50| **DataMatrix Generator** | `<ejs-datamatrixgenerator>` | 2D labels, print media, compact storage | `value`, `width`, `height`, `foreColor` |5152All three support:53- ✅ Custom colors (`foreColor`)54- ✅ Dimension control (`width`, `height`)55- ✅ Display text customization56- ✅ Export to PNG/JPG/Base645758---5960# Navigation Guide6162**Always read `references/getting-started.md` first**, then read only files relevant to the request.6364| Reference File | Read When the Query Involves |65|---|---|66| 📄 [getting-started.md](references/getting-started.md) | **Every request** — NuGet setup, tag helper registration, CDN, script manager |67| 📄 [barcode-types.md](references/barcode-types.md) | 1D barcodes, Code39, Code128, Codabar, Code11, Code32, Code93, barcode selection guidance |68| 📄 [qr-code.md](references/qr-code.md) | QR code rendering, logo embedding, error correction, versioning (v1–v40) |69| 📄 [data-matrix.md](references/data-matrix.md) | DataMatrix overview, rendering, use cases |70| 📄 [customization.md](references/customization.md) | Color (`foreColor`), dimensions (`width`/`height`), display text, rendering mode |71| 📄 [export.md](references/export.md) | Image export (PNG/JPG), Base64 export, export methods |7273---7475# Quick Start7677## 1. Install NuGet Package7879```powershell80Install-Package Syncfusion.EJ2.AspNet.Core81```8283## 2. Register Tag Helper (`~/Pages/_ViewImports.cshtml`)8485```cshtml86@addTagHelper *, Syncfusion.EJ287```8889## 3. Add CDN Resources (`~/Pages/Shared/_Layout.cshtml`)9091```cshtml92<head>93 <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />94 <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>95</head>96<body>97 ...98 <ejs-scripts></ejs-scripts>99</body>100```101102## 4. Basic Examples103104### BarcodeGenerator (Code128)105```cshtml106<ejs-barcodegenerator id="barcode"107 width="200px"108 height="150px"109 type="Code128"110 value="SYNCFUSION"111 mode="SVG">112</ejs-barcodegenerator>113```114115### QR Code116```cshtml117<ejs-qrcodegenerator id="qrcode"118 width="200px"119 height="200px"120 value="https://syncfusion.com"121 mode="SVG">122</ejs-qrcodegenerator>123```124125### DataMatrix126```cshtml127<ejs-datamatrixgenerator id="datamatrix"128 width="200px"129 height="150px"130 value="Syncfusion"131 mode="SVG">132</ejs-datamatrixgenerator>133```134135---136137# Common Patterns138139## Choose Barcode Type by Content140141| Use Case | Recommended Type | Reason |142|---|---|---|143| Numeric only, short data | Codabar or Code11 | Compact, simple |144| Alphanumeric, uppercase | Code39 | Industry standard for labels |145| Full ASCII, variable length | Code128 | Most versatile, widely supported |146| Pharmaceutical (Italian) | Code32 | Specialized regulatory requirement |147| Dense alphanumeric data | Code93 | Better compression than Code39 |148| URL or large payload | QR Code | Handles complex data, scannable by phones |149| Label/print media with compact storage | DataMatrix | Industry standard for logistics |150151## Customize Colors (All Generators)152153```cshtml154<ejs-barcodegenerator id="barcode"155 width="200px" height="150px"156 type="Code128" value="SYNCFUSION"157 foreColor="red" mode="SVG">158</ejs-barcodegenerator>159```160161## Embed Logo in QR Code162163```cshtml164<ejs-qrcodegenerator id="qrcode"165 width="200px" height="200px"166 value="https://syncfusion.com"167 logoUrl="logo.png"168 mode="SVG">169</ejs-qrcodegenerator>170```171172## Export Barcode on Button Click173174```cshtml175<button onclick="exportBarcode()">Export as JPG</button>176177<script>178 function exportBarcode() {179 var barcode = document.getElementById("barcode").ej2_instances[0];180 barcode.exportImage('MyBarcode', 'JPG');181 }182 183 function exportAsBase64() {184 var barcode = document.getElementById("barcode").ej2_instances[0];185 var base64String = barcode.exportAsBase64Image('PNG');186 console.log(base64String);187 }188</script>189```190191## Hide Display Text192193```cshtml194<ejs-barcodegenerator id="barcode"195 width="200px" height="150px"196 type="Code128" value="SYNCFUSION"197 displayText.visibility="false"198 mode="SVG">199</ejs-barcodegenerator>200```201202---203204## When to Use This Skill205206✅ Rendering any barcode type in ASP.NET Core 207✅ Choosing between BarcodeGenerator, QR Code, and DataMatrix 208✅ Customizing barcode appearance (color, size, text) 209✅ Embedding a logo in a QR code 210✅ Exporting barcodes as images or Base64 strings 211✅ Selecting appropriate barcode type for use case
syncfusion