mcpField
S
syncfusion-aspnetcore-barcodes

syncfusion-aspnetcore-barcodes

github.com/syncfusionDevelopment0100 installsUpdated 4w ago
Repository

About syncfusion-aspnetcore-barcodes

A skill for ASP.NET Core developers using Syncfusion barcode components to generate and configure linear barcodes, QR codes, and DataMatrix symbols. It covers appearance and export, and requires code generation to rely only on its reference files.

Key features

  1. 01Generate linear barcodes, QR codes, and DataMatrix
  2. 02Set colors, dimensions, and display text
  3. 03Embed a logo in QR codes
  4. 04Export PNG, JPG, or Base64
  5. 05Use references and avoid undocumented APIs

Use cases

  1. 01Generate codes for product or logistics labels
  2. 02Encode a URL as a QR code
  3. 03Customize and export barcode images

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-barcodes

After installing, type/syncfusion-aspnetcore-barcodesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
barcode-types.md
customization.md
data-matrix.md
export.md
getting-started.md
qr-code.md

Details

From the project README

⚠️ 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 embedding
    • data-matrix.md → DataMatrix barcodes
    • customization.md → color, size, display text properties
    • export.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:

ComponentTag HelperBest ForKey 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 payloadsvalue, width, height, foreColor, logoUrl
DataMatrix Generator<ejs-datamatrixgenerator>2D labels, print media, compact storagevalue, 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 FileRead When the Query Involves
📄 getting-started.mdEvery request — NuGet setup, tag helper registration, CDN, script manager
📄 barcode-types.md1D barcodes, Code39, Code128, Codabar, Code11, Code32, Code93, barcode selection guidance
📄 qr-code.mdQR code rendering, logo embedding, error correction, versioning (v1–v40)
📄 data-matrix.mdDataMatrix overview, rendering, use cases
📄 customization.mdColor (foreColor), dimensions (width/height), display text, rendering mode
📄 export.mdImage 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 CaseRecommended TypeReason
Numeric only, short dataCodabar or Code11Compact, simple
Alphanumeric, uppercaseCode39Industry standard for labels
Full ASCII, variable lengthCode128Most versatile, widely supported
Pharmaceutical (Italian)Code32Specialized regulatory requirement
Dense alphanumeric dataCode93Better compression than Code39
URL or large payloadQR CodeHandles complex data, scannable by phones
Label/print media with compact storageDataMatrixIndustry 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 onclick="exportBarcode()">Export 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

Comments

Markdown supported