Chd.AutoUI 8.0.2

Chd.AutoUI – Attribute-Driven UI Metadata for .NET

Chd (Cleverly Handle Difficulty) AutoUI helps you cleverly handle UI complexity, write less code, and keep your application maintainable. It enables rapid, type-safe, and maintainable UI development by generating rich metadata from C# attributes. Build dynamic forms and grids for your frontend with zero JavaScript or manual JSON.

📝 Table of Contents

• About
• Features
• Installation
• Usage
  • C# Metadata Generation
  • React Integration
• Attribute Reference
• Roadmap
• Contributing & License

About

Chd.AutoUI is a .NET library that lets you define UI structure, validation, and behavior directly in your C# DTOs using attributes. It generates JSON metadata for dynamic UI rendering in any frontend framework.

Features

• Attribute-driven: [AutoCRUD], [GridColumn], [FormField]
• 20+ field types: text, number, date, dropdown, multiselect, file, autocomplete, rich text editor, tag input, image preview, tree select, color picker, date range, stepper, etc.
• Type-safe, reflection-based metadata
• Works with any frontend (React, Vue, Angular, Blazor)
• Extensible: add custom field types/attributes
• Minimal configuration, rapid prototyping

Installation

dotnet add package Chd.AutoUI

Usage

C# Metadata Generation

using Chd.AutoUI.Attributes;

[AutoCRUD(Title = "Products", Icon = "📦", Route = "/products", Description = "Product management")]
public class ProductDto
{
    [GridColumn(Order = 1, Width = 80)]
    [FormField(ReadOnly = true)]
    public int Id { get; set; }

    [GridColumn(Order = 2, Width = 200)]
    [FormField(Label = "Product Name", Type = FieldType.Text, Required = true, MaxLength = 250, Order = 1)]
    public string Name { get; set; } = string.Empty;

    [GridColumn(Order = 3, Width = 150, Format = "currency")]
    [FormField(Label = "Price", Type = FieldType.Number, Required = true, Order = 2)]
    public decimal Price { get; set; }

    [GridColumn(Order = 4, Width = 100)]
    [FormField(Label = "Active", Type = FieldType.Checkbox, Order = 3)]
    public bool IsActive { get; set; }
}

using Chd.AutoUI.Attributes;
using Chd.AutoUI.Services;

[AutoCRUD(Title = "Products", Icon = "📦", Route = "/products")]
public class ProductDto
{
    [GridColumn(Order = 1, Width = 80)]
    [FormField(Label = "Product Name", Type = FieldType.Text, Required = true, MaxLength = 250, Order = 1)]
    public string Name { get; set; } = string.Empty;
    [GridColumn(Order = 2, Width = 150, Format = "currency")]
    [FormField(Label = "Price", Type = FieldType.Number, Required = true, Order = 2)]
    public decimal Price { get; set; }
}

// Generate metadata
var generator = new MetadataGenerator();
var metadata = generator.GenerateMetadata<ProductDto>();
var json = JsonSerializer.Serialize(metadata);

API Endpoint Example

[ApiController]
[Route("api/[controller]")]
public class MetadataController : ControllerBase
{
    [HttpGet("metadata")]
    public IActionResult GetMetadata() => Ok(MetadataGenerator.GenerateMetadata<ProductDto>());
}

React Integration

Chd.AutoUI can be used seamlessly with modern frontend frameworks. For a complete React integration, see:

• chd-auto-ui-react on npm
• React Integration Guide (README)

Highlights:

• Instantly generate dynamic forms and grids in React using the metadata produced by Chd.AutoUI attributes.
• No manual field or validation code required in React—just use <DynamicForm /> and <DynamicGrid />.
• Role-based UI, validation, and all business rules are always in sync with your backend C# code.

Example React usage:

import { DynamicForm, DynamicGrid, setApiBase } from '@mehmetyoldas/chd-auto-ui-react';

setApiBase('https://localhost:5218/api');

function App() {
  return (
    <>
      <DynamicGrid endpoint="products" />
      <DynamicForm endpoint="products" />
    </>
  );
}

For more details and advanced usage, see the React README.

Attribute Reference

[AutoCRUD] (class)

Defines entity-level UI settings (title, icon, route, description).

[GridColumn] (property)

Defines grid/table columns (order, width, format, sortable, hidden).

[FormField] (property)

Defines form fields (label, type, required, maxLength, placeholder, order, readOnly).

Supported Field Types:

• Text, Number, Email, Password, TextArea, Date, DateTime, Checkbox, Select, MultiSelect, Radio, File

Additional supported/new Field Types:

• Autocomplete: remote search + selection (min chars, endpoint)
• RichTextEditor: HTML/WYSIWYG editor (editor config)
• TagInput: freeform tags with optional suggestions
• ImagePreview: image upload with preview/gallery support
• TreeSelect: hierarchical selection from related tree entities
• ColorPicker: color selection (hex/rgb)
• DateRangePicker: two-date range selection
• Stepper: multi-step/wizard grouping

Roadmap

• React integration (DynamicForm, DynamicGrid)
• Vue.js support (planned)
• Angular support (planned)
• Blazor support (planned)
• Svelte support (planned)
• Custom field type extensibility (advanced)
• Improved validation and localization
• More UI frameworks and themes
• Advanced grid features (grouping, export, etc.)
• Better documentation and samples

Contributing & License

Contributions are welcome! Please open issues or pull requests for bugfixes, features, or documentation.

Licensed under the MIT License.

📋 Attributes

AutoCRUDAttribute

Defines general UI settings for the entity.

[AutoCRUD(
    Title = "Products",           // Title displayed in UI
    Icon = "📦",                   // Icon (emoji or icon class)
    Route = "/products",           // Frontend route
    Description = "Product list"  // Description
)]
public class ProductDto { }

GridColumnAttribute

Defines grid/table columns.

[GridColumn(
    Order = 1,              // Sort order
    Width = 150,            // Width in pixels
    Sortable = true,        // Is sortable?
    Format = "currency",    // Format type: "currency", "date", "percent", "number"
    Hidden = false          // Is hidden?
)]
public decimal Price { get; set; }

Format Types:

• currency: Currency format (e.g., $1,234.56)
• date: Date format (e.g., 01/15/2024)
• percent: Percentage format (e.g., 75%)
• number: Number format (e.g., 1,234.56)

FormFieldAttribute

Defines form fields.

[FormField(
    Label = "Product Name",     // Form label
    Type = FieldType.Text,      // Field type
    Required = true,            // Is required?
    MaxLength = 250,            // Maximum length
    Placeholder = "Enter name", // Placeholder text
    Order = 1,                  // Form order
    ReadOnly = false            // Is read-only?
)]
public string Name { get; set; }

Field Types:

• Text: Text input
• Number: Number input
• Email: Email input
• Password: Password input
• Textarea: Multi-line text
• Date: Date picker
• Checkbox: Checkbox
• Select: Dropdown list
• File: File upload

🏗️ Architecture

┌─────────────────────────────────────────────────┐
│           C# DTO Classes                        │
│   [AutoCRUD] [GridColumn] [FormField]          │
└────────────────┬────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────┐
│         MetadataGenerator (Reflection)          │
│   - ScanAssemblyForEntities()                   │
│   - GenerateMetadata<T>()                       │
└────────────────┬────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────┐
│         JSON Metadata (REST API)                │
│   GET /api/metadata                             │
│   GET /api/metadata/{entityName}                │
└────────────────┬────────────────────────────────┘
                 │
                 ▼
┌─────────────────────────────────────────────────┐
│         Frontend (React/Vue/Angular)            │
│   - DynamicGrid Component                       │
│   - DynamicForm Component                       │
└─────────────────────────────────────────────────┘

📊 JSON Metadata Format

{
  "entityName": "ProductDto",
  "title": "Products",
  "icon": "📦",
  "route": "/products",
  "description": "Product management",
  "grid": {
    "columns": [
      {
        "propertyName": "Id",
        "title": "Id",
        "type": "number",
        "order": 1,
        "width": 80,
        "sortable": true,
        "format": null,
        "hidden": false
      },
      {
        "propertyName": "Name",
        "title": "Name",
        "type": "string",
        "order": 2,
        "width": 200,
        "sortable": true,
        "format": null,
        "hidden": false
      }
    ]
  },
  "form": {
    "fields": [
      {
        "propertyName": "Name",
        "label": "Product Name",
        "type": "text",
        "required": true,
        "maxLength": 250,
        "placeholder": "Enter name",
        "order": 1,
        "readOnly": false
      }
    ]
  }
}

🔧 Advanced Usage

Assembly Scanning

To automatically discover all DTOs:

var generator = new MetadataGenerator();
var assembly = typeof(ProductDto).Assembly;
var allEntities = generator.ScanAssemblyForEntities(assembly);

// allEntities: metadata for all classes with [AutoCRUD] attribute

Adding Custom Field Types

You can extend the FieldType enum to add your own field types:

public enum CustomFieldType
{
    // Standard types
    Text = 0,
    Number = 1,
    // ...

    // Custom types
    RichTextEditor = 100,
    ColorPicker = 101,
    ImageUploader = 102
}

🧪 Test Examples

Simple Entity

[AutoCRUD(Title = "Categories", Icon = "📁", Route = "/categories")]
public class CategoryDto
{
    [GridColumn(Order = 1, Width = 80)]
    [FormField(ReadOnly = true)]
    public int Id { get; set; }

    [GridColumn(Order = 2, Width = 200)]
    [FormField(Label = "Category Name", Type = FieldType.Text, Required = true, MaxLength = 100, Order = 1)]
    public string Name { get; set; } = string.Empty;
}

Related Entity

[AutoCRUD(Title = "Products", Icon = "📦", Route = "/products")]
public class ProductDto
{
    [GridColumn(Order = 1, Width = 80)]
    [FormField(ReadOnly = true)]
    public int Id { get; set; }

    [GridColumn(Order = 2, Width = 200)]
    [FormField(Label = "Product Name", Type = FieldType.Text, Required = true, Order = 1)]
    public string Name { get; set; } = string.Empty;

    [GridColumn(Order = 3, Width = 150)]
    [FormField(Label = "Category", Type = FieldType.Select, Required = true, Order = 2)]
    public int CategoryId { get; set; }

    [GridColumn(Order = 4, Width = 150)]
    public string? CategoryName { get; set; }
}

🛠️ Technologies

• .NET 8.0
• System.Reflection - For metadata generation
• Microsoft.EntityFrameworkCore - For entity support

🌐 Frontend Integration

React Components (npm)

For automatic UI generation in React, use our companion npm package:

npm install @mehmetyoldas/chd-auto-ui-react

Complete Integration Example:

// 1. Backend: C# DTO with attributes
[AutoCRUD(Title = "Products", Icon = "📦")]
public class ProductDto
{
    [GridColumn(Order = 1)] [FormField(Type = FieldType.Text)]
    public int Id { get; set; }

    [GridColumn(Order = 2)] [FormField(Type = FieldType.Text, Required = true)]
    public string Name { get; set; }
}

// 2. API Controller
[HttpGet("metadata")]
public IActionResult GetMetadata() => Ok(MetadataGenerator.GenerateMetadata<ProductDto>());

// 3. Frontend: React components
import { DynamicForm, DynamicGrid } from '@mehmetyoldas/chd-auto-ui-react';

function ProductManager() {
    return (
        <div>
            <DynamicForm 
                apiUrl="/api/products"
                metadataUrl="/api/products/metadata" 
            />
            <DynamicGrid 
                apiUrl="/api/products"
                metadataUrl="/api/products/metadata"
            />
        </div>
    );
}

📖 React Package Documentation: npm package

📝 License

MIT License

🤝 Contributing

1. Fork the project
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📞 Contact

Chd Framework - metadata-driven UI generation

🔗 Related Projects

• Chd.AutoUI.EF - Generic Repository Pattern
• Chd.Pos - POS Demo Application
• Chd.StockTracking - Stock Tracking Demo Application