DEV Community: Rijwan Ansari

Dynamic Database API in .NET 9: Clean Architecture & MediatR for Flexible Solutions

Rijwan Ansari — Tue, 18 Mar 2025 09:01:14 +0000

Introduction

Flexibility in database selection is critical in modern application development. A Web API should support multiple database options such as SQL Server, PostgreSQL, MySQL, and SQLite without major code changes. In this article, we will build a .NET 9 Web API using Clean Architecture, Domain-Driven Design (DDD), and MediatR, while implementing dynamic database selection using Entity Framework Core (EF Core).

Why Do We Need a Dynamic Database?

1. Flexibility in Deployment

Different environments (development, staging, production) may require different databases.
Users or clients may have preferences for a specific database technology.

2. Cost Optimization

Some databases are more cost-effective depending on usage.
Cloud providers offer different pricing models for different database engines.

3. Scalability and Performance

Some databases are better suited for high-scale applications.
Ability to switch between relational and NoSQL databases based on use cases.

4. Vendor Independence

Avoid vendor lock-in by supporting multiple databases.
Easier migration between databases if needed.

5. Multi-Tenant Applications

Different clients may require different database engines.
Supports SaaS applications where tenants choose their preferred database.

Key Features

Clean Architecture for better maintainability
DDD principles for structured domain logic
CQRS using MediatR for command-query separation
Dynamic Database Selection (SQL Server, PostgreSQL, MySQL, SQLite)
Entity Framework Core for data persistence

Prerequisites

Visual Studio or VS Code
.NET 9 SDK
Database based on your need.

About the Project

This project is a .NET 9 Web API designed with Clean Architecture principles and Domain-Driven Design (DDD). It follows the CQRS pattern using MediatR and supports dynamic database selection using Entity Framework Core. The project is structured into multiple layers for maintainability and scalability:

WebAPI Layer: Handles HTTP requests and routes them to the application layer.
Application Layer: Contains business logic, DTOs, and CQRS commands/queries.
Domain Layer: Defines core entities and domain logic.
Infrastructure Layer: Manages database context, dependency injection, and configurations.

The main objective of this project is to allow users to select a database dynamically via configuration, making the API flexible and adaptable for different deployment scenarios.

Complete source code: Click Here

Let’s start with the implementation.

Create the Solution and Projects

We can create solution and projects from UI or through command. The project structure should be as shown below:

DynamicDatabaseApp – Solution
WebAPI – ASP.NET Web API (.NET 9)
Application – Class Library – .NET 9
Doman – Class Library – .NET 9
Infrastructure – Class Library – .NET 9

mkdir DynamicDatabaseApp && cd DynamicDatabaseApp
dotnet new sln -n DynamicDatabaseAPI

dotnet new webapi -n WebAPI
dotnet new classlib -n Application
dotnet new classlib -n Domain
dotnet new classlib -n Infrastructure

dotnet sln add src/WebAPI src/Application src/Domain src/Infrastructure

dotnet add src/WebAPI reference src/Application src/Infrastructure

dotnet add src/Application reference src/Domain

dotnet add src/Infrastructure reference src/Domain

Add Project references as shown:

WebAPI – Application, Infrastructure
Application – Domain
Infrastructure – Application
Domian – none.

Install Required NuGet Packages
Let’s Add the necessary packages for the project.

WebAPI: Microsoft.EntityFrameworkCore.Design
Application: MediatR, Microsoft.EntityFrameworkCore, Microsoft.Extensions.DependencyInjection
Infrastructure: Microsoft.EntityFrameworkCore, Microsoft.EntityFrameworkCore.InMemory, Microsoft.EntityFrameworkCore.Sqlite, Microsoft.EntityFrameworkCore.SqlServer, Npgsql.EntityFrameworkCore.PostgreSQL, Pomelo.EntityFrameworkCore.MySql, Microsoft.Extensions.Configuration, Microsoft.Extensions.DependencyInjection
Domain: none.

You can add the packages form UI or command.

dotnet add src/WebAPI package Microsoft.EntityFrameworkCore.Design

dotnet add src/Application package MediatR
dotnet add src/Application package Microsoft.EntityFrameworkCore
dotnet add src/Application package Microsoft.Extensions.DependencyInjection

dotnet add src/Infrastructure package Microsoft.Extensions.DependencyInjection
dotnet add src/Infrastructure package Microsoft.EntityFrameworkCore.Design
dotnet add src/Infrastructure package Microsoft.EntityFrameworkCore
dotnet add src/Infrastructure package Microsoft.EntityFrameworkCore.Sqlite
dotnet add src/Infrastructure package Microsoft.EntityFrameworkCore.SqlServer
dotnet add src/Infrastructure package Npgsql.EntityFrameworkCore.PostgreSQL
dotnet add src/Infrastructure package Pomelo.EntityFrameworkCore.MySql
dotnet add src/Infrastructure package Microsoft.Extensions.Configuration
dotnet add src/Infrastructure package Microsoft.Extensions.DependencyInjection

We created a project structure following Clean Architecture and added the necessary references.

Implementing the Layers

Define the Domain Layer (Domain)

*Entity *– User.cs

namespace Domain;

public class User
{
    public Guid Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public string Email { get; set; } = string.Empty;

}

Define the Application Layer (Application)

Create IApplicationDbContext.cs class in Common/Interfaces folder.

using Domain;
using Microsoft.EntityFrameworkCore;

namespace Application.Common.Interfaces;

public interface IApplicationDbContext
{
    DbSet<User> Users { get; }
    Task<int> SaveChangesAsync(CancellationToken cancellationToken = default);

}

Create UserDto.cs under User/Dto folder.

namespace Application.Users.Dto;

public record UserDto
{
    public string Name { get; set; } = string.Empty;
    public string Email { get; set; } = string.Empty;
}

Command – CreateUserCommand.cs in folder User/Create

using MediatR;

namespace Application.Users.Create;

public class CreateUserCommand : IRequest<Guid>
{
    public string Name { get; set; } = string.Empty;
    public string Email { get; set; } = string.Empty;
}

Command Handler – CreateUserCommandHandler.cs in folder User/Create

using Application.Common.Interfaces;
using Domain;
using MediatR;

namespace Application.Users.Create;

public class CreateUserCommandHandler(IApplicationDbContext dbContext) : IRequestHandler<CreateUserCommand, Guid>
{
    public async Task<Guid> Handle(CreateUserCommand request, CancellationToken cancellationToken)
    {
        var user = new User
        {
            Id = Guid.NewGuid(),
            Name = request.Name,
            Email = request.Email
        };

        dbContext.Users.Add(user);
        await dbContext.SaveChangesAsync(cancellationToken);

        return user.Id;

    }
}

For Dependency Injection, add DependencyInjection.cs

using Microsoft.Extensions.DependencyInjection;

namespace Application;

public static class DependencyInjection
{
    public static IServiceCollection AddApplication(this IServiceCollection services)
    {
        services.AddMediatR(config =>
        {
            config.RegisterServicesFromAssembly(typeof(DependencyInjection).Assembly);
        });

        return services;
    }
}

The Application project should be as illustrated below:

Implement the Infrastructure Layer (Infrastructure)

Database Context – AppDbContext.cs (under Persistence folder)

using Application.Common.Interfaces;
using Domain;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.ChangeTracking;

namespace Infrastructure.Persistence;

public class AppDbContext (DbContextOptions<AppDbContext> options)
    : DbContext(options), IApplicationDbContext
{
    public DbSet<User> Users { get; set; } = null!;

    public override Task<int> SaveChangesAsync(CancellationToken cancellationToken = default)
    {
        ChangeTracker.DetectChanges();
        return base.SaveChangesAsync(cancellationToken);
    }
}

DependencyInjection.cs

using Infrastructure.Persistence;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.EntityFrameworkCore;
using Application.Common.Interfaces;

namespace Infrastructure;

public static class DependencyInjection
{
    public static IServiceCollection AddInfrastructure(this IServiceCollection services, IConfiguration configuration)
    {
        string dbType = configuration["Database:Type"] ?? string.Empty;

        services.AddDbContext<AppDbContext>(options =>
        {
            switch (dbType)
            {
                case "SQLServer":
                    options.UseSqlServer(configuration.GetConnectionString("SqlServerConnection"));
                    break;
                case "PostgreSQL":
                    options.UseNpgsql(configuration.GetConnectionString("PostgresConnection"));
                    break;
                case "MySQL":
                    options.UseMySql(configuration.GetConnectionString("MySqlConnection"), ServerVersion.AutoDetect(configuration.GetConnectionString("MySqlConnection")));
                    break;
                case "SQLite":
                    options.UseSqlite(configuration.GetConnectionString("MySqlLiteConnection"));
                    break; 
                case "InMemory":
                    options.UseInMemoryDatabase("InMemoryDbForTesting");
                    break; 

                default: throw new Exception("Invalid database type");
            }

        });

        services.AddScoped<IApplicationDbContext>(sp => sp.GetRequiredService<AppDbContext>());

        return services;
    }

}

The DependencyInjection class provides a centralized way to register different database providers (SQL Server, PostgreSQL, MySQL, SQLite, and In-Memory) based on configuration. This approach allows seamless database switching without modifying the core application logic, improving scalability, cost-effectiveness, and deployment flexibility.

Infrastructure Project:

Presentation layer (WebAPI)

For above dynamic database configuration, we will add the configuration values in appsettings.json

appsettings.json

{
  "Database": {
    "Type": "SqlServer"
  },
  "ConnectionStrings": {
    "SqlServer": "Server=.;Database=MyDb;Trusted_Connection=True;MultipleActiveResultSets=true",
    "PostgreSQL": "Host=localhost;Database=mydb;Username=myuser;Password=mypassword",
    "MySQL": "Server=localhost;Database=mydb;User=root;Password=mypassword;",
    "SQLite": "Data Source=mydatabase.db"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

Add UserController.cs under Contollers folder

using Application.Users.Create;
using MediatR;
using Microsoft.AspNetCore.Mvc;

namespace WebAPI.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class UserController (IMediator mediator) : ControllerBase
    {
        private readonly IMediator _mediator = mediator;

        [HttpPost]
        public async Task<ActionResult<Guid>> CreateUser(CreateUserCommand command)
        {
            var userId = await _mediator.Send(command);

            return Ok(userId);
        }

    }
}

builder.Services
    .AddApplication()
    .AddInfrastructure(builder.Configuration);

....

app.MapControllers();

Complete program.cs file.

using Application;
using Infrastructure;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
// Learn more about configuring OpenAPI at https://aka.ms/aspnet/openapi
builder.Services.AddOpenApi();

builder.Services
    .AddApplication()
    .AddInfrastructure(builder.Configuration);

builder.Services.AddEndpointsApiExplorer();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.MapOpenApi();
}
app.MapControllers();

app.UseHttpsRedirection();

app.Run();

WebAPI Project:

That’s all. Now, we did the dynamic database for the application. You can do configuration in database and do migrations accordingly.

Complete Project Structure:

Complete source code: Click Here

Conclusion

Implementing dynamic database selection in a .NET 8 Web API using Clean Architecture, DDD, MediatR, and Entity Framework Core provides a flexible, scalable, and future-proof solution for modern applications. By leveraging appsettings.json to configure different database providers, developers can easily switch between SQL Server, PostgreSQL, MySQL, SQLite, and In-Memory databases without altering the core application logic.

This approach enhances maintainability, cost-efficiency, and adaptability, making it ideal for multi-tenant applications, microservices, and cloud-based deployments. Whether you’re developing for local testing, production environments, or multi-database support, this architecture ensures seamless database integration.

By adopting this strategy, your application remains robust, vendor-independent, and ready to scale, empowering developers to build high-quality, dynamic APIs with ease.

Creating A Reusable Dynamic Pagination Component in Blazor

Rijwan Ansari — Mon, 26 Aug 2024 17:01:20 +0000

Blazor is a modern web framework developed by Microsoft that is changing the way developers build interactive web applications. Blazor lets you build rich client-side web experiences using C# and .NET instead of JavaScript. One of the most powerful features of Blazor is its component-based architecture, which encourages the reuse of code and modular design. This article will show you how to create a reusable dynamic pagination component with Blazor, ensuring minimal changes and maximum flexibility.

To know more about Blazor Web Development Click Here.

Understanding Blazor and Its Component-Based Architecture

Blazor is part of the ASP.NET Core framework, and it allows you to develop full-stack web applications with .NET. Blazor provides a unified programming model that lets you use your .NET skills across the stack, whether you’re building server-side or client-side applications.

Blazor differs from traditional web frameworks by running .NET code in the browser (Blazor WebAssembly) or on the server with SignalR (Blazor Server). This removes the need for JavaScript in many scenarios, providing a more seamless development experience for .NET developers.

Component-Based Framework

Blazor is a component based framework at its core. In Blazor, everything is a component, from a simple button to a complex data grid. Components are self-contained units of user interface and behavior that can be reused throughout the entire application. They allow developers to encapsulate their HTML, CSS and C# code in one location, which promotes reusability, maintainability and testability.

Components can be nested, set parameters and even share data with each other. This makes Blazor an ideal framework for building modular and dynamic web applications. Once created, components can be used anywhere in the application and are written as .razor files.

In this article, we create a pagination component which can be reused across the application dynamically for any list or collection.

Pagination in Web Applications

In web applications that deal with large amounts of data, pagination is a common feature. This enables you to split your data into pages, so that users can browse more easily without overwhelming them with lengthy lists. Correct pagination improves the user experience because it improves performance, reduces page loading time, and makes data easier to digest.

You can implement both client-side and server-side pagination approaches in Blazor. In this article, our focus will be on the creation of a reusable client-side pagination component that can be easily integrated into any Blazor application.

Complete Source Code: https://github.com/rijwanansari/DynamicPagination

Creating a Reusable Dynamic Pagination Component

Let’s walk through the process of building a reusable pagination component in Blazor that supports dynamic page size selection and navigation.

Create a Blazor Web App project template using Visual Studio or VS Code and give a name.

You can choose any .NET Core framework. However, for this article, I have used .NET 8.

Defining the Pagination Component

Create a Blazor component in a shared folder or any folder of your choice where you can share across the project easily.

The first step is to define the PaginationComponent. This component will handle the pagination logic and display the necessary controls, such as page numbers and page size options.

PaginationComponent.razor



@typeparam TItem

<div>
    <table class="table">
        <thead>
            @ChildContentHeader
        </thead>
        <tbody>
            @foreach (var item in PaginatedData)
            {
                @ChildContentRow(item)
            }
        </tbody>
    </table>

    <div class="pagination-controls">
        <!-- Page Size Dropdown -->
        <label for="pageSize">Page Size: </label>
        <select @bind="PageSize" id="pageSize">
            @foreach (var size in PageSizes)
            {
                <option value="@size">@size</option>
            }
        </select>

        <!-- Previous Page Button -->
        <button @onclick="PreviousPage" disabled="@IsPreviousDisabled">Previous</button>

        <!-- Page Number Buttons -->
        @foreach (var pageNumber in Enumerable.Range(1, TotalPages))
        {
            <button @onclick="() => GoToPage(pageNumber)" class="@(CurrentPage == pageNumber ? "active" : "")">
                @pageNumber
            </button>
        }

        <!-- Next Page Button -->
        <button @onclick="NextPage" disabled="@IsNextDisabled">Next</button>
    </div>
</div>

@code {
    [Parameter] public IEnumerable<TItem> Items { get; set; }
    [Parameter] public int DefaultPageSize { get; set; } = 10;
    [Parameter] public RenderFragment ChildContentHeader { get; set; }
    [Parameter] public RenderFragment<TItem> ChildContentRow { get; set; }

    private int PageSize { get; set; }
    private List<TItem> PaginatedData => Items.Skip((CurrentPage - 1) * PageSize).Take(PageSize).ToList();
    private int CurrentPage { get; set; } = 1;

    private readonly int[] PageSizes = new[] { 5, 10, 20, 50 };

    protected override void OnInitialized()
    {
        PageSize = DefaultPageSize;
    }

    private void NextPage()
    {
        if (CurrentPage < TotalPages)
        {
            CurrentPage++;
        }
    }

    private void PreviousPage()
    {
        if (CurrentPage > 1)
        {
            CurrentPage--;
        }
    }

    private void GoToPage(int pageNumber)
    {
        CurrentPage = pageNumber;
    }

    private int TotalPages => (int)Math.Ceiling(Items.Count() / (double)PageSize);

    private bool IsPreviousDisabled => CurrentPage == 1;
    private bool IsNextDisabled => CurrentPage == TotalPages;
}

In this component, we have the following items.

@typeparam TItem: This allows the component to be generic, meaning it can work with any data type (TItem). It makes the component flexible and reusable with different types of data, such as Product, Employee, etc.

Items, ChildContentHeader, and ChildContentRow Parameters:

Items: This is a collection of data (IEnumerable) passed into the component. The component uses this data to display paginated content.
ChildContentHeader: This is a render fragment for the table header. It allows the parent component to define how the header should be rendered.
ChildContentRow: This is a render fragment for each row of data. It takes a TItem and allows the parent component to define how each item should be displayed.
Pagination Logic: The component calculates which items to display based on the current page and page size.

PaginatedData: This property uses LINQ to skip items and take only those that should be displayed on the current page.
PageSize and PageSizes: PageSize controls how many items are displayed per page, and PageSizes defines the available options for page size.
NextPage, PreviousPage, and GoToPage: These methods handle navigation between pages.
Pagination Controls: The component includes buttons for navigating between pages (Next and Previous) and buttons for selecting specific pages. There’s also a dropdown for selecting the page size.

We will CSS file for this component as shown to add style for the controls like page, page buttons, previous and next buttons and below pagination sections.

CSS for this pagination controls is shared below.



.pagination-controls
{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.pagination-controls button {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #007bff;
    padding: 5px 10px;
    margin: 0 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .pagination-controls button:hover {
        background-color: #007bff;
        color: white;
    }

    .pagination-controls button.active {
        background-color: #007bff;
        color: white;
        font-weight: bold;
    }

    .pagination-controls button:disabled {
        background-color: #e9ecef;
        color: #6c757d;
        cursor: not-allowed;
        border-color: #ced4da;
    }

.pagination-controls select {
    margin-right: 15px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.pagination-controls label {
    margin-right: 5px;
    font-weight: bold;
}

This CSS ensures that the pagination controls have a clean, modern look with smooth transitions when users interact with them.

Using the Pagination Component
Once the PaginationComponent is defined, you can easily integrate it into your Blazor pages or components. Here’s an example of how to use it with a list of products.



public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

//sample dummy data
public class ProductService
{
    public List<Product> GetProducts()
    {
        // Sample data
        return Enumerable.Range(1, 100).Select(i => new Product
        {
            Id = i,
            Name = $"Product {i}",
            Price = i * 10
        }).ToList();
    }
}

We can use the pagination component as illustrated.



@page "/"
@using DynamicPagination.Components.Shared
@using DynamicPagination.Model
@inject ProductService ProductService
@rendermode RenderMode.InteractiveServer

<h3>Product List</h3>

<PaginationComponent TItem="Product" Items="Products" DefaultPageSize="10">
    <ChildContentHeader>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Price</th>
        </tr>
    </ChildContentHeader>
    <ChildContentRow Context="product">
        <tr>
            <td>@product.Id</td>
            <td>@product.Name</td>
            <td>@product.Price</td>
        </tr>
    </ChildContentRow>
</PaginationComponent>

@code {
    private List<Product> Products;

    protected override void OnInitialized()
    {
        Products = ProductService.GetProducts();
    }
}

How It Works
In the above sample, the PaginationComponent takes in a list of products and renders a paginated table. The ChildContentHeader defines the table’s headers, while ChildContentRow specifies how each row of data should be rendered. The component handles the pagination logic, allowing users to navigate through pages and change the number of items displayed per page.

Output:

Benefits of a Reusable Pagination Component

Consistency: Once the component is defined, it can be reused across multiple pages, ensuring a consistent pagination experience throughout the application.
Customization: The component can be easily customized to fit different use cases by modifying parameters such as page size, styling, or behavior.
Maintenance: Any changes to the pagination logic or design need to be made only once within the component, reducing maintenance overhead.
Complete Source Code: https://github.com/rijwanansari/DynamicPagination

Bottom Line

The component-based architecture of Blazor allows developers to create modular, reusable components that can significantly streamline the development process. You can improve the user experience of your application and make your code more maintainable by creating a reusable dynamic pagination component. This approach allows you to focus on delivering value to your users, ensuring that your Blazor application is both efficient and easy to scale.

The principles outlined here will help you create flexible, reusable components that can adapt to different scenarios, whether you’re working on a small project or a large enterprise application. Stay tuned for the next article, where we’ll explore building a server-side pagination component.

Empowering Developers: AI as a Valuable Tool, Not a Substitute

Rijwan Ansari — Sat, 03 Feb 2024 07:20:06 +0000

In the ever-changing world of software development, using Artificial Intelligence (AI) doesn’t mean replacing developers; it’s about giving them more power. Think of AI as a handy tool that makes developers more efficient, helps them work better, and boosts their skills. This new way of thinking is crucial for handling the challenges of different projects. It ensures that developers stay leaders in coming up with new ideas and solving tricky problems, all while working alongside AI to create innovative solutions. It’s like having a smart assistant that makes the whole development process smoother and more effective.

Problem Statement

As the lead of development, juggling numerous projects with diverse scopes, proposals, solutions, and technical specifications poses a significant challenge. The documentation, including Software Requirement Specifications (SRS), proposals, and terms, is scattered across various projects, spanning multiple years. Remembering specific details for each project, even with ongoing support and enhancements, can be discouraging, potentially leading to mismatches and inefficiencies.

> Going through lots of SRS, proposals, and terms from various years is a real hassle. It takes up a lot of time to sift through these documents and find the information I need.

Simple Solution: An Intelligent BOT using Azure OpenAI and Azure Cognitive Search

We can build an intelligent bot using our own data with Azure OpenAI and Cognitive search, as shown in the below diagram.

To address and simplify this complexity, I’ve introduced an intelligent Chat Bot. It effortlessly integrates with our Azure Storage Account, the centralized hub for all SRS and proposal files. By harnessing the capabilities of Azure OpenAI through Azure Cognitive Search, the Chat Bot revolutionizes our approach to interacting with project details.

On other words, we can bring our own data to smart BOT like ChatGPT.

Upload your data in Azure Blob Storage (files: SRS, Proposals etc.)
Go to Playground Chat from Azure OpenAI Studio (or Azure AI Studio preview)
Choose the option Add your Data and provide data source of Azure Blob Storage with Azure Cognitive Search.
It will take some time to train the model based on the data volume.
That’s all, now we can do queries with your BOT. You will be amazed by the responses.
We can simply deploy to Azure Web App or Power Virtual Agent BOT

Furthermore, we can bring or integrate with any applications like MS Teams, Web, and other platforms with an option to view code.

This AI BOT servers as a powerful tool with following advantages.

Effortless Retrieval: Quickly recalls any Software Requirement Specification (SRS) or proposal, providing an overview on demand, saving significant time.
Summarization Magic: Summarizes complex documents effectively, making the content more digestible and easily understandable.
Requirements Validation: Assists in validating project requirements, ensuring clarity and accuracy.
Use Case Query: Responds to and validates use cases, helping maintain a clear understanding of project needs.
Client Request Validation: Validates client requests against SRS, ensuring alignment with the documented project scope.
Bug and Change Request Validation: Efficiently validates bugs and change requests, contributing to a smoother development process.
Generate Test Scripts
Client Query Response: Provides prompt responses to client queries, enhancing communication and client satisfaction.
Solution Design and Technology Overview: Offers insights into solution design and employed technologies, facilitating a comprehensive understanding.
**Timeline and Proposal Details Inquiry: **Assists in inquiries related to project timelines and proposal details, contributing to better project management.
and many more to uncover

We can further enhance the BOT by including documents related to project management, UAT, Test Scripts, Technical and user guide.

In summary, AI is one of the most powerful tool to boost our efficiency and productivity, specially in the fast-paced world of software development. This means seeing AI as a valuable assistant that makes developers more efficient, simplifies complex processes, writing program and enhances their skills.

How To Upload and Delete files in Azure Blob Storage Using Blazor Apps With .NET 7

Rijwan Ansari — Fri, 03 Mar 2023 09:31:48 +0000

One of the main components of the Digital transformation journey is storing and managing files and documents securely. Most of the applications require some features related to file upload and managing. We generally look for secure, durable, scalable, and high availability. Moreover, storing documents requires high storage space and a highly secure platform.

Uploading files or attachments is one of the common requirements for any application. Azure storage is one of the most efficient cloud storage with all the necessary features, securities, and compliance.

Azure Storage, a platform owned by Microsoft, is a contemporary cloud storage solution for almost every case scenario that is highly secure, scalable, durable, and easy to manage.

In this article, we will learn about Azure Storage and its data services. Additionally, we will create an azure storage data service with an example of Azure Blobs. Furthermore, we will upload, delete, and view files to Azure Blobs with Blazor application in .NET 7. The outline of this article are follows:

What is Azure Storage
What are the Azure Storage data services?
How to create an Azure Storage Account?
.NET Generally available
What is a Blazor Web App?
Create a Blazor Web App with .NET 7
Upload, delete and view files in Azure Blobs using a Blazor App in .NET 7 You can find a complete Solution on GitHub, Click Here. https://github.com/rijwanansari/RijsatFileUploadAzureStorage

Azure Storage

Azure Storage is a modern cloud storage solution owned by Microsoft, for almost every data storage scenario that is highly secure, scalable, durable, and easy to manage. It is well managed for hardware, updates, critical issues, high availability and is accessible from any part of the globe. Furthermore, the Azure UI is user-friendly, and we can create the services/objects effortlessly with all the configuration features. Additionally, Azure Storage provides all the necessary client libraries/SDK in .NET, Python, JavaScript, Java C++, PHP, Node.js, Ruby, Go, therefore developers can simply implement in their applications using the programming language of their choice. We can even access the storage objects via HTTP, HTTPS or REST API. Azure CLI or Azure PowerShell can be used by IT professionals to create scripts for those services and configuration tasks.

Let’s discuss Azure Storage Data Services.

Azure Storage Data Services

Azure storage consists of 5 data services, as portrayed in the above diagram.

Azure Blob Storage

Azure Blob Storage is a type of Azure Storage for storing massively scalable objects that are, particularly unstructured data such as text or binary data. It is used to store and access those unstructured data at a massive scale of block blobs. You can access the blob files via any applications using client libraries for multiple programming languages like .NET, Python, Java, Node.js, Ruby and PHP. Furthermore, we can use HTTP service access globally with secure access.

Scenarios to Use Azure Blob Storage

Storing files and document form various applications
Storing large file
Streaming video and audio files
Accessing files and images from browser
Storing file for backup, archiving, disaster recovery
Access file from anywhere globally via HTTP service
Distributed access to files and documents
Secure Access

Azure Files

Azure Files Service provides a fully managed serverless file sharing option in the cloud via the industry-standard SMB and NFS protocols. Azure files enables us to build a truly hybrid file sharing environment from anywhere by mounting it concurrently from on premises and cloud.

To know more details: https://azure.microsoft.com/en-us/products/storage/files/

Azure Tables

This storage table is used for storing large amount of non-relational structured or semi-structured data, i.e. NoSQL key-value for speedy development. This is highly efficient for the applications that require flexible data schema and massive data in the cloud.

https://learn.microsoft.com/en-us/azure/storage/tables/table-storage-overview

Azure Queues

This storage service is used for storing and queuing a large number of messages that can be accessed from any part of the globe via authenticated HTTP service calls. The Azure Queue storage provides messaging among the applications in the cloud and can be used in any programming language.

https://learn.microsoft.com/en-us/azure/storage/queues/storage-queues-introduction

Know more about other storage services in more detail.

https://learn.microsoft.com/en-us/azure/storage/common/storage-introduction

In this write-up, we will learn to use azure storage to upload, view and delete files using Blazor Web Apps. We will upload and view files in Azure Storage using Blazor web app with .NET 7.

Let’s commence 😊.

Prerequisites

Visual Studio 2022
.NET 7
Azure Subscription (You can create trial subscription)
C# Knowledge
We will use Blazer Server with .NET 7 and Azure Blob Storage.

Create Azure Storage Account

Azure storage account provides a unique namespace in the cloud for our azure storage that contains all the azure data storage components including Blob storage, Azure Files, Azure Tables, Azure Queues, and disks and can be accessible through authenticate HTTP(S) calls.

https://learn.microsoft.com/en-us/azure/storage/common/storage-account-overview

We will login to the Azure portal and search for a Storage Account.

Click Create for Storage Account.

We provide basic inputs for the storage account.

Choose your Subscription, Resource Group, Storage Account Name, Performance and Redundancy.

You can choose the nearest region from your location. Furthermore, we will determine the premium performance block blobs, file shares, or page blobs for the storage account.

Importantly, the data of the storage account is always duplicated to safeguard high availability and durability. We can decide redundancy of our choice.

For this article, I will go with low-cost option – Locally-redundant storage LRS.

Next, we will complete the advance options as portrayed.

Security Section

Data Lake Storage Gen2

Blog Storage and Azure Files

Next, we will move to the networking section.

Similarly, we will provide the data projection settings.

Encryption section

Add your tags, review, and then create the storage account.

It will take a few seconds to create the storage account.

Finally, the storage account is created as shown below.

Add Container

We will a container for uploading our files.

Now we are ready to use this container of this Azure Storage account in Blazor Application. However, we need access keys or connection strings to upload files, which can be Azure Blade Access Keys as shown below.

.NET 7 SDK

We can use any version of Visual Studio 2022, and we can download from this link. You can use the community version, which is free. Additionally, you can download .NET 7 SDK for free from this official site. In my case, I am using Visual Studio 2022 Professional, however, the steps and interfaces are the same for other versions.

Let’s commence.

We will start with the installation .NET 7 SDK for Windows.

Create a Web App with Blazor Server

Blazor server runs as an implementation of server side as a part of ASP.NET core app where UI events, button clicks, UI updates and interactions are communicated over SignalR connection. In this approach, the UI is generated on a web server and is transmitted to the visitor’s browser upon request. This two-way interaction occurs using SignalR and a web sockets connection. Any change in DOM content is generated from web server and update in automatically via SignalR with Blazor Server framework. This Blazor type has direct access to server and network resources since app is executed in server side. Let’s open a Visual Studio and create a new project. We will use the Blazor Server App project template.

To know more about Blazor Web Development, click here.

To learn to develop a Blazor Application, click here.

We will provide a project name and location for the solution.

On the next screen, we will get options to choose .Net framework, Authentication type and a couple options for the project.

After installation of .NET 7 SDK, we will have an option to choose .NET 7 in the framework. We will select the .NET 7 framework and proceed. To keep it simple, we will keep other options default.

We have successfully created a Blazor server web application with .NET 7. We will build and run the solution.

This is how we can create a Blazor server app.

Upload and Delete Files in Azure Blob Storage Using Blazor App with .NET 7

In this section, I will write a complete project to upload and delete files in Azure Blob Storage using Blazor app in the above solution.

Firstly, we will a NuGet package named Azure.Storage.Blobs as shown below.

We will begin by creating a service class for Azure Blob Storage under a folder name Services. We will add an IBlobStorageService named interface class as shown.

Define an upload and delete method of the file as shown below.

Code for IBlobStorageService.cs

namespace RijsatFileUploadAzureStorage.Services;
public interface IBlobStorageService
{
    Task<string> UploadFileToBlobAsync(string strFileName, string contecntType, Stream fileStream);
    Task<bool> DeleteFileToBlobAsync(string strFileName);
}

Again, add a BlobStorageService named implementation class for the above interface under the same services folder.

The structure will be as shown below.

Add a constructor and inject application Configuration.

Code

private readonly IConfiguration _configuration;
private readonly ILogger<BlobStorageService> _logger;
public BlobStorageService(IConfiguration configuration, ILogger<BlobStorageService> logger)
{
        _configuration = configuration;   
        _logger = logger;
}

We will add the connection sting of Storage account into appsetting.json as shown below:

Likewise, we use this connection string in our BlobStorageService service class.

We will also define our container for this blob storage. Our container name is rijsatdemo which we created during the storage account.

Function for File Upload

Please the references as shown.

Code for Upload Function

public async Task<string> UploadFileToBlobAsync(string strFileName, string contecntType, Stream fileStream)
    {
        try
        {
            var container = new BlobContainerClient(blobStorageconnection, blobContainerName);
            var createResponse = await container.CreateIfNotExistsAsync();
            if (createResponse != null && createResponse.GetRawResponse().Status == 201)
                await container.SetAccessPolicyAsync(Azure.Storage.Blobs.Models.PublicAccessType.Blob);
            var blob = container.GetBlobClient(strFileName);
            await blob.DeleteIfExistsAsync(DeleteSnapshotsOption.IncludeSnapshots);
            await blob.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = contecntType });
            var urlString = blob.Uri.ToString();
            return urlString;
        }
        catch (Exception ex)
        {
            _logger?.LogError(ex.ToString());
            throw;
        }
    }

Similarly, the code for deleting file method.

public async Task<bool> DeleteFileToBlobAsync(string strFileName)
    {
        try
        {
            var container = new BlobContainerClient(blobStorageconnection, blobContainerName);
            var createResponse = await container.CreateIfNotExistsAsync();
            if (createResponse != null && createResponse.GetRawResponse().Status == 201)
                await container.SetAccessPolicyAsync(Azure.Storage.Blobs.Models.PublicAccessType.Blob);
            var blob = container.GetBlobClient(strFileName);
            await blob.DeleteIfExistsAsync(DeleteSnapshotsOption.IncludeSnapshots);
            return true;
        }
        catch (Exception ex )
        {
            _logger?.LogError(ex.ToString());
            throw;
        }
    }

Overall, the BlobStorageService class be as shown below.

using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Models;
using Microsoft.Extensions.Logging;
using System.Reflection.Metadata.Ecma335;

namespace RijsatFileUploadAzureStorage.Services;
public class BlobStorageService : IBlobStorageService
{
    private readonly IConfiguration _configuration;
    private readonly ILogger<BlobStorageService> _logger;
    string blobStorageconnection = string.Empty;
    private string blobContainerName = "rijsatdemo";
    public BlobStorageService(IConfiguration configuration, ILogger<BlobStorageService> logger)
    {
        _configuration = configuration;   
        _logger = logger;
        blobStorageconnection = _configuration.GetConnectionString("AzureStorageAccount");
    }
    public async Task<string> UploadFileToBlobAsync(string strFileName, string contecntType, Stream fileStream)
    {
        try
        {
            var container = new BlobContainerClient(blobStorageconnection, blobContainerName);
            var createResponse = await container.CreateIfNotExistsAsync();
            if (createResponse != null && createResponse.GetRawResponse().Status == 201)
                await container.SetAccessPolicyAsync(Azure.Storage.Blobs.Models.PublicAccessType.Blob);
            var blob = container.GetBlobClient(strFileName);
            await blob.DeleteIfExistsAsync(DeleteSnapshotsOption.IncludeSnapshots);
            await blob.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = contecntType });
            var urlString = blob.Uri.ToString();
            return urlString;
        }
        catch (Exception ex)
        {
            _logger?.LogError(ex.ToString());
            throw;
        }
    }
    public async Task<bool> DeleteFileToBlobAsync(string strFileName)
    {
        try
        {
            var container = new BlobContainerClient(blobStorageconnection, blobContainerName);
            var createResponse = await container.CreateIfNotExistsAsync();
            if (createResponse != null && createResponse.GetRawResponse().Status == 201)
                await container.SetAccessPolicyAsync(Azure.Storage.Blobs.Models.PublicAccessType.Blob);
            var blob = container.GetBlobClient(strFileName);
            await blob.DeleteIfExistsAsync(DeleteSnapshotsOption.IncludeSnapshots);
            return true;
        }
        catch (Exception ex )
        {
            _logger?.LogError(ex.ToString());
            throw;
        }
    }
}

We will add a dependency injection service to the container in the program.cs file.

builder.Services.AddScoped<IBlobStorageService, BlobStorageService>();

Add a view model or Data transfer object of file upload into services folder as shown.

Code for the FileUploadViewModel.cs

namespace RijsatFileUploadAzureStorage.Services.Dto
{
    public class FileUploadViewModel
    {
        public string FileName { get; set; }
        public string FileStorageUrl { get; set; }
        public string ContentType { get; set; }
    }
}

Now we will move to the Blazor Component for the uploading section in the Index.razor component file.

Add a file upload section into Index component. Replace Index with below code.

<h4>File Upload (Azure Blob Storage)</h4>
<div class="row">
    <div class="col-sm-6">
        <label>
            <InputFile class="form-control" disabled="@fileLoading" OnChange="@OnInputFileChange" single />
        </label>
        @if (fileLoading)
        {
            <i class="fa fa-refresh"></i> <span>Loading...</span>
        }
    </div>
    <div class="col-sm-2">
        <button type="button" disabled="@fileLoading" class="btn btn-primary" @onclick="OnUploadSubmit">
            Upload File
        </button>
    </div>
</div>

Then, I will add a table to show the list of uploaded files.

<div class="row">
    @if (fileUploadViewModels.Count > 0)
    {
        <table class="table table-responsive table-bordered">
            <thead class="text-primary">
                <tr>
                    <th>File</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var attachment in fileUploadViewModels)
                {

                    <tr>
                        <td>
                            <a class="text-primary"><i class="fa-solid fa-paperclip"></i> @attachment.FileName</a>
                        </td>                      

                            <td>
                            <span class="oi oi-delete" aria-hidden="true" @onclick="() => OnFileDeleteClick(attachment)"></span>
                            </td>
                    </tr>
                }
            </tbody>
        </table>
    }
    else
    {
        <div class="alert alert-info">
            <strong>No Files!</strong>
        </div>
    }
</div>

We will add the code part for uploading and deleting in index.razor component.

@code {
    private string warninngMessage = "";
    private string displayMessage = "";
    private List<IBrowserFile> loadedFiles = new();
    private long maxFileSize = 1024 * 15;
    private int maxAllowedFiles = 3;
    private bool fileLoading;
    string Message = "No file(s) selected";
    IReadOnlyList<IBrowserFile> selectedFiles;
    private List<FileUploadViewModel> fileUploadViewModels = new();
    private void OnInputFileChange(InputFileChangeEventArgs e)
    {
        selectedFiles = e.GetMultipleFiles();
        Message = $"{selectedFiles.Count} file(s) selected";
        this.StateHasChanged();
    }
    private async void OnUploadSubmit()
    {
        fileLoading = true;
        foreach (var file in selectedFiles)
        {
            try
            {
                var trustedFileNameForFileStorage = file.Name;
                var blobUrl = await blobStorageService.UploadFileToBlobAsync(trustedFileNameForFileStorage, file.ContentType, file.OpenReadStream(20971520));
                if (blobUrl != null)
                {
                    FileUploadViewModel fileUploadViewModel = new FileUploadViewModel()
                        {
                            FileName = trustedFileNameForFileStorage,
                            FileStorageUrl = blobUrl,
                            ContentType = file.ContentType,
                        };

                    fileUploadViewModels.Add(fileUploadViewModel);
                    displayMessage = trustedFileNameForFileStorage + " Uploaded!!";
                }
                else
                    warninngMessage = "File Upload failed, Please try again!!";

            }
            catch (Exception ex)
            {
                warninngMessage = "File Upload failed, Please try again!!";
            }
        }

        fileLoading = false;
        this.StateHasChanged();
    }

    private async void OnFileDeleteClick(FileUploadViewModel attachment)
    {
        try
        {
            var deleteResponse = await blobStorageService.DeleteFileToBlobAsync(attachment.FileName);
            if (deleteResponse)
            {
                fileUploadViewModels.Remove(attachment);
                displayMessage = attachment.FileName + " Deleted!!";
            }

        }
        catch (Exception)
        {
            warninngMessage = "Something went wrong! Please try again.";
        }
        this.StateHasChanged();
    }

}

In the above code, we have OnUploadSubmit() and OnFileDeleteClick().

Complete Index.razor component code.

@page "/"
@using RijsatFileUploadAzureStorage.Services;
@using RijsatFileUploadAzureStorage.Services.Dto;
@inject IBlobStorageService blobStorageService

<PageTitle>Index</PageTitle>
@if (warninngMessage.Length > 0)
{
    <div class="alert alert-warning">
        <strong>Warning!</strong> @warninngMessage.
    </div>
}

<h4>File Upload (Azure Blob Storage)</h4>
<div class="row">
    <div class="col-sm-6">
        <label>
            <InputFile class="form-control" disabled="@fileLoading" OnChange="@OnInputFileChange" single />
        </label>
        @if (fileLoading)
        {
            <i class="fa fa-refresh"></i> <span>Loading...</span>
        }
    </div>
    <div class="col-sm-2">
        <button type="button" disabled="@fileLoading" class="btn btn-primary" @onclick="OnUploadSubmit">
            Upload File
        </button>
    </div>
</div>
@if (displayMessage.Length > 0)
{
    <div class="alert alert-success">
        <strong>Success!</strong> @displayMessage.
    </div>
}
<br />
<div class="row">
    @if (fileUploadViewModels.Count > 0)
    {
        <table class="table table-responsive table-bordered">
            <thead class="text-primary">
                <tr>
                    <th>File</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var attachment in fileUploadViewModels)
                {

                    <tr>
                        <td>
                            <a class="text-primary"><i class="fa-solid fa-paperclip"></i> @attachment.FileName</a>
                        </td>                      

                            <td>
                            <span class="oi oi-delete" aria-hidden="true" @onclick="() => OnFileDeleteClick(attachment)"></span>
                            </td>
                    </tr>
                }
            </tbody>
        </table>
    }
    else
    {
        <div class="alert alert-info">
            <strong>No Files!</strong>
        </div>
    }
</div>

@code {
    private string warninngMessage = "";
    private string displayMessage = "";
    private List<IBrowserFile> loadedFiles = new();
    private long maxFileSize = 1024 * 15;
    private int maxAllowedFiles = 3;
    private bool fileLoading;
    string Message = "No file(s) selected";
    IReadOnlyList<IBrowserFile> selectedFiles;
    private List<FileUploadViewModel> fileUploadViewModels = new();
    private void OnInputFileChange(InputFileChangeEventArgs e)
    {
        selectedFiles = e.GetMultipleFiles();
        Message = $"{selectedFiles.Count} file(s) selected";
        this.StateHasChanged();
    }
    private async void OnUploadSubmit()
    {
        fileLoading = true;
        foreach (var file in selectedFiles)
        {
            try
            {
                var trustedFileNameForFileStorage = file.Name;
                var blobUrl = await blobStorageService.UploadFileToBlobAsync(trustedFileNameForFileStorage, file.ContentType, file.OpenReadStream(20971520));
                if (blobUrl != null)
                {
                    FileUploadViewModel fileUploadViewModel = new FileUploadViewModel()
                        {
                            FileName = trustedFileNameForFileStorage,
                            FileStorageUrl = blobUrl,
                            ContentType = file.ContentType,
                        };

                    fileUploadViewModels.Add(fileUploadViewModel);
                    displayMessage = trustedFileNameForFileStorage + " Uploaded!!";
                }
                else
                    warninngMessage = "File Upload failed, Please try again!!";

            }
            catch (Exception ex)
            {
                warninngMessage = "File Upload failed, Please try again!!";
            }
        }

        fileLoading = false;
        this.StateHasChanged();
    }

    private async void OnFileDeleteClick(FileUploadViewModel attachment)
    {
        try
        {
            var deleteResponse = await blobStorageService.DeleteFileToBlobAsync(attachment.FileName);
            if (deleteResponse)
            {
                fileUploadViewModels.Remove(attachment);
                displayMessage = attachment.FileName + " Deleted!!";
            }

        }
        catch (Exception)
        {
            warninngMessage = "Something went wrong! Please try again.";
        }
        this.StateHasChanged();
    }

}

Let’s build and run the solution.

Uploading File into the Azure Blob Storage.

Let me show the uploaded file into Azure Blob from Azure Portal.

Go to the container and open it (rijsatdemo).

We can see the file in the Azure Blob container. We have successfully uploaded the file into Azure Blob Storage using the Blazor Server with .NET 7.

Likewise, we can delete the file using above the code as demonstrated.

This is how we can upload and delete files in Azure Blob Storage from a Blazor App with .NET 7.

You can find a complete Solution on GitHub, Click Here.

Conclusion

In this article, I have done a complete solution to upload and delete files in Azure Blob Storage from Blazor Application with .NET 7. Furthermore, I have demonstrated how to create an Azure Storage Account and a container for uploading files and documents. Then again, I have built a Blazor Server web application with .NET 7. At last, I did a complete solution to upload and delete files in Azure Blob Storage with code and showed an example.
Reference:
https://rijsat.com/2023/01/11/upload-and-delete-files-in-azure-blob-storage-using-blazor-apps-with-net-7/

How to Build A Web App With Blazor In .NET 7

Rijwan Ansari — Wed, 23 Nov 2022 06:16:13 +0000

There are a wide range of platforms and technologies for web development, which creates uncertainty to find the best one based on the developer skills setup. Considering the latest web apps development trends, we split the development into two segments: Front-End and Back-End development. Based on the above two development parts, web apps development requires 2 major roles for developers, and those are Front-End and Back-End developers. Subsequently, the web apps development necessitates various skills on both the front-end and backend side to build a complete system. Furthermore, there are several front-end frameworks, popularly, Angular, Reack.Js, Vue.js, JavaScript which again requires different skill sets and developers. However, the most popular choice for backend development, server-side logic is C# and .NET. This creates a complex scenario to build Web UI with front-end technologies and then again server-side logic with back-end technologies.
However, Blazor framework is one of the web development platforms for the .Net family that provides the flexibility to develop both backend and front using the same language, C#. It is a component-driven UI framework that takes advantage of shared business objects and code for building applications in both front-end and back-end.

In this article, we will develop a web app with Blazor in .NET 7. Furthermore, we will check both Blazor Server and Blazor WebAssembly with default project structure.

What is Blazor?
.NET 7 Generally Available
What is Blazor Server?
What is Blazer WebAssembly?
Build a web app with Blazor Server with .NET 7
Build a web app with Blazor WebAssembly with .NET 7

If you want to know more about web development with Blazor, please check my previous article Web Development with Blazor.

What is Blazor?

Blazor is one of the frameworks for the .Net family for web development. Specifically, it is a user-interface framework for .Net applications, which utilizes the same C# language from front-end development. Additionally, it is a component-driven UI framework that provides flexibility to use shared business objects and code for front-end and backend development. Therefore, it enables the .Net developer with the same C# skill to build complete applications. Because of which, this Blazor framework makes the .Net ecosystem more sustainable and efficient.
In simple team, Blazor is a new client-side framework to ASP.NET for developing UI for web using C# instead of JavaScript, which allows running in the browser using web Assemble. It is a combination of the words Browser and Razor, i.e., Blazor.
Let’s commence with building a web application with Blazor server and WebAssembly with .NET 7.

.NET 7

I am happy to say that .NET 7 is generally available. It is officially released on 8 November 2022. Newly released .NET 7 comes with huge improvement in performance and several new features. We can download .NET 7 for free from this authorized site for windows, macOS and Linux. .NET 7 is so flexible and versatile that we can develop any kind of application on any platform.

Prerequisites

Before jumping into Blazor applications, we need the following perquisites.

Visual Studio 2022 (or Visual Studio Code)
.NET 7 SDK
C# knowledge We can use any version of Visual Studio 2022, and we can download from this link. You can use the community version, which is free. Additionally, you can download .NET 7 SDK for free from this official site. In my case, I am using Visual Studio 2022 Professional, however, the steps and interfaces are the same for other versions.

Let’s commence.

We will start with the installation .NET 7 SDK for Windows.

Blazor Server

Build a Web App with Blazor Server

In this section, we will create a web application with Blazor Server template step by step.

We will open Visual Studio and create a new project as shown:

To develop Blazor server application, we will choose Blazor server app template and proceed to next. We will give a project name and location.

In the next screen, we will get an option to choose .Net framework, Authentication type and a couple options for the project.

After installation of .NET 7 SDK, we will have an option to choose .NET 7 in the framework. We will select .NET 7 framework and proceed. To keep it simple, we will keep other options default.

We have successfully created a Blazor server web application, and the project structure as shown.

Furthermore, if we check FetchData.rozor page/component, we can call the services, business logic classes directly from Blazor page and use application models.

This is how we can use server-side code in Blazor server. We have full access to the server side from the Blazor page and can interact with data or databases.

Let’s build and run the solution.

Now I will add a logic in the counter component.

We will build and run the solution again.

This is how we can develop a Blazor server app.

Now let’s move to Blazor WebAssembly.

Build a Web App with Blazor WebAssembly

Blazor WebAssembly, on the other hand, runs on the user’s browser as a client application by loading application dependencies, and .NET runtime to the browser. In this approach, we can publish the Blazor applications as static files without the requirement of a web server or its interactions, since WebAssembly is a technology that executes entirely in the client browser. Although we can do advanced logic in client side using C# in the browser, however, to interact with data, database or other services, this type uses standard web technologies HTTP services.

Again, we will open Visual Studio and create a new project. Then, this time, we will choose the Blazor WebAssembly App project template as portrayed.

Again, we will give a name and location of the Project.

In the next screen, we will choose .NET framework 7, authentication type as none for this article, and there are some more options as illustrated.

Let’s discuss those options.

ASP.NET Core Hosted – this option will create a project and asp.net core hosted environment for Blazor WebAssembly project. Which means, we can deploy and host the application as like asp.net core.

Progressive Web Application – This option produces a Progressive Web Assembly supporting installation, and offline use.

For this article, we will choose ASP.NET core hosted and proceed.

We have successfully created a Blazor WebAssembly project in .NET 7. In this project template, we have 3 projects by default.

Client Project – This project contains the Blazor components, client-side logics with C#. However, we don’t write any services or server-side logic in this project. We do interaction with data or databases via HTTP services.

Server Project – This is like a general asp.net web API project. Here, we do server-side logic, build APIs for the client application. We create services, Database interaction, infra and networks and so on. We can follow any solution design and pattern based on our needs.

Shared Project – This project adds advantages to the Blazor client project. We use this project to write shared models, objects, or data transfer objects. We can reuse those components for both server and client projects.

Let’s check the Client project.

If we observe then, this project is using a shared model and getting data through http call. However, we can write client-side logic with C#.

Then again, if we check the server project, which is more like a normal web API. However, the reference of Client project is added.

The client project is referenced here because this will be hosted in IIS. During the project creation, we choose the option ASP.NET core hosted. Simply, we can deploy this project to have both client and server.

Now, we will build and run the solution.

This is how we can develop a Blazor WebAssembly application.

Conclusion

In this write-up, we learned about Blazor web development. Furthermore, I have elucidated about Blazor development options for various scenarios with examples. Based on hosting decisions, we can choose Blazor server or Blazor WebAssembly to deploy as an ASP.NET core or as a WASM. Additionally, I have illustrated how to build a web application with both Blazor server and Blazor WebAssembly. This article will also assist you to know the difference between Blazor server and WebAssembly and their project structures.

References:

Develop A Web App with Blazor (rijsat.com)
Microsoft Learn

What is Blazor Web Development?

Rijwan Ansari — Tue, 08 Nov 2022 08:43:19 +0000

The complexity of web development is increasing in the contemporary world because of several technologies and tools. There are a wide range of platforms and technologies for web development, which creates uncertainty to find the best one based on the developer skills setup. Considering the latest web apps development trends, we split the development into two segments: Front-End and Back-End development. Based on the above two development parts, web apps development requires 2 major roles for developers, and those are Front-End and Back-End developers. Subsequently, the web apps development necessitates various skills on both the front-end and backend side to build a complete system. Furthermore, there are several front-end frameworks, popularly, Angular, Reack.Js, Vue.js, JavaScript which again requires different skill sets and developers. However, the most popular choice for backend development, server-side logic is C# and .NET. This creates a complex scenario to build Web UI with front-end technologies and then again server-side logic with back-end technologies.

However, Blazor framework is one of the web development platforms for the .Net family that provides the flexibility to develop both backend and front using the same language, C#. It is a component-driven UI framework that takes advantage of shared business objects and code for building applications in both front-end and back-end.

In this article, we will learn about Blazor framework, how it works with .NET code, development options, structure, and example scenarios. Outlines of this article are given below.

What is Blazor?
What is Razor?
Blazor’s development options
Blazor Server and Blazor Web Assembly
When to use Blazor
Blazor Server vs Blazor WebAssembly
Decision Criteria for Blazor App

What is Blazor?

In simple team, Blazor is a new client-side framework to ASP.NET for developing UI for web using C# instead of JavaScript, which allows running in the browser using web Assemble. It is a combination of the words Browser and Razor, i.e., Blazor.

What is Razor?

Razor is a programming format for ASP.NET that unites HTML with C# or VB.NET for UI. It is a server-based code that creates dynamic web content. Razor pages generally have a .cshtml file extension.

Blazor Development Options

We have options for developing applications with Blazor: Blazor Server and Blazor WebAssembly. Based on the selection, we can run the Blazor applications on a server as a part of an ASP.NET or can be published to run in the browser on a client’s machine like a single page application.

Blazor Server and Blazor WebAssembly

Based on the hosting of Razor components, Blazor applications can be developed in two: Blazor Server and WebAssembly.

Blazor WebAssembly, on the other hand, runs on the user’s browser as a client application by loading application dependencies, and .NET runtime to the browser. In this approach, we can publish the Blazor applications as like static files without the requirement of a web server or its interactions, since WebAssembly is a technology that executes entirely in the client browser. Although we can do advanced logic in client side using C# in the browser, however, to interact with data, database or other services, this type uses standard web technologies HTTP services.

Blazor WebAssembly Vs Blazor Server and Decision of choice

Blazor is a UI framework for web applications in .NET ecosystem which gives capabilities to use .NET skill or C# to build front-end. However, we need to consider various factors when to use Blazor server and Blazor WebAssembly. Let us discuss some criteria to Blazor server or Blazor WebAssembly.

While creating the project in Visual Studio, we can see both templates, so let check.

As per above, Blazor Server App template operates on server-side inside an ASP.NET Core app and handles user interactions over a SignalR connection. This template can be used for web apps with rich dynamic user components.

Blazor WebAssembly App template, on the other hand, runs on WebAssembly and is optionally hosted as ASP.NET core app. This template can be used for web apps with rich dynamic user components.

Both options are great for .NET developers who are familiar with C# and will be beneficial. However, if you are experts with front-end frameworks like JavaScript, Angular or ReactJs, shifting to Blazor may not be the best option.
Blazor server runs on a web server, so if your existing web servers are running on ASP.NET core, then go for Blazor Server. Blazor WebAssembly can be deployed as static files without the need for server-side rendering.
Blazor server has direct access to network and server, however, Blazor WebAssembly occasionally communicates with server if required.
Blazor server loads the UI only when it is connected with server via signalR. Blazor WebAssembly runs in the client browser once it is loaded. Once it is loaded, then the app can run offline as a Progressive web App.
Blazor server, for complex scenarios, can benefit from distributed applications operating in a data center. Blazor WebAssembly can benefit with client’s native processor speeds.
Blazor server web app is recommended if there is a need for network security, server configuration and access control for geographical locations. We can secure the communication between browser and server with TSL and some authentication frameworks.

Conclusion

Blazor is a UI framework in .NET environment that adds advantages to developers to use their existing .NET skill for front-end development. In this write-up, I have delved into the Blazor app and its benefits. Additionally, I have explained the development options and types of Blazor app templates. Based on the hosting requirements, we develop server side Blazor as like ASP.NET core or Blazor WebAssembly that run the client’s browser. I have, furthermore, explored both options and decision criteria based on various factors.

Blockchain Development with .NET

Rijwan Ansari — Mon, 07 Nov 2022 13:39:39 +0000

Join us Live for FREE to inspire, learn and deep dive into Blockchain technologies and its development with .NET.

Registration Link

This is a series of Webinars where we discuss, share and demonstrate about Blockchain development with .NET.
Blockchain is an emerging technology of this era. Without any doubt, blockchain is going to make several headlines, news, and research topics in the foreseeable future.

https://www.eventbrite.com/e/blockchain-development-with-net-tickets-462488665047

Blockchain is a technology for record-keeping and contract enforcement. It uses cryptography to make it extremely difficult to modify the previous history. Blockchain technology is referred to as distributed ledger, which is just like an accounting ledger that contains the history of transactions.

In this series of sessions, we will learn, discuss and deep dive into Blockchain technologies and its development with .NET platform. Furthermore, we develop Blockchain solutions and talk about the applications of it in broader term.
https://rijsat.com/2022/11/06/journey-blockchain-development-with-net/

Global AI Developer Days Philippines 2022

Rijwan Ansari — Sat, 22 Oct 2022 05:31:07 +0000

Join us 29 October for a FREE Online event to inspire, learn and deep dive into AI world and technologies.
The Global AI Developer Days in Manila, Philippines is a free online event on 29 October 2022 from 18:00 - 22:00 (MYT).
About this event
Global AI Developer Day Philippines 2022 Join us 29 October for a FREE Online event to inspire, learn and deep dive into AI world and technologies.

Registration

Link to join the event

In this event, we will be inviting experts and MVPs across the globe to present technical sessions on AI and Machine learning with workshops and demonstration.

Agenda:

6.00-6.15pm - Welcome, Introduction and Keynotes - By Rijwan Ansari & Satya Karki

6.15 - 7.00 pm : Building responsible AI models in Azure Machine Learning - By Luis Beltran (Microsoft MVP)

7.00-7.45 pm : Intro to Machine Learning with ML.NET - By David Patrick (Microsoft MVP)

7.45 - 8.30 pm : AI-fy your app with Zero ML expertise - By Liji Thomas (Microsoft MVP)

8.30 - 9.15 pm : Introduction to SQL Server 2022 - By Javier Villegas (Microsoft MVP)

9.15 - 9.30 pm - QA Discussion and Closing Notes - By Rijwan Ansari and Satya Karki

The Global AI Developer Days is a free event organized across the world by local communities that are passionate about artificial intelligence on Microsoft Azure. The event is a perfect balance of quality content, awesome talks, and hands-on learning with like-minded peers in your community.

Stay tuned for more details.

Link to Join the event

Clean Architecture: Introduction, Concepts and Principles

Rijwan Ansari — Mon, 22 Aug 2022 08:39:00 +0000

Software design and architecture, generally refer to the foundation, structure, and organization of the solution. While designing a sustainable solution, we should always consider maintainability at the top. Maintainability means the solution should be well architected with a strong base. The solution should follow the best principles and design practices.

In this article, I will explain what a clean architecture is and design a solution in .NET. Furthermore, I will give some insights into solution design principles.

Clean Architecture
Basic Principles behind Clean Architecture
Architectural Diagram
Layers of Clean Architecture
Designing and structuring a clean architecture Solution

Clean Architecture

Clean Architecture which is also known as Domain-Driven Design has evolved with considerable improvements in the last several years. Some architecture names used for clean architecture over the years are given below:

Hexagonal Architecture (https://en.wikipedia.org/wiki/Hexagonal_architecture_(software))
Onion Architecture
Domain-Driven Design (DDD) or Domain Centric Architecture
vertical Slice Architecture
Clean Architecture

The above mentioned architectures have similar design principles that have the primary idea to keep the core business logic and application domain at the center of the solution structure. In this architecture, we make core application business logic and domain or entities independent of the presentation layer and data access layer.

Therefore, the whole idea of this architecture is to allow the core part, which consists of complete business logic and application entities, adaptive and flexible enough to deal with changing technology and interfaces. Additionally, the core application remains the same and independent of presentation layers, infrastructures, and databases.

In these fast-paced technologies, JavaScript frameworks, web framework, database and external parts become absolute or upgraded, using this clean architecture you can replace these items with minimum efforts. This architecture saves huge time because the core application business logic and entity are independent of framework, presentations, databases, and external parts. Subsequently, the architecture is sustainable and is loosely coupled core business logic and entity with presentation layer or framework.

Basic Principles

The primary idea in Clean Architecture is to make the solution adaptive, keep the core business or application logic use cases independent of frontend and external frameworks. In summary, we can outline the following outcomes of clean architecture,

Independent of UI

Using clean architecture, we should be able to change UI or presentation layers easily without changing the application layer and so on. UI can be from any front-end framework, or console UI, any web, and can be replaced without changing the other layers or rest of the system.

Database Independent

The architecture should be flexible enough to swap the database without affecting the application use cases and entities. The solution can switch the dataset to MS SQL, MySQL, Oracle, MongoDB, or something else.

Independent of External agency/libraries/Drivers

The business rules should be independent of external parties or agencies.

Framework Independent

The core business or application rules should be independent of the existence of frameworks, libraries for the future. We can include the frameworks but as tools, and the solution should not be completely relied on those.

Testable

The architecture should comply with the testing of the core application and business cases and rules without the UI, database, Web server, or any external component.

Clean Architecture Diagram

Generally, the clean architecture is delved with primary circular illustration presented by Robot Martin (Uncle Bob).

By Robert C. Martin (Uncle Bob)

This diagram perfectly shows the high-level concepts behind clean architecture. We can interpret this diagram in two ways, circular or hemisphere, however, you can understand the core idea from both approaches.

From the diagram, we see that entities are the inner core, which is generally known as business domain entities. It is also called Enterprise Business Rules.

These business entities are covered by use cases, also called application business rules. These use cases are called from presenters, controllers or gateways as shown in the above diagram. Further external interfaces, DB, UI, or web which are commonly called as public shell or public surface or interface. All the frameworks and drivers are in the outermost layers. Additionally, we can observe that the flow comes from the public shell to inner entities.

If we understand from another side, the dependencies move from inner to outer, i.e., core to external or public surface. The core inner entities and use cases, also called business and application layers, have no dependencies and are less likely to change. Each layer of this circular diagram has dependencies on the layer next to it. The external layers are most likely to change based on technologies, frameworks and so on, consequently, the solution architecture has less impact on core applications’ logic.

Layers of Clean Architecture

In this section, I will elucidate the layers of clean architecture. We will again observe the layers from Uncle Bob’s illustration.

What Is Clean Architecture
By Robert C. Martin (Uncle Bob)

Entities

This is also known as enterprise business rules. It consists of plain domains. In this layer, we add objects (entity or domain) with no frameworks and annotations. We add general logics that are applied to every domain like validations, base entities, and so on. They are the least affected by external changes and no dependencies.

Use cases

This is a pure logic layer where we write core business or application logic. This is also called Application Business rules. We, in general, use the term service or manager for application use cases. This layer uses a domain layer and builds results. In this use case, we don’t know who triggers or how the result will be presented. However, based on services, we keep business logic independent of UI or database. We may use some libraries, however, only as tools.

Interface Adapters

This layer acts as a communicator to convert data into desired format for storing into external sources like database, file system, 3rd parties, and convert data for use cases or business logic. This layer is also called as adapters that necessarily do the conversion of data in both ways. We can consider MVC of GUI or REST APIs at this level that consists of presenters, views, and controllers. It also implements the interfaces of use cases required for external components.

External Interfaces, (Frameworks and Drivers)

This is the outermost layer in this clean architecture which changes frequently based on the technologies, updates like database, Web Front-end frameworks. In this layer, we present the data to the UI or database.

Solution Designing

Clean architecture is a set of organizing principles, that is the first essential thing we need to understand. We can design the solution in various ways based on the requirements or personal adjustments, however, the core principles must be kept intact and implemented correctly.

Sample Structure looks like as shown below:

Domain Class Library – No dependencies, no project or class reference, no logic

Application Class Library – Only Domain is added as reference project, Pure business logic or services.

Domain and Application are the core of this solution which are independent of Infrastructure, WebUI, and external libraries.

Infrastructure Class Library – Application Class is added as reference. This class is responsible for external infrastructure communications like database storage, file system, external systems/APIs/Services and so on.

We can add more class libraries under this folder for external plugins or SDK to organize the solution in a better way.

Web UI – This is a presentation web UI project. This can be an MVC, front-end framework. If we are designing an API based solution, then we can keep both Web API and Front-end in this folder host. We add Application and Infrastructure as reference in this project.

This is a way of organizing and designing a clean architecture solution. This is one way of structuring the solution following the clean architecture principles. However, we can do the organization in several ways, keeping the core values intact.

In this illustration above, we have kept core applications independent and other infrastructure and web UI are dependent on core applications.

In the next article, I will design a real solution demonstrating the clean architecture implementation in .NET 6, stay tuned.

Conclusion

In this write-up, I have described the clean architecture in-depth with core values. The primary idea behind this clean architecture is to design in such a way that it should be adaptive and flexible enough to handle the changing technologies, external components, and web frontend frameworks. To achieve so, clean architecture provides organizing principles where we keep the core entities and business logic independent of presentation layers, infrastructures, databases, and external agents. Furthermore, I have illustrated an architectural diagram of clean architecture and have delved into it with the core principles. Additionally, I have explained the layers of clean architecture and finally shared the solution design diagram with an example. The above article will give you holistic concepts of clean architecture.

References

By Rijsat's Rijwan Ansari
By Robert C. Martin (Uncle Bob)
By Avi Kessner

What is DevOps and Its key Principles

Rijwan Ansari — Mon, 15 Aug 2022 01:45:56 +0000

Background

Software development includes several processes like defining scopes, requirement specifications, and use cases, designing solution architect, converting use cases to tasks, writing code, testing and validations, managing releases, and deployments, and then maintenance. These tasks are repetitive and can be highly manual process which can significantly be prone to errors. The software development process comprises different teams from operations, development as well as business. Day by day, these processes are becoming more complex, which shows the need of proper tools and practices to handle it. Additionally, technology had drastically changed and evolved in last one decade, which again adds complexity in development process. Because of development, implementation and operational teams having different skill sets are involved together in software development process, and they can be out of sync, can lack proper visibility which can delay in the overall delivery and result in disappointing the business stakeholders.

To overcome the complex situations and manage efficiently, we have DevOps.

In this article, I will cover the following points:

What is DevOps
Background, why DevOps is required
DevOps culture and How DevOps comes
Development and Operation responsibilities
DevOps Principles and Practices

What is DevOps?

We appreciate Patrick Debois, father of DevOps, for outlining the importance of sharing within the DevOps culture. The term was formed by joining Development and Operations.

DevOps is not a technology, or a standard, it is commonly referred as culture, DevOps culture.

DevOps is a software development culture or practice that creates collaboration among development and operations to speed up the quality software delivery in efficient way.

According to Gartner (https://www.gartner.com/en/information-technology/glossary/devops)

DevOps represents a change in IT culture, focusing on rapid IT service delivery through the adoption of agile, lean practices in the context of a system-oriented approach. DevOps emphasizes people (and culture), and it seeks to improve collaboration between operations and development teams. DevOps implementations utilize technology — especially automation tools that can leverage an increasingly programmable and dynamic infrastructure from a life cycle perspective.

DevOps unifies the members of Development and Operation into one culture and enables proper sync up among them. DevOps includes core development, IT Operations, quality engineering and security to work together to produce reliable and better products faster. What is more, adopting this culture helps organization to respond better to customers, provides current and correct visibility, builds confidence to the product delivery, and know the future implications.

High level Development Responsibilities

Functional Requirements
Planning Development Task (use cases, user stories and Task)
Writing Code
Build Pipeline
Test Plan and QA
Code Quality and Management
High Level Operation Responsibilities

Non-Functional Requirements
Software Infrastructure (Server or web apps) Readiness
Deployment Task Planning
Deployment
Operations
Monitor
Release Pipeline

DevOps Principles and Practices

DevOps is all about cultural adoption and mindset change in an organization. DevOps teams establish some practices throughout the application lifecycle; however, we cannot limit the culture only to these principles. Most known principles and practices are under this philosophy:

Collaboration: The main aim of DevOps is to bridge the gap across function teams. Create a collaborative environment between development, IT operations and quality assurance. This is a cultural shift to build a unilateral team that has common objectives related with fast and quality deliveries. Additionally, DevOps create a proper sync up, accountability and ownership towards common goal among the team.

Automation: Automate the workflows and whatever possible. DevOps encourages automation of some manual and time-consuming processes related with testing, building, releasing, deployments etc. This principle suggests automating the build process, testing, releasing and deployment. Automation enables team to focus on core activities instead of doing manual jobs and quickly response to customer feedbacks. This is a primary action toward continuous integration and continuous delivery (CI/CD) or ability to deliver new version/release to clients in less time.

Incremental Release: It is also called as Iteration, where DevOps encourages delivering a project into small chunks throughout the project timeline. It is also encouraged to divide a project into small, testable, and deliverable chunks, so that it can follow the complete process like code merge, test, release and deploy before production one. This incremental release will reduce the error, bugs, and problematic cause before going to final release or production. Additionally, this will create sync up and proper understanding of solution. This Iterative method makes the development process more flexible and error free.

Continuous Improvement: Adopting to change is another concept for DevOps. We should be flexible to adopt changes in any aspect if those are related to improvement, optimization, cost effective, technology advancement and likewise. DevOps culture motivates to learn from failure and flexible to act based on circumstances. Change can be on software, customer needs, technology advancement, change to process, methodology and so on for improvement and those should be welcomed as continuous improvement.

Continuous Monitoring: DevOps teams need to keep the tack of delivered software and make sure to perform without any issue. Continuous monitoring includes system tacking, monitoring logs, performance, application environments, defects, and so on.

Some DevOps practices which are based on above principles are given below:

Agile Approach in Software Development
Continuous Integration and continuous delivery (CI/CD)
Managing code through Version control
Infrastructure as Code: flexible to deployment environments where we can create servers or applications for testing which are identical to production and destroy easily.
Configuration Management

Conclusion

In this article, I have discussed how the DevOps concept evolved and why it is essential. DevOps is neither a technology nor a standard but a culture and practice to unite the development, testing and operations for effective, quality, smooth and speedup up the overall software delivery time. I have also elaborated its principles and practices; however, those are not limited only to above mentioned. The core principles enable the collaboration and integration among the development and IT operations, bring automation wherever possible with incremental delivery. It also suggests being flexible to adopt changes for continuous improvement and monitoring. Its primary aim is to sync development and operation for smooth and faster delivery.