Past few years, we are using Httpclient but are we using it properly? Recently, I came across the code of a senior developer from the other team. The developer was trying to communicate with the microservices by using HttpClient and has implemented his own logic of retry.

Implementing the own logic for retry is not wrong but understanding what overhead it could bring is more important.

The logic that he has written has some major drawbacks

    Usage of HttpClient  
    Usage of retry using loops

In this article, we’ll be covering only about drawbacks of HttpClient and how to fix the issues related to it.

Please find the source code here.
Usage of HttpClient

HttpClient is used to send the HTTP request or receive the HTTP response from the desired endpoint specified.

Internally, HttpClient uses HttpMessageInvoker class.  HttpMessageInvoker class allows the applications to call the SendAsync method(send the HTTP request as an async operation). However, HttpMessageInvoker uses an IDisposable interface to release unmanaged resources.
//
  // Summary:
  //     Provides a class for sending HTTP requests and receiving HTTP responses from
  //     a resource identified by a URI.
  public class HttpClient : HttpMessageInvoker
  {
      //
      // Summary:
      //     Gets or sets the base address of Uniform Resource Identifier (URI) of the Internet
      //     resource used when sending requests.
      //
      // Returns:
      //     The base address of Uniform Resource Identifier (URI) of the Internet resource
      //     used when sending requests.
      public Uri? BaseAddress
      {
          [System.Runtime.CompilerServices.NullableContext(2)]
          get
          {
              throw null;
          }
          [System.Runtime.CompilerServices.NullableContext(2)]
          set
          {
          }
      }

      //
      // Summary:
      //     Gets or sets the global Http proxy.
      //
      // Returns:
      //     A proxy used by every call that instantiates a System.Net.HttpWebRequest.
      //
      // Exceptions:
      //   T:System.ArgumentNullException:
      //     The value passed cannot be null.
      public static IWebProxy DefaultProxy
      {
          get
          {
              throw null;
          }
          set
          {
          }
      }

//
// Summary:
//     A specialty class that allows applications to call the System.Net.Http.HttpMessageInvoker.SendAsync(System.Net.Http.HttpRequestMessage,System.Threading.CancellationToken)
//     method on an HTTP handler chain.
public class HttpMessageInvoker : IDisposable
{
    //
    // Summary:
    //     Initializes an instance of a System.Net.Http.HttpMessageInvoker class with a
    //     specific System.Net.Http.HttpMessageHandler.
    //
    // Parameters:
    //   handler:
    //     The System.Net.Http.HttpMessageHandler responsible for processing the HTTP response
    //     messages.
    public HttpMessageInvoker(HttpMessageHandler handler)
    {
    }

    //
    // Summary:
    //     Initializes an instance of a System.Net.Http.HttpMessageInvoker class with a
    //     specific System.Net.Http.HttpMessageHandler.
    //
    // Parameters:
    //   handler:
    //     The System.Net.Http.HttpMessageHandler responsible for processing the HTTP response
    //     messages.
    //
    //   disposeHandler:
    //     true if the inner handler should be disposed of by Dispose(), false if you intend
    //     to reuse the inner handler.
    public HttpMessageInvoker(HttpMessageHandler handler, bool disposeHandler)
    {
    }

    //
    // Summary:
    //     Releases the unmanaged resources and disposes of the managed resources used by
    //     the System.Net.Http.HttpMessageInvoker.
    public void Dispose()
    {
    }

    //
    // Summary:
    //     Releases the unmanaged resources used by the System.Net.Http.HttpMessageInvoker
    //     and optionally disposes of the managed resources.
    //
    // Parameters:
    //   disposing:
    //     true to release both managed and unmanaged resources; false to releases only
    //     unmanaged resources.
    protected virtual void Dispose(bool disposing)
    {
    }

    //
    // Summary:
    //     Sends an HTTP request with the specified request and cancellation token.
    //
    // Parameters:
    //   request:
    //     The HTTP request message to send.
    //
    //   cancellationToken:
    //     The cancellation token to cancel operation.
    //
    // Returns:
    //     The HTTP response message.
    //
    // Exceptions:
    //   T:System.ArgumentNullException:
    //     The request was null.
    //
    //   T:System.NotSupportedException:
    //     For HTTP/2 and higher or when requesting version upgrade is enabled by System.Net.Http.HttpVersionPolicy.RequestVersionOrHigher.
    //     -or- If using custom class derived from System.Net.Http.HttpContent not overriding
    //     System.Net.Http.HttpContent.SerializeToStream(System.IO.Stream,System.Net.TransportContext,System.Threading.CancellationToken)
    //     method. -or- If using custom System.Net.Http.HttpMessageHandler not overriding
    //     System.Net.Http.HttpMessageHandler.Send(System.Net.Http.HttpRequestMessage,System.Threading.CancellationToken)
    //     method.
    [UnsupportedOSPlatform("browser")]
    public virtual HttpResponseMessage Send(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        throw null;
    }

    //
    // Summary:
    //     Send an HTTP request as an asynchronous operation.
    //
    // Parameters:
    //   request:
    //     The HTTP request message to send.
    //
    //   cancellationToken:
    //     The cancellation token to cancel operation.
    //
    // Returns:
    //     The task object representing the asynchronous operation.
    //
    // Exceptions:
    //   T:System.ArgumentNullException:
    //     The request was null.
    public virtual Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        throw null;
    }
}

Current Implementation
I’m using the default Web API template for both frontend and backend applications.

Backend
[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    private readonly ILogger<WeatherForecastController> _logger;

    public WeatherForecastController(ILogger<WeatherForecastController> logger)
    {
        _logger = logger;
    }

    [HttpGet(Name = "GetWeatherForecast")]
    public IEnumerable<WeatherForecast> Get()
    {
        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = DateTime.Now.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        })
        .ToArray();
    }
}

You might have noticed, it’s a default weather controller that comes with a Web API template.
[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
    private readonly ILogger<WeatherForecastController> _logger;
    [HttpGet(Name = "GetWeatherForecast")]
    public async Task Get()
    {
        for (int i = 0; i < 100; i++)
        {
            var httpClient = new HttpClient();
            var response = await httpClient.GetAsync("https://localhost:7054/WeatherForecast").Result.Content.ReadAsStringAsync();
        }
    }
}

I’m iterating the HTTPClient 100 times and sending the request to the backend application. All works and everything is right.

But wait, there’s more!

Let’s use the netstat tool to understand the state of the socket on the machine running.

Huh, that’s weird. The application has exited but still, there are a bunch of connections open. They are in the time_wait state which means the connection has been closed on one side(ours) but still waiting for the additional packets coming in on it because of the network delay.

As discussed before, HttpClient internally uses an IDisposable interface. Try the Using keyword to release the socket after completing our operation.
public async Task Get() {
    for (int i = 0; i < 100; i++) {
        using
        var httpClient = new HttpClient();
        var response = await httpClient.GetAsync("https://localhost:7054/WeatherForecast").Result.Content.ReadAsStringAsync();
    }
}

Now, let us perform netstat again,

Even after applying Using keyword, the results are the same then what is the use of Disposable interface – not able to release the sockets even after completion.  When dispose of is called, the connection will stay open for 4 mins to handle the network traffic.
 
Unlike Monolithic architecture, usage of HttpClient has increased in the new era of microservice architecture. Microservice or container-based applications ideally have limited resources. Ex: 400 MB of Memory and  400 MI of CPU

Now imagine, the socket remaining open for 4 mins with the container of limited resources. The sockets will exhaust soon and the application starts throwing a socket exhaustion error.

Enough about drawbacks, solution time
HttpClientFactory has been introduced in .Net Core 2.1 and it’s been around for quite a while.
HttpClientFactory manages the life cycle of the HTTP instance. All the life cycle management is taken care of by the factory class and provides a nice way of configuring the HTTP client in the startup. You have the option to implement factory class either by using Named clients or typed clients.

Named Client
Named clients are useful when,
App uses HttpClient for different components/services
Many HttpClient instances have different configurations. Ex: One HttpClient instance for Order service and another instance for Product service.
public class WeatherForecastController : ControllerBase
{
    private readonly ILogger<WeatherForecastController> _logger;
    private readonly IHttpClientFactory _httpClientFactory;

    public WeatherForecastController(ILogger<WeatherForecastController> logger,IHttpClientFactory httpClientFactory)
    {
        _logger = logger;
        _httpClientFactory = httpClientFactory;
       }
    #endregion

    [HttpGet(Name = "GetWeatherForecast")]
    public async Task Get()
    {
        for (int i = 0; i < 100; i++)
        {
            using var httpClient = _httpClientFactory.CreateClient("weatherForecast");
            string url = $"{httpClient.BaseAddress}WeatherForecast";
            var response = await httpClient.GetAsync(url).Result.Content.ReadAsStringAsync();
            _logger.LogInformation(response);
        }
    }
}

Changes in Program.cs,
builder.Services.AddHttpClient("weatherForecast", client =>
{
   client.BaseAddress = new Uri("https://localhost:7054");
    client.DefaultRequestHeaders.Add("Accept", "application/json");
});

AddHttpClient method is used to register the HTTP instance for HttpClientFactory. The parameter/name to invoke the HTTP instance of the weather forecast class is “weatherForecast”.

Let us perform a similar test using netstat again,

Unlike HttpClient, a single socket is created with the status “Established” and the lifetime of the socket will be completed and managed by HttpClientFactory.

Typed Client
Typed clients are better than Named clients

• Typed clients are strongly typed and no need to inject IHttpClientFactory
• Typed clients can be injected directly into your classes.

Create a service layer to properly utilize the typed client
public interface IWeatherService

{
    Task<string> GetWeatherAsync();
}
public class WeatherService : IWeatherService
{
    private readonly ILogger<WeatherService> logger;
    private readonly HttpClient httpClient;

    public WeatherService(ILogger<WeatherService> logger,HttpClient httpClient)
    {
        this.logger = logger;
        this.httpClient = httpClient;
    }

    public async Task<string> GetWeatherAsync()
    {
        string url = $"{httpClient.BaseAddress}WeatherForecast";
        var response = await httpClient.GetAsync(url).Result.Content.ReadAsStringAsync();
        logger.LogInformation(response);
        return response;
    }
}

Changes in the program.cs

builder.Services.AddHttpClient<IWeatherService,WeatherService>(client =>
{
    client.BaseAddress = new Uri("https://localhost:7054");
    client.DefaultRequestHeaders.Add("Accept", "application/json");
});

Changes in the WeatherForecast Controller

[ApiController]
[Route("[controller]")]
public class WeatherForecastController: ControllerBase {
    private readonly ILogger < WeatherForecastController > _logger;
    private readonly IWeatherService weatherService;
    public WeatherForecastController(ILogger < WeatherForecastController > logger, IWeatherService weatherService) {
            _logger = logger;
            this.weatherService = weatherService;
        }
        [HttpGet(Name = "GetWeatherForecast")]
    public async Task Get() {
        for (int i = 0; i < 100; i++) {
            var response = await weatherService.GetWeatherAsync();
            _logger.LogInformation(response);
        }
    }
}

Let us perform a similar test using netstat again

The result remains the same for Named and Typed Clients.
Like the Named client, a single socket is created with the status “Established” and the lifetime of the socket will be completed and managed by HttpClientFactory.

What’s next
In the next article, we’ll discuss resiliency for HTTP calls such as Retry and Circuit breakers using Polly.

In this article, we’ll go through the details and meaning of REST. It will help you to better understand REST and use it with its best practices.

What is an API?
When developing software, we write API (Application Programming Interface) in order not to perform some tasks over and over again. The API insulates us from the difficulties of the environment and domain area where we work and ensures the encapsulation of complex processes and our abstraction from the domain area. Due to this, we stay away from low-level design architectural solutions and communicate with the environment only through the provided interface. For example, when using the framework, we can see all the DLLs (packages) whose functionality we benefit from as APIs.

What exactly is a web-based API?
Web Based API is just a variation of API. Web Based API is a form of API used to enable data exchange between applications using web standards and protocols. Typically, these types of APIs manifest themselves as REST APIs and SOAP services. Due to this, by creating a channel between different web resources (site, service, etc.), it is possible to build a large infrastructure (microservice, etc.) or simply an exchange mechanism.

The main topic of today's article will be RESTful Services, one of the forms of Web Based API.

What exactly REST is?
REST (Representational State Transfer) is an architectural style used to develop loosely-coupled applications over the HTTP protocol. REST is just an architectural style. The architectural style is: although the high-level architectural design of any work is given, the low-level design is kept free for the implementing party (vendor, provider).

REST is not a standard. Although REST is not a standard, it is implemented through web standards in modern days.

REST is not a protocol. Although REST is not a protocol, it has been implemented through web protocols (HTTP) nowadays. But REST is protocol-independent. The fact that it is implemented with the HTTP protocol doesn’t mean that it can only work with this protocol.

You can think of REST as a kind of ISO/OSI model. Although it is an ideal model, in real practice the TCP/IP model is used, and ISO/OSI remains a kind of theory. Although REST does not remain in theory, it is not excluded that it may be implemented in another format in the future.

If we express the work of REST in a short, we can say that "The client sends a request to the server, and the server changes the state of the client according to the response".

As for the core of the word REST. REST is based on the concepts of Resource, Representation, State, and Transfer. First, the client requests a resource from the server. The server keeps the original resource in itself and sends the Representation, which is just a copy of it, to the client. If the resource changes tomorrow, the client must request again and get the latest state of the resource again. The transfer of the resource from the server to the client is just a Transfer.

Why do we need REST
    It isolates the Client and Server from each other and eliminates the dependency between them.
    It does not depend on any platform
    It does not depend on any programming language. Whether you use PHP, C#, Node.js, etc. you can write REST services with all of them.
    It is not tied to a specific format. You can receive data in either XML or JSON (maybe in other formats).
    Allows building distributed systems
    It has the Discoverable feature. Resources can be easily identified
    Very easy to use
    Can use HTTP cache

What are REST constraints?
The main mechanism that indicates whether a service is a REST is its constraints.

REST has 6 (5 mandatories, 1 optional) constraints.
1) Uniform-Interface Constraint
This constraint is perhaps the most important constraint among REST constraints. If it is necessary to briefly list the main ideas on which it is based, we can say:
    Different devices, equipment, and programs must use resources over the same URL
    A URL can provide different representations. This is usually given as Content Negation in services. That is, by referring to the same URL, depending on the configuration, you can receive information in both XML and JSON format.
    We can make both GET and POST requests to the same URL

The above brief overview is not complete. Because the Uniform-interface constraint itself consists of 4 sub-parts. If we don't know them, it's hard to fully understand what this limitation does:

1.1 Identification of Resources
Identification of resources should be done over URL. That is, it should be easy to know what type of resource is used when looking at the URL. Example: If the URL https://website.com/api/students is given, here students are our called and used as a resource. The name of the resource must be represented in the URL.

1.2 Manipulating Resources through representation
If the requesting client has permission to manipulate (edit, delete) the resource, there should be metadata about how to manipulate the resource together with the returned representation. Through these metadata links, the called resource can be changed or deleted.

1.3 Self-descriptive messages
Each sent request should be complete in itself, no additional commands should be needed to do any atomic work. Typically, metadata (additional credentials, HTTP method information, meta info) is sent via HTTP headers.

1.4 HATEOAS – (Hypermedia As The Engine of Application State)

During each request, it should be possible to receive documentation information, like a WSDL in WCF services. The point is that the client side should easily know where other resources are located (discoverable).

2) Client-Server constraint (Client Server constraint)
This constraint allows us to isolate the client and the server from each other.
    There must be a client and a server for data exchange
    They should be accompanied and expanded independently
    They should not depend on each other
    The client should not need to know anything about the architecture of the server
    The server should not need to know anything about the client's UI

3) Stateless constraint
Due to this limitation, the server and client should communicate without having information about each other.
    The server should not store any session (data) about the client
    The relationship between the client and the server is performed stateless, and all requests must be completely independent requests, not dependent on the results of other requests

4) Cachable constraint
The goal is to save the network and increase the exchange speed

    If possible, the request from the server should be cached
    During each response, it should be possible to manage the cache through the header

5) Layered system
The goal is to reduce complexity.

    Server architecture is divided into the hierarchical layer (cover-abstraction level).
    Each layer only knows about the middle layer

6) Code on demand constraint
This constraint is optional.
    In addition to simple data, the server can provide the client with the opportunity to execute some executable code examples. For example, to execute JS code. Just because this type of restriction is relatively dangerous, there is no obligation to implement it.

This article will help you if you wish to color cells of Gridview and learn how to access cell values.

This article is all about how to set or change the background \color of the selected row of ASP.Net GridView programmatically.
Here we go with the cs file code
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
namespace gridcolor {
    public partial class WebForm1: System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            DataTable dt = new DataTable();
            dt.Columns.add("Hobbies");
            //here only one column for easy understanding
            dt.Rows.add("I love C# corner")
            mygrid.datasource = dt;
            mygrid.databind();
            //for perticular cell //here it has only 1 cell (0,0)
            myGrid.Rows[i].Cells[j].Style.BackColor = system.drawing.color.Red;
            //incase you want to fill all rows
            for (int i = 0; i < myGrid.Rows.Count; i++) {
                for (int j = 0; j < myGrid.Rows[i].Cells.Count; j++) {
                    myGrid.Rows[i].Cells[j].Style.BackColor = /*color you want*/
                }
            }
        }
    }
}

Now a brief look to my aspx

page code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
<asp:GridView ID="myGrid" runat="server" AutoGenerateColumns="false" >
    <Columns>
        <asp:BoundField DataField="Hobbies" HeaderText="Hobbies" ItemStyle-Width="150" />


    </Columns>
</asp:GridView>
    </form>
</body>
</html>

Hope you would easily understand the tutorial :-)
Sharing is caring. Share with your coding buddies.

Splitting multiple lines and storing them into array. I found this code snippet useful in my daily office work in order to do so we need to take the input in my case I use multiple line text box. This tutorial is for beginners. In order to do so I made the languages and terms well-defined so let's start with the ready-to-copy code,
sting[] str = str.Split(new [] { "\r\n" }, StringSplitOptions.RemoveEmptyEntries);

Example of doing so,
my CS page
using System;
using System.Collections.Generic;
using System.ComponentModel;
namespace gridcolor {
    public partial class WebForm1: System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            string str = textbox1.text;
            sting[] str = str.Split(new [] {
                "\r\n"
            }, StringSplitOptions.RemoveEmptyEntries);
        }
    }

Here is my aspx page (code),
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

<asp:TextBox ID="textBox1" runat="server" Height="492px" TextMode="MultiLine"
 Width="994px"></asp:TextBox>
    </form>
</body>
</html>

That's all hope you like it sharing is caring share with your coding buddies.

We will discuss minimal APIs in .NET Core 6, their purpose, and step-by-step implementation.

Introduction
    Minimal APIs are used to create HTTP APIs with minimum dependencies and configuration.
    Mostly it is used in microservices that have fewer files and functionality within a single file
    But there are a few things that are not supported in minimal APIs like action filters, and built-in validation, also, a few more that are still in progress and will get in the future by .NET Team.

Minimal APIs Implementation using .NET Core 6
Step 1
Create a new .NET Core Web API

Step 2
Configure your project

Step 4
Install the following NuGet packages

Project structure

Step 5
Create a Product class inside the entities folder
namespace MinimalAPIsDemo.Entities
{
    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public string ProductDescription { get; set; }
        public int ProductPrice { get; set; }
        public int ProductStock { get; set; }
    }
}

Step 6
Next, create DbContextClass inside the Data folder
using Microsoft.EntityFrameworkCore;
using MinimalAPIsDemo.Entities;

namespace MinimalAPIsDemo.Data
{
    public class DbContextClass : DbContext
    {
        protected readonly IConfiguration Configuration;

        public DbContextClass(IConfiguration configuration)
        {
            Configuration = configuration;
        }
        protected override void OnConfiguring(DbContextOptionsBuilder options)
        {
            options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"));
        }

        public DbSet<Product> Product { get; set; }
    }
}

Step 7
Register the Db Context service in the DI container inside the Program class which is the entry point of our application
// Add services to the container.
builder.Services.AddDbContext<DbContextClass>();

Step 8
Add database connection string inside the app settings file
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "DefaultConnection": "Data Source=DESKTOP;Initial Catalog=MinimalAPIDemo;User Id=sa;Password=database;"
  }
}

Step 9
Later on, add different API endpoints inside the Program class with the help of Map and specified routing pattern as I showed below
using Microsoft.EntityFrameworkCore;
using MinimalAPIsDemo.Data;
using MinimalAPIsDemo.Entities;

var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddDbContext<DbContextClass>();

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

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

//get the list of product
app.MapGet("/productlist", async (DbContextClass dbContext) =>
{
    var products = await dbContext.Product.ToListAsync();
    if (products == null)
    {
        return Results.NoContent();
    }
    return Results.Ok(products);
});

//get product by id
app.MapGet("/getproductbyid", async (int id, DbContextClass dbContext) =>
{
    var product = await dbContext.Product.FindAsync(id);
    if (product == null)
    {
        return Results.NotFound();
    }
    return Results.Ok(product);
});

//create a new product
app.MapPost("/createproduct", async (Product product, DbContextClass dbContext) =>
{
    var result = dbContext.Product.Add(product);
    await dbContext.SaveChangesAsync();
    return Results.Ok(result.Entity);
});

//update the product
app.MapPut("/updateproduct", async (Product product, DbContextClass dbContext) =>
{
    var productDetail = await dbContext.Product.FindAsync(product.ProductId);
    if (product == null)
    {
        return Results.NotFound();
    }
    productDetail.ProductName = product.ProductName;
    productDetail.ProductDescription = product.ProductDescription;
    productDetail.ProductPrice = product.ProductPrice;
    productDetail.ProductStock = product.ProductStock;

    await dbContext.SaveChangesAsync();
    return Results.Ok(productDetail);
});

//delete the product by id
app.MapDelete("/deleteproduct/{id}", async (int id, DbContextClass dbContext) =>
{
    var product = await dbContext.Product.FindAsync(id);
    if (product == null)
    {
        return Results.NoContent();
    }
    dbContext.Product.Remove(product);
    await dbContext.SaveChangesAsync();
    return Results.Ok();
});

app.Run();

Step 10
Run the following entity framework command to create migration and update the database
add-migration "initial"
update-database

Step 11
Finally, run your application

In this article, we will see how to create a Stored Procedure in MySQL to search and bind the Customer details in our Blazor application using a Service with search parameter.

Blazor is a framework introduced by Microsoft. I love to work with Blazor as this makes our SPA full stack application development in simpler way and yes, now, we can use only one language, C#. Before Blazor, we were using ASP.NET Core with a combination of Angular or ReactJS. Now, with the help of Blazor support, we can create our own SPA application directly with C# Code.

We can develop two kinds of Blazor Applications which are Blazor Server App and another one is Blazor WebAssembly.

Blazor WebAssembly
WebAssembly or WASM runs on the client side. WebAssembly is the open web standard and works in browsers without support for any other plugins. WASAM uses JavaScript Interoperability to access the full functionality of browsers. Here we can see the structure of ASP.NET Core WASAM Application as the solution has only the client development as same structure of the ASP.NET Core Angular Stand-Alone Templates. For any server-side business logics or for using the Database we need to create an ASP.NET Core WEB API or other server-side project and bind the server-side data to the WASAM applications.

Blazor Server
Blazor Server which runs in the ASP.NET Server means its runs on Server side. Blazor Server App uses the SignalR to continuously push updates to the client side. All the JavaScript calls, UI updates and all the app event handling using the SignalR with WebSocket protocol connections. Blazor Server app is much faster than the WASAM as the download size is smaller than the WASAM applications. Here we can see the structure of ASP.NET Core Blazor Server Application as the solution has Data folder where we can write all server-side business logic and can use the service to perform the Database related connections.

Creating the Database and Table
Here using MySQL workbench we create database named as customer and created a table named as custmaster.

Create the Stored Procedure
Let’s create the stored procedure to perform and search and customer details with customer name and customer email.

CREATE DEFINER=`shanu`@`%` PROCEDURE `sp_custGet`(IN CustName varchar(50),
IN Email varchar(50)    )
BEGIN
Select  CustCd,
        CustName,
        Email,
        PhoneNo,
        Address
FROM customer.custmaster
WHERE
CustName LIKE CONCAT('%', CustName , '%')
AND
Email LIKE  CONCAT('%', Email , '%') ;
END

To test the Stored Procedure in MySQL we use the below code as a call with stored procedure name and now let's pass the empty parameter for both custname and email.

Blazor part
After installing all the prerequisites listed above and click Start >> Programs >> Visual Studio 2022 >> Visual Studio 2022 on your desktop. Click New >> Project.

Search for Blazor Server App project and click Next.

Enter your project name and click Next.

Select .NET 6.0 and click next to create your Blazor Application.

Step 2: Connection String
Open the appsettings.json file and add the MySQL connection string. Note add your MySQL server ID details.
"ConnectionStrings": {
    "DefaultConnection": "server=localhost;user id=-------;password=--------;port=3306;database=customer;"
},

Step 3: Install the Packages
In order to work with MySQL Database in our Blazor application here we use the install the below mentioned packages :

MySqlConnector
Microsoft.EntityFrameworkCore

Step 4: Create Model Class
Next, we need to create the Model class for using in our application for binding the Customer Details.
Let’s create a new folder named as Models from our solution and then Right click the created Models folder and create new class file as “CustMaster.cs”.
In the class, we add the property field name which is the same as the below code:
public class custmaster{
    public string CustCd { get; set; }
    public string CustName { get; set; }
    public string Email { get; set; }
    public string PhoneNo { get; set; }
    public string Address { get; set; }
}

Step 5: Create MySQL Connection Class
Now let’s create the MySQL connection class and for this let’s create a class file.
Right click the created Models folder and create new class file as mySQLSqlHelper.cs
using MySqlConnector;
namespace BlazorMysql.Models {
    public class mySQLSqlHelper {
        //this field gets initialized at Startup.cs
        public static string conStr;
        public static MySqlConnection GetConnection() {
            try {
                MySqlConnection connection = new MySqlConnection(conStr);
                return connection;
            } catch (Exception e) {
                Console.WriteLine(e);
                throw;
            }
        }
    }
}

Now open the Program.cs file and lets assign the connection string from our appsetting.json to the mysqlHelper constring variable for connecting to the MySQL.
using BlazorMysql.Data;
using BlazorMysql.Models;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
var builder = WebApplication.CreateBuilder(args);

mySQLSqlHelper.conStr = builder.Configuration["ConnectionStrings:DefaultConnection"];

Step 6: Creating Customer MySql Connection class
Right Click the Data folder from the solution and add the new class named as custConnectoins .cs

In this class we create the GetCustDetails for connecting to Database and get the customer details by calling the Stored procedure with the required parameter passing and return to the list to our Service.
using BlazorMysql.Models;
using MySqlConnector;
using System.Data;
namespace BlazorMysql.Data {
    public class custConnectoins {
        public async Task < custmaster[] > GetCustDetails(string CustName, String Email) {
            List < custmaster > list = new List < custmaster > ();
            using(MySqlConnection conn = mySQLSqlHelper.GetConnection()) {
                conn.Open();
                using(MySqlCommand cmd = new MySqlCommand("sp_custGet", conn)) {
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.Add(new MySqlParameter {
                        ParameterName = "@CustNames",
                            DbType = DbType.String,
                            Value = CustName,
                            Direction = ParameterDirection.Input,
                    });
                    cmd.Parameters.Add(new MySqlParameter {
                        ParameterName = "@Emails",
                            DbType = DbType.String,
                            Value = Email,
                            Direction = ParameterDirection.Input,
                    });
                    using(MySqlDataReader reader = cmd.ExecuteReader()) {
                        while (reader.Read()) {
                            list.Add(new custmaster() {
                                CustCd = reader.GetInt32("CustCd"),
                                    CustName = reader.GetString("CustName"),
                                    Email = reader.GetString("Email"),
                                    PhoneNo = reader.GetString("PhoneNo"),
                                    Address = reader.GetString("Address"),
                            });
                        }
                    }
                }
            }
            return list.ToArray();
        }
    }
}

Step 7: Working with Service Class
Next, we create the custMasterDetailSerivce.cs class and added the function named as GetCustDetails in order to bind the result to our Blazor apps.
using BlazorMysql.Models;
namespace BlazorMysql.Data {
    public class custMasterDetailSerivce {
        custConnectoins objUsers = new custConnectoins();
        public async Task < custmaster[] > GetCustDetails(string CustName, String Email) {
            custmaster[] custsObjs;
            custsObjs = objUsers.GetCustDetails(CustName, Email).Result.ToArray();
            return custsObjs;
        }
    }
}

Step 8: Add the Service
We need to add the services created by us to the Program.cs class.

builder.Services.AddSingleton<custMasterDetailSerivce>();

Step 9: Working with Client Project
First, we need to add the Razor Component page.

Add Razor Component
To add the Razor Component page, right click the Pages folder from the solution. Click on Add >> New Item >> Select Razor Component >> Enter your component name, here we have given the name as Customer.razor.

Note all the component files need to have the extension as .razor.

In Razor Component Page, we have three parts of code as first is the Import part where we import all the references and models for using in the component, HTML design and data bind part and finally we have the function part to Inject and call the service to bind in our HTML page and also to perform client-side business logic to be displayed in Component page.

Import Part
First, we import all the needed support files and references in our Razor View page. Here, we have first imported our Model and service class to be used in our view.
@page "/Customer"
@using BlazorMysql.Models
@using BlazorMysql.Data
@inject custMasterDetailSerivce CustomerService

HTML Design and Data Bind Part
In design part, we bind the result in table and also, we design a search part with button.
<h1>Customer Details</h1>
<table >
    <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
        <td colspan="5" align="left">
            Search Customer
        </td>
    </tr>
    <tr>
        <td>Cust Code:</td>
        <td>
            <input class="input-group-text" type="text" @bind-value="@CustName" />
        </td>
        <td>Cust Name:</td>
        <td>
            <input class="input-group-text" type="text" @bind-value="@Email" />
        </td>
        <td>
            <input type="button" class="btn btn-primary" value="Search" @onclick="@searchDetails" />
        </td>
    </tr>
</table>
<hr />
@if (custDetails == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Customer Code</th>
                <th>Customer Name</th>
                <th>Email</th>
                <th>Phone No</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var cuDetails in custDetails)
            {
                <tr>
                    <td>@cuDetails.CustCd</td>
                    <td>@cuDetails.CustName</td>
                    <td>@cuDetails.Email</td>
                    <td>@cuDetails.PhoneNo</td>
                    <td>@cuDetails.Address</td>
                </tr>
            }
        </tbody>
    </table>
}

Function Part
Function part to get the Service result and bind the result in array and we have created function to search and bind the result when button clicked. Here, first we declare the customer Array to get bind the result and declared variables for search.

In OnInitializedAsync, we get the CustomerService result and bind the result in the ItemsArrays.
@code {
    String CustName = "";
    String Email = "";
    private custmaster[] ? custDetails;
    protected override async Task OnInitializedAsync() {
        custDetails = await CustomerService.GetCustDetails(CustName, Email);
    }
    //SearchCustomer
    async Task searchDetails() {
        custDetails = await CustomerService.GetCustDetails(CustName, Email);
    }
}

Navigation Menu
Now, we need to add this newly added customer Razor page to our left Navigation. For adding this, open the Shared Folder and open the NavMenu.cshtml page and add the menu.
<div class="nav-item px-3">
    <NavLink class="nav-link" href="Customer">
         <span class="oi oi-list-rich" aria-hidden="true"></span> Customer
    </NavLink>
</div>

Build and Run the Application

Conclusion
Hope this article helps you to understand getting started with ASP.NET Core 6.0 and Blazor Application to work with MySQL Database with search functionality.

We are going to discuss here SSL Certificate configuration for secure communication over the HTTPS using .NET Core Web API and Docker after running our application inside the docker container using docker-compose.

Introduction
    HTTPS is a standard internet protocol that makes the data to be encrypted and a more advanced and secure version of the HTTP protocol.
    SSL stands for Secure Sockets Layer and standard technology which keeps secure our application over the internet.
    SSL is the part of HTTPS protocol and it takes care of the encryption of data.
    It enables a secure connection and prevents hacker attacks because of its encryption algorithm and many security layers.

Implementation of .NET Core Web API Application

Step 1
Create a new .NET Core Web API application

Step 2
Configure your application

Step 3
Provide additional information

Step 4
Next, we create a certificate for the local machine using the following command
    dotnet dev-certs https -ep %USERPROFILE%\.aspnet\https\dockerdemo.pfx -p Pass@*****
    dotnet dev-certs https --trust

Here as you can see, we pass the certificate name and password in the above command and it will create the certificate at %USERPROFILE%\.aspnet\https this location

Step 5
Create a Docker file for our Weather Forecast application
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /app

EXPOSE 443
EXPOSE 80

# copy project csproj file and restore it in docker directory
COPY ./*.csproj ./
RUN dotnet restore

# Copy everything into the docker directory and build
COPY . .
RUN dotnet publish -c Release -o out

# Build runtime final image
FROM mcr.microsoft.com/dotnet/aspnet:6.0
WORKDIR /app
COPY --from=build /app/out .
ENTRYPOINT ["dotnet", "HTTPSCertDemo.dll"]

Step 6
Here using this command, you can create a docker image inside the docker desktop (Note: Make sure docker desktop is working fine on your machine)
docker build . -t ssldemo:v1

Next, we run our application after setting port and certificate details using docker volume.

docker run -p 8081:80 -p 8082:443 -e ASPNETCORE_URLS="https://+;http://+" -e ASPNETCORE_HTTPS_PORT=7001 -e ASPNETCORE_Kestrel__Certificates__Default__Password="Pass@*****" -e ASPNETCORE_Kestrel__Certificates__Default__Path=/https/dockerdemo.pfx -v %USERPROFILE%\.aspnet\https:/https/ ssldemo:v1

Here you can see we provide two ports one is for HTTPS and another one is for HTTPS, also some environmental variables like port, certificate path, and credentials along with docker volume (Note: docker volume is basically the shared directory which persists the data with docker container which is created by the user like in this case we create a certificate and it located at our local system)

Step 7
Also, if we want to manage multiple docker images and their configuration efficiently, in that case, we can use the docker-compose file for managing all our application dynamic settings which we required when the application image is running inside the docker container for that we are going to create a docker-compose YAML file for the application
    version: '3.5'
    services:
      Weatherforecase.Service:
       image: ${DOCKER_REGISTRY-}ssldemo:v1
       build:
        context: ./HTTPSCertDemo
        dockerfile: Dockerfile
       environment:
        - ASPNETCORE_ENVIRONMENT=Development
        - ASPNETCORE_URLS=https://+:443;http://+:80
        - ASPNETCORE_Kestrel__Certificates__Default__Password=Pass@*****
        - ASPNETCORE_Kestrel__Certificates__Default__Path=/https/dockerdemo.pfx
       ports:
        - "8081:80"
        - "8082:443"
       volumes:
        - ~/.aspnet/https:/https:ro

Here, you can see we provide different parameters with the help of environmental variables like docker image name, container name, certificate details, docker volume, and application port numbers

To run your application using the docker-compose YAML file for that use the following commands
docker-compose build
docker-compose up

Here one command is going to build and create a docker image inside the docker desktop and another one runs your application image inside the docker container and configure all dynamic settings which you passed inside the YAML file.

Step 8
Next, in the docker desktop, you can see the application is running inside the docker container

Also, inside the visual studio, we can see the details of containers as shown in the below images

Step 9
Finally, open both application URLs and use the application
http://localhost:8081/swagger/index.html

https://localhost:8082/swagger/index.html

In this tutorial, we are going to cover an approach through which we can read the configuration data in .NET Core - the options pattern.

Why the Options Pattern?
   Options pattern gives the below features
    It can be used to bind configuration data to strongly typed objects.
    It adheres to two important software engineering principles - Encapsulation and Separation of Concerns.
    It provides a mechanism to validate configuration data.

Please refer to the Microsoft documentation for more details.

Tools which I have used for this tutorial:
    Visual Studio 2022 Community Edition – Preview version 17.4 (Preview 2)
    .NET 6.0
    Web API
    Swagger

To begin with, let us create a sample project. The source code can be downloaded from GitHub.

Let us assume that we have the below configuration in appsettings.json
"OptionsTutorial": {
    "InterfaceName" : "IOptions"
}

Create the following class:
public class OptionsTutorial
{
    public const string Position = "OptionsTutorial";
    public string InterfaceName { get; set; }
}

Rules which need to be followed to create this class:
    Must be non-abstract with a public parameterless constructor.
    All public read-write properties of the type are bound.
    Fields are not bound. In the preceding code, “Position” is not bound.
    The “Position” field is used so the string " OptionsTutorial " doesn't need to be hard coded in the app when binding the class to a configuration provider.

Bind the configuration data to strongly typed objects.

In Program.cs class, we need to add the below line to bind the configuration data.
builder.Services
    .Configure< OptionsTutorial>(builder.Configuration.GetSection(OptionsTutorial.Position));

Use IOptions<T> Interface
This interface is registered as a Singleton and can be injected into any service lifetime.

This does not support:
    Read configuration data after the application has started.
    Named Options -  Refer to the Microsoft documentation for more details.

Let us make a few code changes in WeatherForecastController.cs

Add the below variable at the beginning of the class.
private OptionsTutorial _optionsTutorial;

make the below code changes in Constructor.
public WeatherForecastController(ILogger<WeatherForecastController> logger, IOptions<OptionsTutorial> options)
{
    _logger = logger;
    this._optionsTutorial = options.Value;
}

Introduce a new action method as below
[HttpGet]
[Route("optionspattern")]
public IActionResult OptionsPattern()
{
    var interfaceName = this._optionsTutorial.InterfaceName;
    var message = $"interface name from OptionsTutorial - {interfaceName}";
    return Ok(message);
}

Let us debug the action method and the result.

We can see that; the configuration data has been bound to the strongly typed object.

Use IOptionsSnapshot<T> Interface
    This interface is useful in scenarios where options need to be recomputed on every request. Please refer to the Microsoft documentation for more details on this.
    This interface has been registered as Scoped; hence it cannot be injected into Singleton Services.
    It supports Names Options.

Add the below settings in Appsettings.json
"SnapShot": {
    "InterfaceName": "IOptionsSnapshot"
}

Add the below interface and classes
public class SnapShot
{
    public const string Position = "Snapshot";
    public string InterfaceName { get; set; }
}

I have created two interfaces - ISnapShotCheckWithScope.cs and ISnapShotCheckWithSingleton.cs for validating the Singleton as well as Scoped service lifetime

Make the necessary changes in Program.cs
builder.Services.AddScoped<ISnapShotCheckWithScope, SnapShotCheckWithScope>();
/// UnComment this line and see whether the code executed or not.
/// you will get a runtime error
//builder.Services.AddSingleton<ISnapShotCheckWithSingleton, SnapShotCheckWithSingleton>();

As IOptionsSnapshot interface has been registered as Scoped, it cannot be injected into Singleton Services. Please look at the source code available in GitHub to understand more on this.

Let us go ahead and execute the Scoped controller.

Now change from Scoped to Singleton in Program.cs and see how this behaves.
//builder.Services.AddScoped<IOptionsMonitorCheck, OptionMonitorCheck>();
//Uncomment each of the below one at a time and see how this behaves
builder.Services.AddSingleton<IOptionsMonitorCheck, OptionMonitorCheck>();
//builder.Services.AddTransient<IOptionsMonitorCheck, OptionMonitorCheck>();

Successfully execute.

Now let us change to Transient in Program.cs and see.
//builder.Services.AddScoped<IOptionsMonitorCheck, OptionMonitorCheck>();
//Uncomment each of the below one at a time and see how this behaves
//builder.Services.AddSingleton<IOptionsMonitorCheck, OptionMonitorCheck>();
builder.Services.AddTransient<IOptionsMonitorCheck, OptionMonitorCheck>();

Execute successfully.

We have seen how to read configuration data using Options pattern in .NET 6.0. This approach will ensure two engineering principles – encapsulation and separation of concerns.  Hope this article helps you to understand the Options pattern at high level. Thank you for reading my article and please leave your comments in the comment box below.

As Sitecore developers, when we're creating templates, a good practice is to add Standard Values so that fields can have default values or sample values.For this purpose, we can use Sitecore Tokens, this will allow us to dynamically add values to fields, according to the item that is being created by the Content Author.

Tokens

These are the tokens that we can use:

Example

Below we can see an example with the $name token. In this example, we have a field with the name Heading, and at the time of creating a new item, this field will take the name of the item.

Thanks for reading!
Now you know how to add automatic generation of field values and the different tokens you can use in a general way.
If you have any questions or ideas in mind, it will be a pleasure to be able to be in communication with you, and together exchange knowledge with each other.

Nowadays, chat applications have become pretty common. But still, the idea of how a client gets the message from the server without asking for it or in other words, without any event being fired, is remarkable. Such applications are known as real-time applications because they are responsible for live data exchange as used in multiplayer games, social media, or news forecasts. In real-time applications, the server pushes the message to connected clients instantly it becomes available to all connected clients. So, in this article, we will build a real-time chatting/twaddling application using SignalR. SignalR uses simple Web APIs to connect a server Hub to all of its clients basically, by creating server-to-client RPC (Remote Procedure Calls) that calls JavaScript methods in client browsers from the server and vice-versa.
 
Let's start building a twaddling application which would allow the user to share messages to all users as well as to individual users privately. Firstly, we start by creating a new web application project with MVC template in your visual studio. Then, you need to add the Microsoft.AspNet.SignalR NuGet package reference to the newly created project. After adding the reference, we have to register the SignalR Hub APIs by just calling the predefined method MapHubs() of RouteTableCollection at global.asax. But what does registering of hubs mean? It implies creating a route of the hub URLs and maps each to all the hubs in our project. Here is a demo of how API URLs are registered in the global.asax file,
    public class MvcApplication : System.Web.HttpApplication  
    {  
        protected void Application_Start()  
        {  
            BundleConfig.RegisterBundles(BundleTable.Bundles);  
            AreaRegistration.RegisterAllAreas();  
            RouteTable.Routes.MapHubs();  
            RouteConfig.RegisterRoutes(RouteTable.Routes);  
        }  
    }  

Now, we will create our own hub which will communicate with our client-side's javascript by just inheriting Microsoft.AspNet.SignalR.Hub class. This base class provides us with three properties and three virtuals methods, which would help us build our hub, namely,
    Clients: A collection of all the clients connected to the hub.
    Groups: A collection of groups of clients, mainly used for managing groups of clients.
    Context: Stores the details of that client which has called the server method.
    connected(): Triggered when a client joins the hub for the first time.
    OnDisconnected() : Triggered when a client leaves a hub.
    OnReconnected(): Triggered when a client joins the hub for the next time.

By using this properties and method, we create a hub named MasterHub where we will mainly have our broadcasting logics. So, now its time to define the client methods used in MasterHub but before that, we need to create a hub proxy by adding a script reference of ~/signalr/hubs and start that proxy by calling the predefined method $.connection.hub.start(). Here is an example how to create a hub proxy and declare all the client methods,
    <script src="~/signalr/hubs"></script>  
    <script type="text/javascript">  
    $(window).load(function () {  
        let hub = $.connection.masterHub;  
        //define all your client-side methods  
        hub.client.LogIn = function (parameters) {  
        //define the client side logics  
        }  
        //finally start the hub proxy  
        $.connection.hub.start().done(function () {  
            $.fn.TwaddlerLogIn(hub);  
        });  
    });  
    </script>  

Your application is ready for a run. The first step for the client is to get connected to the hub by entering his name.

    public class MasterHub : Hub  
    {  
        private static List<Twaddler> Twaddlers = new List<Twaddler>();  
      
        private static List<TwaddleDetails> Twaddles = new List<TwaddleDetails>();  
      
        public void OnConnected(string TwaddlerName)  
        {  
            if (!Twaddlers.Any(x => Equals(x.ConnectionId, Context.ConnectionId)))  
            {  
                var twaddler = new Twaddler()  
                {  
                    Name = TwaddlerName,  
                    ConnectionId = Context.ConnectionId  
                };  
      
                Twaddlers.Add(twaddler);  
                Clients.Caller.LogIn(twaddler, Twaddlers, Twaddles);  
      
                //broadcast the new twaddler to all twaddlers  
                Clients.AllExcept(Context.ConnectionId).TwaddlerLogIn(twaddler);  
            }  
        }  

Then, the client could send a message to all the clients in the hub, globally.
 

    public void BroadcastTwaddle(TwaddleDetails twaddle)  
    {  
        Twaddles.Add(twaddle);  
        //broadcast the new twaddle to all twaddlers  
        Clients.All.BroadcastTwaddle(twaddle);  
    }  

The client could also send a private message to any specific hub, privately.

    public void PrivateTwaddle(string reciverId, string message)  
    {  
        var reciver = Twaddlers.Find(x => Equals(x.ConnectionId, reciverId));  
        if (reciver == null)  
            return;  
      
        var sender = Twaddlers.Find(x => Equals(x.ConnectionId, Context.ConnectionId));  
        if (sender == null)  
            return;  
      
        var privateTwaddle = new TwaddleDetails()  
        {  
            Twaddler = sender.Name,  
            TwaddleContent = message  
        };  
      
        Clients.Client(reciverId).PrivateTwaddle(sender.ConnectionId, privateTwaddle);  
        Clients.Caller.PrivateTwaddle(reciver.ConnectionId, privateTwaddle);  
    }  

And lastly, inform other clients when this client gets disconnected.

    public override Task OnDisconnected()  
    {  
        var twaddler = Twaddlers.Find(x => Equals(x.ConnectionId, Context.ConnectionId));  
        if (twaddler != null)  
        {  
            Twaddlers.Remove(twaddler);  
      
            //broadcast the twaddler has loggedout to all twaddlers  
            Clients.All.BoradcastTwaddlerLogOut(twaddler);  
        }  
        return base.OnDisconnected();  
    }  

Finally, you have successfully used SignalR to build your own real-time application which allows users to create private as well as global chat rooms by just writing a few server and client methods. Click here to get to the Twaddler project repository.