DEV Community: rinesh

Simple RAG Application in .NET (Clean Architecture + Aspire)

rinesh — Mon, 23 Mar 2026 16:25:34 +0000

I built a small Retrieval-Augmented Generation (RAG) sample using .NET 10, just to demonstrate how easily we can wire up:

Vector search with PostgreSQL (pgvector)
LLM integration
Clean Architecture
Local orchestration using .NET Aspire

You can find the source code here.
GitHub Repo: https://github.com/rineshpk/dotnet-rag-pgvector

What this repo demonstrates

Minimal RAG pipeline
Embedding storage using PostgreSQL + pgvector
Semantic search using cosine similarity
Clean Architecture structure
Aspire orchestration for local development

This project is orchestrated using .NET Aspire, making local setup extremely simple.

Just clone the repo and run: dotnet run --project AppHost.
Prerequisites: .Net 10, Docker

Open the aspire dashboard in browser. Ollama and PostgreSQL will take some time to pull their images the first time. Wait for all services to start.

You can see all services running and connected in one place.

The application stores embeddings directly in PostgreSQL using pgvector.

The API is exposed with a clean UI for testing endpoints.

Here’s an example of querying the system with a design pattern question and getting an LLM-powered response.

If you're exploring:

RAG in .NET
pgvector usage
Aspire-based orchestration

This repo gives you a clean starting point.

👉 Check it out here

Building a .NET RAG Application with PostgreSQL pgvector for AI Vector Search

rinesh — Sun, 22 Mar 2026 12:10:11 +0000

Semantic search goes beyond keyword matching by understanding the meaning behind a query. It’s a core building block for modern AI use cases like Retrieval-Augmented Generation (RAG), intelligent search, and recommendation systems. Vector databases are essential for these use cases. Unlike traditional databases, they are optimized for storing and querying high-dimensional embedding vectors, enabling efficient similarity search and more context-aware AI applications.

In this blog, we’ll build a .NET console application that performs semantic search using - PostgreSQL + pgvector as the vector database,
Ollama for local embedding and chat models and
EF Core for data access

We’ll generate embeddings from user queries, store them and use them to retrieve contextually relevant results from a vector store.

Prerequisites

1. PostgreSQL with pgvector

You can install PostgreSQL locally or use Docker.

If using Docker, run a pgvector-enabled image and expose port 5432.

docker run -d \
  --name postgres-pgvector \
  -p 5432:5432 \
  ankane/pgvector

After setup, enable the vector extension in your database:

CREATE EXTENSION IF NOT EXISTS vector;

2. Ollama (Local LLM)

Install Ollama from https://ollama.com

Pull required models:

ollama pull nomic-embed-text
ollama pull phi4-mini

Start the Ollama server:

ollama serve

Creating the .NET Console Application

Create a new console app dotnet new console -o VectorSearchApp

Next we can add the required packages, here I'm using EF core and DI for configuring the database access.

dotnet add package Microsoft.Extensions.Hosting
dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL
dotnet add package Pgvector.EntityFrameworkCore
dotnet add package OllamaSharp

Designing the Data Model

We define a simple entity to store the data

using Pgvector;

public class DesignPatternEntity
{
    public Guid Id { get; set; } = Guid.NewGuid();

    public string Name { get; set; } = default!;

    public string Description { get; set; } = default!;

    public Vector Embedding { get; set; } =default!;
}

The vector embedding is stored as a Vector type from Pgvector library

Configuring the Database Context

Configure DbContext to:

Use PostgreSQL via Npgsql

using Microsoft.EntityFrameworkCore;

public class VectorSearchAppDbContext : DbContext
{
    public VectorSearchAppDbContext(DbContextOptions<VectorSearchAppDbContext> options) : base(options)
    {
    }

    public DbSet<DesignPatternEntity> DesignPatterns => Set<DesignPatternEntity>();

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.HasPostgresExtension("vector");

        modelBuilder.Entity<DesignPatternEntity>()
            .Property(x => x.Embedding)
            .HasColumnType("vector(768)"); // match the model dimension
    }
}

{
  "ConnectionStrings": {
    "Default": "Host=localhost;Database=vector_db;Username=rinesh"
  }
}

Next, we’ll set up dependency injection and configure the required services as follows.

var services = new ServiceCollection();

var configuration = new ConfigurationBuilder()
    .SetBasePath(Directory.GetCurrentDirectory())
    .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
    .Build();

services.AddDbContext<VectorSearchAppDbContext>(options =>
{
    options.UseNpgsql(
        configuration.GetConnectionString("Default"),
        o => o.UseVector());
});

Now use EF core migration to create you database with the DesignPatterns table

dotnet ef migrations add InitialCreate --output-dir Data/Migrations
dotnet ef database update

Generating Embeddings

To enable semantic search, we convert text into embeddings. Lets seed some data to the table we will use an embedding model from Ollama to generate vector embedding during the data seeding

Process:

Take the description of each record
Generate embeddings using the Ollama embedding model
Store vectors in PostgreSQL

var ollamaApiClient = new OllamaApiClient("http://localhost:11434", "nomic-embed-text");
services.AddSingleton(ollamaApiClient);

var provider = services.BuildServiceProvider();
var dbContext = provider.GetRequiredService<VectorSearchAppDbContext>();
var embeddingGenerator = provider.GetRequiredService<OllamaApiClient>();

if (!dbContext.DesignPatterns.Any())
{
    List<DesignPatternEntity> designPatterns =
    [
        new()
        {
            Name = "API Gateway Pattern",
            Description = "The API Gateway pattern acts as a single entry point for all client requests in a microservices architecture. It handles request routing, composition, authentication, and rate limiting. This pattern helps simplify client interactions and improves security and observability."
        },
        new()
        {
            Name = "CQRS Pattern",
            Description = "Command Query Responsibility Segregation (CQRS) separates read and write operations into different models. This improves scalability and performance, especially in systems with high read and write loads. It is often combined with Event Sourcing."
        },
        new()
        {
            Name = "Event-Driven Architecture",
            Description = "Event-driven architecture enables services to communicate asynchronously using events. Producers emit events without knowing consumers, allowing loose coupling and scalability. This pattern is ideal for distributed systems and real-time processing."
        },
        // Other design patterns with names and descriptions — omitted for brevity.
    ];

    foreach (var designPattern in designPatterns)
    {
        var embedding = await embeddingGenerator.EmbedAsync(designPattern.Description!);

        designPattern.Embedding = new Vector(embedding.Embeddings[0].ToArray());

        dbContext.DesignPatterns.Add(designPattern);
    }

    await dbContext.SaveChangesAsync();
}

Performing Semantic Search

When a user enters a query:

Convert the query into an embedding
Compare it with stored vectors
Retrieve the most similar results

pgvector provides operators for similarity search - cosine distance(<=>), Euclidean Distance (<->) and Dot Product(<#>)

The most commonly used is cosine distance - Lower values indicate higher similarity.
ORDER BY "Vector" <=> query_vector
Pgvector.EntityFrameworkCore package provides EF equivalent for the similarity search operators

SQL	EF
<=>	.CosineDistance()
<->	.L2Distance()
<#>	.MaxInnerProduct()

We will be using CosineDistance for our similarity search.

Console.WriteLine("Enter your question:");
var question = Console.ReadLine();

var questionEmbedding = await ollamaApiClient.EmbedAsync(question!);
var questionVector = new Vector(questionEmbedding.Embeddings[0].ToArray());

var topSimilarResults = await dbContext.DesignPatterns
    .OrderBy(x => x.Embedding.CosineDistance(questionVector))
    .Take(2)
    .ToListAsync();

if (topSimilarResults.Count == 0)
{
    Console.WriteLine("No similar results found");
}

else
{
    Console.WriteLine("Top similar design patterns:");
    foreach (var designPattern in results)
    {
        Console.WriteLine($"{designPattern.Name}: {designPattern.Description}");
    }
}

Enhancing Results with RAG

Instead of returning raw results, we can improve the experience using an LLM.

Steps:

Retrieve relevant data using vector search
Inject that data into a prompt
Ask the LLM to generate a response

This is called Retrieval-Augmented Generation (RAG). It ensures responses are grounded in your actual data.

I’m introducing an additional client to interact with the LLM, using the Phi-4 model.

var ollamaApiChatClient = new OllamaApiClient("http://localhost:11434", "phi4-mini:latest");

var chatPrompt = "You are an expert solution architect.\n";

foreach (var designPattern in results)
{
    chatPrompt += $"Service: {designPattern.Name}\nDescription: {designPattern.Description}\n\n";
}

chatPrompt += $"User Question: {question}";

var chatResponse = await ollamaApiChatClient.GetResponseAsync(chatPrompt);

Console.WriteLine(chatResponse.Text);

In the below screenshot you can see how the application responded to a user query by generating a context aware response based on the retrieved information.

References

Build a .NET AI vector search app
pgvector: Embeddings and vector similarity
OllamaSharp

Source code of this demo app is available here

Simplifying Microservice Development with .NET Aspire, Dapr and Podman

rinesh — Sun, 19 Jan 2025 07:47:04 +0000

Microservices architecture has revolutionized modern application development, offering unparalleled scalability, modularity, and ease of deployment. Yet, setting up a local development environment for microservices often feels overwhelming. Enter .NET Aspire—a game-changer for building .NET cloud-native apps.

.NET Aspire simplifies local development with a consistent, opinionated set of tools and patterns tailored for distributed applications. Key features include:

Orchestration: Seamlessly run and connect multi-project applications and dependencies locally.
Integrations: Prebuilt NuGet packages for common services like Redis and Postgres, ensuring consistent, hassle-free connectivity.
Tooling: Streamlined project templates and tools for Visual Studio, Visual Studio Code, and the .NET CLI.

In this post, we’ll explore how .NET Aspire's orchestration empowers you to develop, test, and debug cloud-native apps with ease. While not a replacement for production systems like Kubernetes, it abstracts complexities like service discovery, environment variables, and container configurations—letting you focus on coding, not setup.

The code sample used for this article is available in this Git Repository

While Aspire Integrations provide opinionated NuGet packages for commonly used services with built-in resiliency and retry logic, developers still face the challenge of understanding and correctly implementing the necessary SDKs for databases, queues, and other components. This often involves significant manual effort, especially for smaller teams juggling multiple responsibilities. Here's a glimpse of Aspire's AppHost in action:

// Create a distributed application builder given the command line arguments.
var builder = DistributedApplication.CreateBuilder(args);

// Add a Redis server to the application.
var cache = builder.AddRedis("cache");

// Add a Service Bus client to the application.
var servicebus = builder.AddAzureServiceBus("servicebus");

// Microservices
builder.AddProject<Projects.MyMicroservice1>("mymicroservice1")
       .WithReference(cache)
       .WithReference(servicebus)
       .WaitFor(cache);

As projects scale and teams grow, the learning curve and setup effort can become a bottleneck. This is where Dapr, the Distributed Application Runtime, steps in to transform the microservices landscape.

Dapr is an open-source, platform-agnostic runtime designed to simplify the development of resilient, event-driven applications. By leveraging a sidecar architecture, Dapr provides a unified API for state management, service invocation, pub/sub messaging, and more. This enables seamless infrastructure transitions—for example, switching from MongoDB to Postgres or RabbitMQ to Azure Service Bus—without altering application code.

In this blog, we’ll explore how combining Dapr's flexibility with Aspire’s orchestration can streamline microservice development, empowering teams to focus on innovation rather than infrastructure.

When developing microservices with Dapr locally, debugging in Visual Studio traditionally requires Docker Desktop, as Visual Studio's container tools only support Docker. This dependency brings challenges, including licensing costs and the need for extensive configuration. To debug Dapr microservices with Docker Desktop, developers must write YAML files for Dapr components and a docker-compose file to orchestrate microservices, sidecars, and dependencies—a tedious process.

.NET Aspire eliminates the dependency on Docker Desktop by supporting both Docker and Podman container runtimes. With Aspire, you can enjoy a YAML-free local development experience, letting you focus on building and debugging your services without worrying about complex infrastructure setup.

Setting Up Your Development Environment

Getting started with .NET Aspire is simple. Follow these steps to set up your development environment:

1. Install .NET Aspire SDK

To work with .NET Aspire, you need the following installed locally .NET 8.0 or .NET 9.0.

Visual Studio 2022 17.9 or higher includes the latest .NET Aspire SDK by default when you install the Web & Cloud workload.

2. Install Podman Desktop

Podman is an open-source, daemonless alternative to Docker for building and running OCI containers.

If both Docker and Podman are installed on your system, .NET Aspire defaults to Docker. To switch to Podman, set the container runtime with the following command:

[System.Environment]::SetEnvironmentVariable("DOTNET_ASPIRE_CONTAINER_RUNTIME", "podman", "User")

3. Install Dapr CLI

To run applications with Dapr sidecars in .NET Aspire, install the Dapr CLI (version 1.13 or later).

Follow the instructions here: Install the Dapr CLI.
After installation, initialize Dapr for Podman with:

dapr init --container-runtime podman

For more details, see Initialize Dapr with Podman.

.NET Aspire + Dapr: Microservice Application Example

To showcase the potential of combining .NET Aspire and Dapr, I’ve built a simple microservice application that highlights how Aspire orchestration simplifies local development. You can find the complete source code for this demo in my GitHub Repository.

This demo consists of three projects:

Service-A: A minimal API service that publishes messages and do service-to-service invocations.
Service-B: Another minimal API service that subscribes to messages and retrieves secrets from the Dapr secret store and interacts with a state store.
Blazor Frontend: A web application that interacts with backend services.

To create the application with .NET Aspire support, create a .NET Aspire Empty App in the visual studio or use the following command in the CLI
dotnet new aspire --name AspireWithDapr. This will generate a solution with two projects:

Aspire AppHost – Responsible for orchestration.
ServiceDefaults – Handles OpenTelemetry integration, health checks, and service discovery.

The application demonstrates the following core Dapr capabilities:

Service-to-Service Invocation: Service-A communicates directly with Service-B via Dapr's service invocation API.
Publish/Subscribe Messaging: Service-A publishes events, which Service-B consumes through a pub/sub mechanism.
State Store: Service B use the state store to cache data, making them stateless and ensuring consistency.
Secret Management: Service-B fetches configuration values securely from the secret store, showcasing Dapr’s secret integration.

This architecture not only simplifies the implementation of distributed systems but also ensures best practices for reliability, scalability, and modularity.

In the following sections, we'll explore how .NET Aspire enables YAML-free orchestration, making Dapr integration more accessible for developers of all skill levels.

The code below represents the .NET Aspire host project, where we declare services, configure Dapr components, and define their relationships with minimal or no YAML configuration files.

var builder = DistributedApplication.CreateBuilder(args);

var stateStore = builder.AddDaprStateStore("statestore");
var pubSub = builder.AddDaprPubSub("pubsub");

var secretStore = builder.AddDaprComponent("secretstore", "secretstores.local.file", new DaprComponentOptions
{
    LocalPath = "..\\dapr\\components\\secretstore.yaml"
});


// Redis is used for pubsub and state store by default. So the redis needs to be running at the port 6379.
// Uncomment the below code to add redis as a container if it is not running
// builder.AddContainer("redis", "redis").WithEndpoint(port: 6379, targetPort: 6379);

var serviceA = builder.AddProject<Projects.AspireWithDapr_ServiceA>("service-a")
    .WithDaprSidecar(options =>
        options.WithAnnotation(
            new EnvironmentCallbackAnnotation("APP_API_TOKEN", () => "secret-dapr-api-token"), 
            ResourceAnnotationMutationBehavior.Append))
    .WithReference(stateStore)
    .WithReference(pubSub)
    .WithReference(secretStore)
    .WithEnvironment("APP_API_TOKEN", "secret-dapr-api-token");


var serviceB = builder.AddProject<Projects.AspireWithDapr_ServiceB>("service-b")
    .WithDaprSidecar(options =>
        options.WithAnnotation(
            new EnvironmentCallbackAnnotation("APP_API_TOKEN", () => "secret-dapr-api-token"), 
            ResourceAnnotationMutationBehavior.Append))
    .WithReference(stateStore)
    .WithReference(pubSub)
    .WithReference(secretStore)
    .WithEnvironment("APP_API_TOKEN", "secret-dapr-api-token");


builder.AddProject<Projects.AspireWithDapr_WebUI>("webfrontend")
       .WithDaprSidecar(options =>
            options.WithAnnotation(
                new EnvironmentCallbackAnnotation("APP_API_TOKEN", () => "secret-dapr-api-token"),
                ResourceAnnotationMutationBehavior.Append))
       .WaitFor(serviceA)
       .WaitFor(serviceB)
       .WithEnvironment("APP_API_TOKEN", "secret-dapr-api-token"); 


builder.Build().Run();

In this code, you can see how Dapr components are configured. Two Dapr components, pubsuband statestore, are natively supported by .NET Aspire. Using the AddDaprPubSub() and AddDaprStateStore() extension methods, you can easily configure these components. The YAML configuration for built-in components, like state store and pub/sub, is automatically generated in a temporary folder, eliminating the need to create or manage configuration files manually.

The secretstore component is not natively supported by .NET Aspire at the moment. However, you can configure it by using the AddDaprComponent()method and providing the necessary configuration details directly in the code. Below is the YAML configuration I used for the secret store:

apiVersion: dapr.io/v1alpha1
kind: Component
metadata:
  name: secretstore
spec:
  type: secretstores.local.file
  version: v1
  metadata:
  - name: secretsFile
    value: "..\\dapr\\secret.json"
  - name: nestedSeparator
    value: ":"

In the code example, you can see the use of the WithDaprSidecar() method provided by .NET Aspire to attach a Dapr sidecar to the service and how the components are referenced to the sidecar. The example also demonstrates how to inject environment variables into both the service and the Dapr sidecar to enable Dapr authentication.

...
.WithDaprSidecar(options =>
    options.WithAnnotation(
        new EnvironmentCallbackAnnotation("APP_API_TOKEN", () => "secret-dapr-api-token"), 
        ResourceAnnotationMutationBehavior.Append))
.WithReference(stateStore)
.WithReference(pubSub)
.WithReference(secretStore)
.WithEnvironment("APP_API_TOKEN", "secret-dapr-api-token");

The code snippet below shows how to use pub/sub, direct invocation, caching, and the secret store in your application. Make sure the names you use to set up these components match the names in the code for everything to work correctly.

service-a invokes service-b to retrieve data using Dapr's service-to-service invocation. It also publishes a message to a topic(PublishEventAsync("pubsub", "sample-topic", message)), enabling consumption by any subscribed service.

app.MapGet("/get-data", async (DaprClient daprClient) =>
{
    // Call ServiceB using Dapr Service Invocation
    var response = await daprClient.InvokeMethodAsync<string>(HttpMethod.Get,"service-b", "get-data");
    return Results.Ok(new { Message = "Data from ServiceB", Response = response });
});

app.MapPost("/publish", async (DaprClient daprClient, string message) =>
{
    // Publish a message to the Pub/Sub topic
    await daprClient.PublishEventAsync("pubsub", "sample-topic", message);
    return Results.Ok("Message published!");
});

service-b subscribes to the event(WithTopic("pubsub", "sample-topic")) and accesses both the state store(statestore) and secret store(secretstore) for its operations.

app.MapGet("/get-data", async (DaprClient daprClient) =>
{
    // Retrieve cached data from the state store
    var state = await daprClient.GetStateAsync<string>("statestore", "cached-key");
    if (string.IsNullOrEmpty(state))
    {
        state = "Data Form Service B";
        await daprClient.SaveStateAsync("statestore", "cached-key", state);
    }

    return Results.Ok(state);
});

app.MapPost("/subscribe", async ([FromBody] string message, ILogger<Program> logger) =>
{
    // Handle Pub/Sub messages
    logger.LogInformation("Received message: {Message}", message);
    return Results.Ok($"Message received: {message}");

})
.WithTopic("pubsub", "sample-topic")
.RequireAuthorization(new AuthorizeAttribute { AuthenticationSchemes = "Dapr" });

app.MapGet("/get-secret", async (DaprClient daprClient) =>
{
    // Retrieve a secret from the secret store
    var secret = await daprClient.GetSecretAsync("secretstore", "my-secret");
    return Results.Ok(secret);
});

The complete source code is available in my GitHub repository

With the code in place, it's time to launch the application. You can start the AppHost project. Both Visual Studio and Visual Studio Code will launch your app and the .NET Aspire dashboard automatically in your browser. If you run the app using the .NET CLI, simply copy the dashboard URL from the output and paste it into your browser.

The Aspire dashboard is used to monitor and inspect various aspects of your application, including logs, traces, and environment configurations. Designed to enhance the local development experience, this dashboard provides a comprehensive overview of the overall state and structure of your distributed app.

When you launch the app, you will see the required containers running in Podman Desktop, all managed seamlessly by .NET Aspire!.

If you navigate to the Traces menu in the Aspire Dashboard, you will see complete traces from the distributed app (if properly instrumented with the OpenTelemetry SDK – basic instrumentation is already provided by the Aspire Template and Dapr SDK).

When you invoke the API from the frontend application or initiate communication with pub/sub, you will be able to see complete traces.

Adding .NET Aspire to Existing Project

1. Adding a ServiceDefaults Project

Add Service Defaults to the solution to include health checks, logging, and other recommended features for both front-end and back-end projects.

Steps:

Add Service Defaults Project

In Visual Studio 2022 follow these steps:
1. Right-click on the solution and select Add > New Project.
2. Select the .NET Aspire Service Defaults project template.
3. Name the project ServiceDefaults (or any name).
4. Click Next > Create. Select .Net Aspire Version 9.0
Configure Service Defaults

Add a reference to the ServiceDefaults project in all the projects including the backend services and the web ui
Update Program.cs

In the services and frontend projects:
1. Update Program.cs files of all projects by adding the following line immediately after the var builder = WebApplication.CreateBuilder(args);
  
  builder.AddServiceDefaults();
2. Update the Program.cs files by adding the following line immediately after the var app = builder.Build(); line:
  
  app.MapDefaultEndpoints();

2. Adding an AppHost Project

Add an AppHost Project to the solution to orchestrate the services.

Steps:

Add AppHost Project

In Visual Studio 2022 follow the steps
1. Right-click on the solution and select Add > New Project.
2. Select the .NET Aspire App Host project template.
3. Name the project AppHost (any name would work).
4. Click Next > Create. Select .Net Aspire Version 9.0
Add project references

Add a reference to both the services and WebUI projects in the new AppHost project:
1. Right-click on the AppHost project and select Add > Reference.
2. Check the SeviceA, ServiceB and WebUI projects and click OK.
Orchestrate the Application

In the AppHost project, update the Program.cs file to configure components/integration, add projects and sidecars as shown in the code example above.

Conclusion

Combining .NET Aspire with Dapr revolutionizes the local development experience by eliminating the need for manual YAML configuration files. This integration allows for seamless orchestration of microservices, sidecars, and networking details, simplifying the development process. The Aspire Dashboard provides a comprehensive overview of the distributed application, offering insights into component interactions and making it easier for teams to understand and manage the system. Additionally, .NET Aspire eliminates the dependency on Docker Desktop, enabling developers to focus solely on building and debugging locally with ease.

References

You can find the complete source code here.

Create an Auto-Completing Pull Request in Azure DevOps CI/CD Pipeline Using PowerShell

rinesh — Thu, 28 Oct 2021 08:37:09 +0000

Ever thought of creating a pull request automatically using a CI/CD pipeline and setting the pull request auto-complete once all the required policies are met? Sometimes this is useful to keep one branch in sync with another, or you want to pull whatever changes are made to one branch automatically.

Azure DevOps provides a set of REST APIs to interact with DevOps services programmatically. But there is no single API that allows us to create a PR with auto-complete enabled. So we have to make two API calls to achieve this. Create PR for the pull request creation and Update PR to set the pull request to autocomplete

We can call the REST APIs in many ways. I'm using PowerShell to make RSET calls and PowerShell pipeline tasks to integrate it with Azure DevOps CI/CD Pipeline. Below is the screenshot of a sample pipeline I have created and the PowerShell script I have used in the PowerShell pipeline task.

PowerShell Script



# construct base URLs
$apisUrl = "$($env:SYSTEM_TEAMFOUNDATIONCOLLECTIONURI)/$($env:SYSTEM_TEAMPROJECT)/_apis"
$projectUrl = "$apisUrl/git/repositories/<Your Repository Name>"

# create common headers
$headers = @{}
$headers.Add("Authorization", "Bearer $env:SYSTEM_ACCESSTOKEN")
$headers.Add("Content-Type", "application/json")

# Create a Pull Request
$pullRequestUrl = "$projectUrl/pullrequests?api-version=5.1"
$pullRequest = @{
        "sourceRefName" = "refs/heads/develop"
        "targetRefName" = "refs/heads/master"
        "title" = "Pull from develop to master"
        "description" = ""
    }

$pullRequestJson = ($pullRequest | ConvertTo-Json -Depth 5)

Write-Output "Sending a REST call to create a new pull request from develop to master"

# REST call to create a Pull Request
$pullRequestResult = Invoke-RestMethod -Method POST -Headers $headers -Body $pullRequestJson -Uri $pullRequestUrl;
$pullRequestId = $pullRequestResult.pullRequestId

Write-Output "Pull request created. Pull Request Id: $pullRequestId"

# Set PR to auto-complete
$setAutoComplete = @{
    "autoCompleteSetBy" = @{
        "id" = $pullRequestResult.createdBy.id
    }
    "completionOptions" = @{       
        "deleteSourceBranch" = $False
        "bypassPolicy" = $False
    }
}

$setAutoCompleteJson = ($setAutoComplete | ConvertTo-Json -Depth 5)

Write-Output "Sending a REST call to set auto-complete on the newly created pull request"

# REST call to set auto-complete on Pull Request
$pullRequestUpdateUrl = ($projectUrl + '/pullRequests/' + $pullRequestId + '?api-version=5.1')

$setAutoCompleteResult = Invoke-RestMethod -Method PATCH -Headers $headers -Body $setAutoCompleteJson -Uri $pullRequestUpdateUrl

Write-Output "Pull request set to auto-complete"

Now, turn on the Continues integration in the Triggers tab. The pipeline will create an auto-complete enabled pull request to master automatically on every commit to the develop branch.

EditForm - forms and validation in Blazor

rinesh — Thu, 24 Sep 2020 06:11:18 +0000

ASP.Net Core Blazor ships some great components to get building web forms quickly and easily. The EditForm component allows us to manage forms, validations, and form submission events.

Microsoft docs says, an EditForm "Renders a form element that cascades an EditContext to descendants."

Let's see a Blazor EditForm in action,



<EditForm Model="@employee" OnValidSubmit="@OnValidSubmit">
    <label>Employee Name :</label>
    <div>
        <InputText @bind-Value="@employee.EmployeeName" />
    </div>
    <label>Gender :</label>
    <div>
        <InputSelect @bind-Value="@employee.Gender"> 
            <option value="Select">--Select--</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Other">Other</option>
         </InputSelect>
    </div>
    <label>DOB :</label>
    <div>
        <InputDate @bind-Value="@employee.DateOfBirth" />
    </div>
    <label>Department :</label>
    <div>
        <select @bind="@employee.DepartmentID"> 
            <option value=0>--Select--</option>
            <option value=1>Admin</option>
            <option value=2>HR</option>
            <option value=3>Payroll</option>
        </select>
    </div>
    <button type="submit" class="btn btn-success">
        @ButtonText
    </button>
</EditForm>

@code {
    [Parameter]
    public Employee employee { get; set; }
    [Parameter]
    public string ButtonText { get; set; } = "Save";
    [Parameter]
    public EventCallback OnValidSubmit { get; set; }
}

If we run this application in the browser you can see the rendered form with all other elements,



<form>  
     <label>Employee Name :</label>
    <div> 
         <input class="valid"> 
    </div> 
     <label>Gender :</label>
    <div> 
         <select class="valid">  
             <option value="Select">--Select--</option>
             <option value="Male">Male</option>
             <option value="Female">Female</option>
             <option value="Other">Other</option>
         </select> 
    </div> 
     <label>DOB :</label>
    <div> 
         <input type="date" class="valid"> 
    </div> 
     <label>Department :</label>
    <div> 
        <select>  
            <option value="0">--Select--</option> 
            <option value="1">Admin</option> 
            <option value="2">HR</option> 
            <option value="3">Payroll</option> 
        </select> 
    </div> 
    <button type="submit" class="btn btn-success"> 
        Create Employee 
    </button> 
</form>

Here, The EditForm renders an HTML form element with InputText as input type=text, InputSelect as select and, InputDate as input type=date. Also notice that EditForm added a CSS class 'valid' to each input element. This has something to do with the validation.

You can also use any HTML elements like input, select etc. in EditForm as it renders an HTML form.

EditForm Properties

In our example, EditForm has two attributes specified. Model and OnValidSubmit.

Model - Specifies the top-level model object for the form. Let me explain this,

Under the hood, EditForm manages the state of the form and any validation errors by storing it in an EditContext object. EditForm component instantiates EditContext for the model object specified in the Model attribute. In the above example employee object.

We can also specify the EditContext explicitly to an EditForm component by using the EditContext attribute instead of the Model attribute.



<EditForm EditContext="@EmployeeContext" OnSubmit="@OnSubmit">
</EditForm>

Here, we have to explicitly instantiate EditContext for employee object



@code {
    [Parameter]
    public Employee employee { get; set; }
    protected EditContext EmployeeContext { get; set; }
    protected override void OnInitialized()
    {
        EmployeeContext = new EditContext(employee);
    }

    [Parameter]
    public string ButtonText { get; set; } = "Save";
    [Parameter]
    public EventCallback OnSubmit { get; set; }   
}

You can specify either a Model or EditContext but not both

Use the Model attribute to specify the form model object and it is sufficient to manage all standard form operations and validations. Use EditContext attribute only if you want to take more direct control over the form's EditContext object to explicitly fire a validation or to notify a field change etc.

Another attribute used in our example is OnValidSubmit. This is a callback/method that will be invoked when the form is submitted and the EditContext is determined to be valid. In addition to this, EditForm provides two other callback attributes,

OnSubmit callback will be invoked when the form is submitted, but here we have to explicitly validate the EditContext.

OnInValidSubmit callback will be invoked when the form is submitted and the EditContext is determined to be invalid.

Form Validations

We can enable validation for the entire form simply by adding the <DataAnnotationsValidator /> component.



<EditForm Model="@employee" OnValidSubmit="@OnValidSubmit">
<DataAnnotationsValidator />
</EditForm>

The validation will work according to the DataAnnotations specified in our model class properties



public class Employee
{
     public int EmployeeID{get;set;}
     [Required]
     public string EmployeeName{get;set;}
     [Range(typeof(DateTime), "1/1/1970", "12/31/2000", ErrorMessage = "Value for {0} must be between {1} and {2}")]
     public DateTime DateOfBirth{get;set;}
     public Gender Gender{get;set;}
     public int DepartmentID{get;set;}
     public Department Department{get;set;}
}

With this [Required] attribute we’ve indicated that the user must enter an Employee Name and with the [Range] attribute we have specified the date range that should be entered.

We can show the validation summary by simply adding the <ValidationSummary /> component or you can show the validation message for each input by using the <ValidationMessage > component

Styling

You can style EditForm simply by adding a CSS class as normal. The form elements will be styled accordingly.

Let's see our example EditForm with all validation and styles added,



<EditForm Model="@employee" OnValidSubmit="@OnValidSubmit">
    <DataAnnotationsValidator />
    <div class="form-group">
        <label>Employee Name :</label>
        <div>
            <InputText @bind-Value="@employee.EmployeeName" class="form-control col-sm-3" />
            <ValidationMessage For="@(() => employee.EmployeeName)" />
        </div>
    </div>
    <div class="form-group ">
        <div>
            <label>Gender :</label>
            <div>
                <InputSelect @bind-Value="@employee.Gender" class="form-control col-sm-3"> 
                   <option value="Select">--Select--</option>
                   <option value="Male">Male</option>
                   <option value="Female">Female</option>
                   <option value="Other">Other</option>
                </InputSelect>
                <ValidationMessage For="@(() => employee.Gender)" />
            </div>
        </div>
    </div>
    <div class="form-group ">
        <div>
            <label>DOB :</label>
            <div>
                <InputDate @bind-Value="@employee.DateOfBirth" class="form-control col-sm-3" />
                <ValidationMessage For="@(() => employee.DateOfBirth)" />
            </div>
        </div>
    </div>
    <div class="form-group ">
        <div>
            <label>Department :</label>
            <div>
                <select @bind="@employee.DepartmentID" class="form-control col-sm-3"> 
                   <option value=0>--Select--</option>
                   <option value=1>Admin</option>
                   <option value=2>HR</option>
                   <option value=3>Payroll</option>
                </select>
                <ValidationMessage For="@(() => employee.DepartmentID)" />
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-success">
        @ButtonText
    </button>
</EditForm>

@code {
    [Parameter]
    public Employee employee { get; set; }
    [Parameter]
    public string ButtonText { get; set; } = "Save";
    [Parameter]
    public EventCallback OnValidSubmit { get; set; }
}

Now when you run this in the browser, you can see our form elements nicely styled up. Submit the form to see the validation in action

And, the rendered HTML



<form>  
    <div class="form-group"> 
         <label>Employee Name :</label>
        <div> 
             <input class="form-control col-sm-3 invalid"> 
             <div class="validation-message">The EmployeeName field is required.</div> 
        </div> 
    </div> 
    <div class="form-group "> 
        <div> 
             <label>Gender :</label>
            <div> 
                 <select class="form-control col-sm-3 modified valid">  
                    <option value="Select">--Select--</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                    <option value="Other">Other</option>
                </select> 
            </div> 
        </div> 
    </div> 
    <div class="form-group "> 
        <div> 
             <label>DOB :</label>
            <div> 
                 <input type="date" class="form-control col-sm-3 invalid"> 
                 <div class="validation-message">Value for DateOfBirth must be between 1/1/1970 0:00:00 and 12/31/2000 0:00:00</div> 
            </div> 
        </div> 
    </div> 
    <div class="form-group "> 
        <div> 
             <label>Department :</label>
            <div> 
                <select class="form-control col-sm-3">  
                   <option value="0">--Select--</option> 
                   <option value="1">Admin</option> 
                   <option value="2">HR</option> 
                   <option value="3">Payroll</option> 
                </select> 

            </div> 
        </div> 
    </div> 
    <button type="submit" class="btn btn-success"> 
        Create Employee 
    </button> 
</form>

If you look closely at the rendered HTML, you will notice the extra classes added by EditForm, 'valid', 'invalid' and, 'modified'. The class 'invalid' indicates that it's failed in form validation. You can add CSS style to this class for highlighting the invalid elements. In our example, bootstrap is doing this for us. For any modified element, a 'modified' CSS class will be added.

Summery

EditForm is pretty useful in creating web forms that keep the values in your model in sync with the values entered in the UI with out of the box validation support. But it doesn't stop you from creating your own form components in Blazor and implement custom logic for validations. EditForm is designed in such a way that you can easily implement any form validation you like. if you don't want to use DataAnnotation you can use any available validation components like FluentValidation
or write a custom validation component.

If you wish to see how to use this Blazor EditForm in a working example, please read my previous post Blazor Server CRUD App Using Visual Studio Code. You can find the sample application source code here

Blazor Server CRUD App Using Visual Studio Code

rinesh — Wed, 09 Sep 2020 07:43:02 +0000

Blazor is a new Microsoft technology that allows developers to write code for browsers in C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries. Your C# code can easily call JavaScript APIs and libraries. You can continue to use the large ecosystem of JavaScript libraries that exist for client-side UI while writing your logic in C#.

Blazor is a web framework designed to run client-side in the browser on a WebAssembly-based .NET runtime (Blazor WebAssembly) or server-side in ASP.NET Core (Blazor Server). Regardless of the hosting model, the app and component models are the same.

In this article, we will build a simple Employee Management system using Blazor server-side hosting model, which will allow us to perform CRUD operations. For this, we will be creating a Blazor Server web project, a .Net Core Web API project for managing the backend, and a .Net Core Class Library project for the model.

For the development environment, We will be using Visual Studio Code.

The source code of the application that we will be building is available in my git repository here.

Setup Development Environment

Prerequisites

Install the required extensions in vscode

C# extension is required for debugging and IntelliSense support for C# code

C# Extensions help us to create new classes, enums, and interfaces. It also provides a possible quick fix on Ctrl+.(Control + Period)
I have also installed some useful extensions like Blazor Snippets, Razor+, etc. to support the development workflow. There are a lot of extensions available at Extension Marketplace

I am using Visual Studio Code version 1.48.0 for this demo.

Let's create a folder named 'BlazorServerCRUD' at your preferred location. We will be using this as the root directory for our projects.

Now we are all set to start our development.

Create Blazor Server Web Application

Let’s create a Blazor Server project. In vscode, open a new integrated terminal window.The default terminal is a powershell and the location will be the default user directory. Use cd command and navigate to the directory we have created earlier.

We can use the .NET Core CLI command dotnet new for creating our project. We can create a new Blazor Server project using blazorserver template. Here you can see a complete list of project templates that can be used with dotnet new command.



dotnet new blazorserver -o 'BlazorServerCRUD.Web'

A new blazor server web project is created. Now we need to open the project folder in vscode. In vscode explorer click Open Folder and select project directory.

In the vscode Explorer, we can see our newly created project and it should look like this,

Blazor project template contains some default files, if we run our application right away it will be launched as a Hello World! application. For launching our application from vscode, we need to configure the vscode specific launch configuration. launch.json file is used to configure the debugger in vscode.

vscode generates a launch.json file with almost all of the required information. Go to Run tab and click on create a lauch.json file, it will ask for the environment, select .Net Core (Do not select Blazor WebAssembly Debug as our application is Balzor Server app) as shown below,

It will create launch.json file and it should look like this,

Click on Add Configuration button, a list of configurations will popup, select .NET: Launch a local NET Core Web App

This will add the required debug configuration, change<target-framework> to netcoreapp3.1, and <project-name.dll> to BlazorServerCRUD.Web.dll in the configuration file. Now launch file should look like this,

Our debug configuration is now complete. Ok, let's run our application by clicking Run>Start Debugging or by hitting F5

An error message will popup Could not find the task 'build' with an option to Configure Task. This is because we need to build our application before launch and in our launch.json build is specified as a preLaunchTask

Click on Configure Task, and select Create task.json from the template and select .NET Core template.

This will add a task.json file,

Now we are all set to build, debug, and launch our Blazor application. Hit F5, the app will be launched in the browser,

We have successfully launched our Blazor Server App from vs code. Next, we need to create a model class. Here I'm going to create a model class in a separate .Net standard class library project

Create .Net Core Class Library Project

We are going to create a new project, but the folder opened in vscode is the root of our web project. Now we need to manage multiple projects using one window. vscode has the concept of a 'workspace' which lets you add several 'root' folders to vscode in the same window.

So, lets set up our workspace in vscode. First, open the parent folder,

Then save the opened folder as the workspace using Save Workspace As option in vscode.

Our workspace is ready. Let's create a class library project. For creating a .net core class library project, run the below command in a new terminal window,



dotnet new classlib -o BlazorServerCRUD.Models

Make sure to run the command from the workspace directory - BlazorServerCRUD

The new Class Library project will be added with the name BlazorServerCRUD.Models and the vscode Explorer should look like this,

Now, we have two projects in our vscode workspace and we need to add the library project reference to our web project. That means we may need to build both the projects while debugging our application. How do we do that? One option is to build class library project by using dotnet build command every time. To make it handier, we can add a solution(.sln) file and add both projects to that solution. Then both projects will be built at the time of debugging.

Let's see how we can achieve this in vscode. Open a new terminal and run dotnet new sln command to create a solution file



dotnet new sln -n BlazorServerCRUD

A new solution file will be created with the name 'BlazorServerCRUD'. Let's add our projects to this sln using dotnet sln add command.



dotnet sln add BlazorServerCRUD.Web/BlazorServerCRUD.Web.csproj
dotnet sln add BlazorServerCRUD.Models/BlazorServerCRUD.Models.csproj

For launching the application, vscode will look for launch.json and task.json in the root directory. As we changed our root directory from BlazorServerCRUD.Web to BlazorServerCRUD, we have to move these configuration files also. Alternatively, we can add new launch configuration files for the current root directory. Note that 'program' and 'cwd' location in our new launch.json is now changed to:

Now we have completed our launch configuration changes as per the vscode workspace changes. Run the application and make sure everything is setup correctly.

Let’s create an Employee Model class with some properties. You can do this by right click on BlazorServerCRUD.Models and select 'New Class'.

Note: You will see this 'New Class' context menu option only if you installed C# Extensions extension in vscode

The Employee Model class should look like this.

For the Gender property, I have created a separate enum class as shown below.

For Department property, I have created another class with DepartmentId and DepartmentName properties.

Now, let’s add BlazorServerCRUD.Models as a reference to BlazorServerCRUD.Web. We can use dotnet add reference command to add a project reference. Run this command from web project folder, i.e., use cd BlazorServerCRUD.Web and run below command.



dotnet add reference ../BlazorServerCRUD.Models/BlazorServerCRUD.Models.csproj

Now we have created our model class library project and referenced it to our blazor web application.
Our next step is to create an API project to manage employee data.

Create ASP.Net Core Web API

For managing the data-access we will be adding a REST API project as a third project. Let’s add the api project using dotnet new command and add to our solution as shown below. --nohttps is used because we don't want https bindings for dev environment.

Run Multiple Projects in Visual Studio Code

Our blazor application is going to use the newly created API for backend data access. i.e., These two projects need to be launched simultaneously. To do this, we need to add one more configuration in our launch.json file. Open launch.json file in .vscode directory and click on Add Configuration button at the bottom right corner. Select .NET: Launch a local NET Core Web App. It will add one more ".NET Core Launch (web)" configuration. Change the name to ".NET Core Launch (api)" for identifying the launch settings. Set program property of newly added configuration to pointing to API application dll.

Now we have two debug configurations and this is all fine but doesn’t give us a way to run both of our projects. Let’s tweak the env property to set the ASPNETCORE_URLS which will control the application launch URL. Our Web API URL is set to http://localhost:5000 and Web Application URL is now set to http://localhost:5001

The following is the full configuration in my launch.json



{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": ".NET Core Launch (Api)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/BlazorServerCRUD.Api/bin/Debug/netcoreapp3.1/BlazorServerCRUD.Api.dll",
            "args": [],
            "cwd": "${workspaceFolder}/BlazorServerCRUD.Api",
            "stopAtEntry": false,
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(https?://\\S+)",
                "uriFormat": "%s/api/employee"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development",
                "ASPNETCORE_URLS": "http://localhost:5000"
            },
        },
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/BlazorServerCRUD.Web/bin/Debug/netcoreapp3.1/BlazorServerCRUD.Web.dll",
            "args": [],
            "cwd": "${workspaceFolder}/BlazorServerCRUD.Web",
            "stopAtEntry": false,
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development",
                "ASPNETCORE_URLS": "http://localhost:5001"

            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/BlazorServerCRUD.Web/Views"
            }
        }

    ]
}

Now that all our configurations are good to go.

Go to the vscode Run tab, there you can see both of our launch configurations listed. If you select the 'API' one and hit the green play button it will start the API. With the API running you can then select the 'Web' configuration and hit the green play button and you will have both of your applications running in debug mode.

Add Entity Framwork Core

Now we are going to add database support to our project. To do this, For data access, we are using Entity Framework Core. To add EF Core to our project, we will need to install Microsoft.EntityFrameworkCore.SqlServer and Microsoft.EntityFrameworkCore.Tools NuGet packages. Let's do this by using the dotnet add package command. These packages need to be installed in the API project. Open new terminal window and navigate to BlazorServerCRUD.Api directory and run the commands.

We also, need to add our model class library project reference to the API project.

Now we have added the required packages and references to our API project. Let's verify that in the API project file.

In this demo, I'm using EF Core Code First approach for data access. To get started with this, Let’s add the connection string to the appsettings.json file of BlazorServerCRUD.Api project. The connection string added is shown below. Here I'm using SQL Server Express LocalDB for the database.



Server=(localdb)\\mssqllocaldb;Database=DBEmployees;Trusted_Connection=True;MultipleActiveResultsets=true

Let’s add a new folder called Models to BlazorServerCRUD.Api project and add a new class called AppDbContext.cs.

Modify AppDbContext class to derive from DbContext. For this, we need to import the namespace Microsoft.EntityFrameworkCore. With the help of C# Extensions vscode will show a quick fix to import this namespace.

For the DbContext class to be able to do any useful work it needs an instance of DbContextOptions class. The DbContextOptions instance carries configuration information such as the connection string and the database provider to use. We are passing the instance of DbContextOptions class to base DbContext class. The updated class should look like this.

Now we will create a DbSet property for each of the entities created in our application. At the moment we have Department and Employee classes that represent the corresponding database table. We will use these DbSet properties to query and save instances of Employee and Department classes. The updated code is as shown below.

Let’s add some seed data for the employees and the department. We can do that by overriding OnModelCreating class. Before that, let's change the Department property in Employee class to int DepartmentID for simplicity.

The next step is to configure the SQL Server in Startup class, under ConfigureServices method as shown below.

The last step is to add database migration. To do that, we need to install .Net Core EF Tools. Use the following command to install ef tools globally.



dotnet tool install --global dotnet-ef

Now let's add database migration using dotnet ef migrations add command.

Once migration is successful, a migrations folder will be added to API project.

The next step is to apply the created migration. To do that we will run dotnet ef database update command.

Once this is successfully completed, we will have our tables with our seed data created in EmployeeDB database. You can see the DB creation logs while applying the migration as in the below image.

Now the database is set up with our seed data we can start to implement the CRUD operations. We are going to use the repository pattern to implement the logic required to access the data source.

Let's create an interface IEmployeeRepository which defines all the CRUD operations to be performed against the employee object.
For this, we have to import BlazorServerCRUD.Models to this interface. Let's do this by using the quick fix

I have added all the methods to perform CRUD operations in IEmployeeRepository interface.

Next step is to create EmployeeRepository class and implement IEmployeeRepository interface.

This EmployeeRepository class will need the AppDbContext class to communicate with the SQL database. We can do that by injecting an instance of AppDbContext class through the constructor.

We have the dependency of AppDbContext injected in EmployeeRepository class. Now let’s add the actual implementations to all CRUD methods as shown below.

Same way, we have to create an interface class called IDepartmentRepository and the implementation class DepartmentRepository for the Department entity as shown below.

And, we need to register repository implementation with the interface in Startup.cs class.

Now we have our repository classes ready. Let's build our REST API to access the employee data. We first need to create a controller class. I have created an EmployeesController class which derives from ControllerBase class. To do this, we can use aspnet-codegenerator (Scaffolding). This tool runs the ASP.NET Core scaffolding engine for avilable generators like controller. Let's install dotnet aspnet-codegenerator by running the below command.



dotnet tool install -global dotnet-aspnet-codegenerator

We also need to add Microsoft.VisualStudio.Web.CodeGeneration.Design for scaffolding our controller. Let's add this package using the following command



dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design

We are all set to create our first controller using dotnet aspnet-codegenerator. Run the below command to generate our EmployeeController



dotnet aspnet-codegenerator controller -name EmployeeController -api -outDir Controllers

Now, In order to retrieve Employees data from the database, we will need access to EmployeeRepository. I have updated the Employees controller class to inject an IEmployeeRepository class through a constructor as shown below.

Let’s add a HttpGet method GetEmployees to retrieve the list of all employees. It will return an Http status code of 200 OK as a response by using the inbuilt OK method available in ControllerBase base class.

Similarly, let's add other required methods in this EmployeeController. Another HttpGet method with the id parameter for fetching employee data of a specific employee by id, a HttpPost method for saving, a HttpPut method for updating, and an HttpDelete for deleting employee data.

Let’s add a uriFormat property for serverReadyAction in launch.json configuration settings for the API to call our employee controller when we launch our application as shown below.

Now we can test our API by launching the application. Go to Run and select .NET Core Launch (Api) and hit the play button.

Our API will be launched in the browser with api/employees URL by default which in turn calls the GetEmployees method to return the list of employees.

Now we have our API ready to supply some data. Before implementing all CRUD operations, let's go back to our Blazor web project and see how we can consume this API to display the employee list.

Customize Blazor Server Web Application

In our blazor project, there are some default files included as part of the project template. Let’s delete the unnecessary files which we don’t need for this project. I have highlighted the files to be deleted below.

Also, remove the deleted files references from Startup.cs class.

And, remove the unwanted menu from NavMenu.razor file. Highlighted below.

As we got rid of all unwanted files, let’s launch our application and see what we have got so far. The page will show nothing as there is nothing linked to home/root address.

Let’s modify the logic to show the employee list. To do this, add a razor component called EmployeeList.razor in Pages folder. You can use the dotnet new razorcomponent command to add a new razor component.

EmployeeList.razor component will look like this.

Now to link EmployeeList.razor component to the root address, add @page directive as shown below.

Now let’s run the project again. As you can see below. EmployeeList component is appearing at the root URL.

Now we have created our first razor component to view the employee list.
Next, we need to call our REST API created in BlazorServerCRUD.Api project from our BlazorServerCRUD.Web Blazor application.
We will create a separate service that will call the REST API. To do that I have added a new folder called Services to BlazorServerCRUD.Web project. I added a new Interface file called IEmployeeService with GetEmployees as an interface method as shown below.

I have added another implementation class called EmployeeService that implements IEmployeeService interface. To call our API from EmployeeService, we need an HttpClient. Let's inject the HttpClient instance in EmployeeService.

Next, we will have to register Httpclient service to the ASP.Net Core dependency injection container by using AddHttpClient method and map IEmployeeService interface to the EmployeeService class. Also, add the base address of our API.

Next, we have to install Microsoft.AspNetCore.Blazor.HttpClient Nuget Package in our BlazorServerCRUD.Web project. Currently, it is a prerelease. Lets add the package by running below command,



dotnet add package Microsoft.AspNetCore.Blazor.HttpClient --version 3.2.0-preview3.20168.3

Let’s now use httpClient instance in our EmployeeServices class to call REST API through GetEmployees method. I have used GetJsonAsync method which returns an array of Employee. This is an extension method for HttpClient. Include Microsoft.AspNetCore.Components namespace to make this method to appear. The method also requires the path to access the resource. The given path /api/employee is appended to the BaseAddress to return the result.

Now, let's modify our EmployeeList razor component to display the employee data accessed through EmployeeService. First, we need to inject IEmployeeService to our EmployeeList blazor component.

This injected EmployeeService instance is then used in ASP.NET Core Blazor lifecycle method OnInitializedAsync to fetch the list of Employees. This returned data is assigned to employees property.

EmployeeList.razor page uses that employees property to display the data on the screen. Let's add some HTML to our razor component to display the data as shown below.

We are all set to display the data we fetch from the API in our blazor application. Go to Run and first start the API and then the web application. Now you can see the employee list component now displays data from the database using REST API.

We have now displayed employee data from the Employee table. You can see, here the department is shown as Department Id. To display the department name, we have to fetch data from the Department table. To do this, Let's add a navigation property for Department in the Employee entity class.

Then we have to update GetEmployees and GetEmployee methods to include Departments table data by chaining Include method as shown below.

Next, We need to update the EmployeeList.razor Blazor component to display the department name instead of the department id.

Let's run the application and blazor component will show the department name instead of department Id.

Our next step is to get details of a specific employee. For this, let's add a new razor component EmployeeDetails.razor to display the details of a specific employee.



dotnet new razorcomponent -n EmployeeDetails -o Pages

We will be navigating to this page from our EmpoloyeeList page. To do this, we will have to provide a route parameter by using @page directive. Here {id} is the route parameter that will represent the employee Id.

To access {id} route parameter, we have to create a property in our EmployeeDetails.razor and decorate it with [Parameter] attribute. With this change, the id route parameter will be directly mapped to Id property.

Now, let's add a method GetEmployee to access the details of the employee in IEmployeeService interface and implement it in the EmployeeServices as shown below,

Note: You can import required namespace to components using _import.razor as shown below,

To call our GetEmployee method from the employee details page, let's inject the IEmployeeService in the component. To store the result from this method we also need to create an Employee property. With these changes, our EmployeeDetails.razor component should look like this.

Next, we can use ASP.NET Core Blazor lifecycle method OnInitializedAsync to retrieve employee data by id.

Let's add the HTML in EmployeeDetails.razor component to display employee details using the employee property. Also added the buttons to perform 'Edit', 'Delete', and 'Back' operations which we are going to implement next. To avoid NullReferenceException error add an If clause to check if the Employee property is initialized before using it.

For accessing the above Employee details page, let's add a link in our Employee list page.

With all these changes saved, let's run our application. In the employee list page, click on the employee name. We will be redirected to our employee details page and it should look like this

Now, we have displayed details of a specific employee by using the employee id. Next, we are going to implement the actual CRUD operations. For this, we have to add the necessary methods in our IEmployeeService interface,

And, implement these methods in EmployeeService class.

For understanding ASP.NET Core Blazor event handling, let's implement the Delete operation first.

For this, add a new method DeleteEmployee() in EmployeeDetails.razor component.

And, call this method in @onclick event handler as shown below,

With these changes saved, we have implemented the Delete operation. Run the application, go to employee datils you want to delete, and click on the delete button. The employee data for this particular employee will be deleted from the database. Now you need to navigate to home manually to verify this. For handling URI redirection in ASP.NET Core, we can use NavigationManager Class. Let's inject NavigationManager in EmployeeDetails.razor and modify the Delete method as shown below.

Now, on clicking the Delete button on the employee details page, you will be redirected to the home page. You can see the deleted employee is not listed on the homepage anymore.

Now, let's implement Create and Update operations. For this, we will be using CreateEmployee.razor and UpdateEmployee.razor respectively. Before creating these two components, let's create a child component that can be shared by both create and update components. Here we will also learn how to pass data from parent component to child component using parameters.

Let's add a razor component Form.razor in the Pages folder.



dotnet new razorcomponent -n Form -o Pages

In this Form.razor component we will be using ASP.NET Core Blazor forms and validation. Forms and validation are supported in Blazor using data annotations.

In this Form.razor, add an EditForm tag that takes in an Employee model and has a function call to submit. Inside the EditForm tag, we are going to add required blazor form controls and validations.

In the @code section of Form.razor, declare the parameters using the [Parameter] attribute. These parameters are used for passing data between parent and child components. We have an Employee object, a string for holding the button text, and an EventCallback for the method to be called on submitting the form. Below is my Form.razor component.

PS. Here the department select is hardcoded for simplicity, in real scenarios the department values should be fetched from the database.



<EditForm Model="@employee" OnValidSubmit="@OnValidSubmit">
    <DataAnnotationsValidator />
    <div class="form-group">
        <label>Employee Name :</label>
        <div>
            <InputText @bind-Value="@employee.EmployeeName" class="form-control col-sm-3" />
            <ValidationMessage For="@(() => employee.EmployeeName)" />
        </div>
    </div>
    <div class="form-group ">
        <div>
            <label>Gender :</label>
            <div>
                <InputSelect @bind-Value="@employee.Gender" class="form-control col-sm-3"> 
                   <option value="Select">--Select--</option>
                   <option value="Male">Male</option>
                   <option value="Female">Female</option>
                   <option value="Other">Other</option>
                </InputSelect>
                <ValidationMessage For="@(() => employee.Gender)" />
            </div>
        </div>
    </div>
    <div class="form-group ">
        <div>
            <label>DOB :</label>
            <div>
                <InputDate @bind-Value="@employee.DateOfBirth" class="form-control col-sm-3" />
                <ValidationMessage For="@(() => employee.DateOfBirth)" />
            </div>
        </div>
    </div>
    <div class="form-group ">
        <div>
            <label>Department :</label>
            <div>
                <select @bind="@employee.DepartmentID" class="form-control col-sm-3"> 
                   <option value=0>--Select--</option>
                   <option value=1>Admin</option>
                   <option value=2>HR</option>
                   <option value=3>Payroll</option>
                </select>
                <ValidationMessage For="@(() => employee.DepartmentID)" />
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-success">
        @ButtonText
    </button>
</EditForm>

@code {
    [Parameter]
    public Employee employee { get; set; }
    [Parameter]
    public string ButtonText { get; set; } = "Save";
    [Parameter]
    public EventCallback OnValidSubmit { get; set; }
}

Now, let’s start using our Forms component. Create a new razor component CreateEmployee.razor



dotnet new razorcomponent -n CreateEmployee -o Pages

For navigating to this create employee page, let's add a @page directive. Then, inject IEmployeeService for calling the AddEmployee method and inject NavigationManger for handling redirection from this component.

In this CreateEmployee component, add the Form component we have created earlier. To this Form component, we need to pass three parameters. 'ButtonText' string, 'employee' object, and 'OnValidSubmit' method. To do this, let's create an Employee object and a method in the @code section. With these changes, our CreateEmployee.razor should look like this,

Now, we will have to create a link to CreateEmployee from home page. To do this, let's modify the EmployeeList component and add a 'Create New' button. I have added an anchor tag with href="createemployee" as shown below,

With all these changes saved, let's run our application. On the home page, you can see a 'Create New' button displayed.

By clicking on the 'Create New' button, you will be navigated to CreateEmployee component.

You can see the create employee form with the button text as 'Create Employee'. Here you can save the employee details and you will be navigated to home. The newly created employee will be displayed in the employee grid.

Now, let's implement the Update operation. First, Create a new razor component UpdateEmployee.razor



dotnet new razorcomponent -n UpdateEmployee -o Pages

In this UpdateEmployee component, we can use the same Form component with a different button text. Add a @page directive with a route parameter. Here {id} is the route parameter that will represent the employee Id. Then, inject IEmployeeService for calling the UpdateEmployee method and inject NavigationManger for handling redirection from this component.

Same as we did in the CreateEmployeecomponent, in UpdateEmployee component, add the Form component and we need to pass three parameters. 'ButtonText' string, 'employee' object, and 'OnValidSubmit' method. To do this, let's create an Employee object and a method in the @code section. In addition to this, to access the {id} route parameter, we have to create a property Id and decorate it with the [Parameter] attribute. Also, we need to fetch the details of the employee using this Id parameter. For this we can use a different ASP.NET Core Blazor lifecycle method OnParametersSetAsync. With these changes, our UpdateEmployee.razor should look like this.

Now, we are all set with our UpdateEmployee component. We will be navigating to this component form our EmployeeDetails component. In EmployeeDetails.razor, let's modify the 'Edit' button and add a link to UpdateEmployee with @employee.EmployeeID as routing parameter.

With all these changes saved, let's run our application. From the employee list component, click on the employee name. It will navigate to employee details.

Click on the 'Edit' button, our update employee form will be loaded with all the employee details, and the button text will be displayed as 'Update Employee'.

Modify any field and click on the 'Update Employee' button, you will be navigated to the employee list and there you can see the employee details updated.

Summary

In this article, we covered an introduction to ASP .Net Core Blazor Server Application and How to perform basic CRUD operations with blazor application. We have also learned how to set up the ASP.Net Core development environment in Visual Studio Code as well as Working with multiple projects in the Visual Studio Code. We built an ASP.NET Core 3.1 WebAPI with Entity Framework Core for managing the backend data. You can find the complete source code here.

Introduction to ASP.Net Core

rinesh — Sat, 15 Aug 2020 04:43:53 +0000

ASP.NET Core is a lightweight, fast and cross-platform framework for building web and cloud applications, built on top of the .NET Core framework.

.Net Core is a paradigm shift for Microsoft, a huge change from the closed world to a new community-focused open source world. Now Microsoft is competing directly with all the open-source – cross-platform competitors like Python, PHP, Ruby, Java and a lot.

ASP.NET Core is a complete redesign of ASP.NET with architectural changes that result in a leaner, more modular framework. It is a cross-platform, high-performance, open-source framework for building web apps and services, IoT apps, and mobile backends.

Why you should learn ASP.Net Core?

The first preview release of ASP.NET came out almost 15 years ago as part of the .NET Framework and since then it has received a lot of updates and in the process, it has become a very complex web application framework. Now it's a fresh start and it doesn’t have to support all the old technologies from a decade ago so it will be slimmer by only support the modern technologies like MVC.

Here is what the improvements ASP.NET Core brings to the table:

Modular Design -The entire ASP.NET Core is designed as a modular framework to meet the requirements of modern web and distributed as NuGet packages.
Cross-Platform - Core has been rebuilt from scratch with cross-platform as a priority so you can develop and deploy applications on Linux, Mac, and Windows.
Open-Source and community-focused- A complete open source stack with a new compiler called Roslyn (built-in C#), and a new webserver called Kestrel.
Provides a Unified Programming Model for building Web UI and API's – A Combined application model with ASP.NET MVC, Web API, SignalR and Web Pages are merged into one framework
Fast - ASP.NET Core is JIT compiled and not interpreted like most other web languages like PHP, Python, Ruby, Node.js
Test-Driven Development - Architectural changes made it more testable with a clear separation of concerns.
Client-side Development -Seamless integration with modern UI frameworks like Angular, React, etc.
Out of the box support for Dependency Injection.
Extremely lightweight and high-performance configurable HTTP request/response pipeline.
Introduction of Blazor lets you use C# in the browser alongside JavaScript.
Cloud-ready, host anywhere (IIS, Apache, Nginx, Docker, or custom process) configuration system.

ASP.NET Core is a part of .NET Core SDK so you don't need to install ASP.NET Core separately. .NET Core comes under MIT or Apache 2 licenses. Visit the .NET Core repository on Github to contribute or download the source code.