Response Caching in .Net 6

This post explains how to configure Response Caching Middleware in an ASP.NET Core app using .Net 6. The middleware determines when responses are cacheable, stores responses, and serves responses from cache.

Caching response helps improve the performance and response time of Web APIs where it is possible. But it takes some effort to build out a caching infrastructure and manage it. The Response caching middleware which comes out of the box simplifies the implementation significantly. And also it does not require building custom implementation for caching, plus provides clients the option to choose whether to use a cached value or not.

Create a .Net 6 API, and modify the Program.cs file as below:

using Polly;
using Polly.Extensions.Http;

var builder = WebApplication.CreateBuilder(args);
var httpRetryPolicy = Policy.HandleResult<HttpResponseMessage>(r => !r.IsSuccessStatusCode)
    //.CircuitBreakerAsync(2, TimeSpan.FromSeconds(30));
    .WaitAndRetryAsync(3, retryAttempt => TimeSpan.FromSeconds(retryAttempt));

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddResponseCaching(x => x.MaximumBodySize = 1024);
builder.Services.AddHttpClient("errorApi", c => { c.BaseAddress = new Uri("https://localhost:7250"); });
builder.Services.AddSingleton<IAsyncPolicy<HttpResponseMessage>>(httpRetryPolicy);


var app = builder.Build();

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

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

// UseCors must be called before UseResponseCaching
//app.UseCors();

app.UseResponseCaching();

app.Use(async (context, next) =>
{
    context.Response.GetTypedHeaders().CacheControl =
        new Microsoft.Net.Http.Headers.CacheControlHeaderValue()
        {
            Public = true,
            MaxAge = TimeSpan.FromSeconds(10)
        };

    context.Response.Headers[Microsoft.Net.Http.Headers.HeaderNames.Vary] = new string[] { "Accept-Encoding" };
    await next();
});

app.Run();

This API adds headers to control caching on subsequent requests:

  • Cache-Control: Caches cacheable responses for up to 10 seconds.
  • Vary: Configures the middleware to serve a cached response only if the Accept-Encoding header of subsequent requests matches that of the original request.

Add a ValuesController.cs and a simple Get endpoint:

[HttpGet]
public int Get()
{
    return DateTime.Now.Second;
}

Run the API and hit the Get endpoint through Postman and add Cache-Control Header with value “public” and you’ll observe the cached response for 10 seconds.

Retry and Circuit Breaker Policy example .Net 6 and Polly

In this example, we’ll implement the Wait and Retry and Circuit Breaker policy using .Net 6 Web API and Polly. For more details on what Circuit Breaker is, refer to the MSDN documentation.

Create a WebAPI with ValuesController in .Net 6 which will always return an Exception in the Get call.

using Microsoft.AspNetCore.Mvc;

namespace ExternalAPI.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class ValuesController : ControllerBase
    {

        private readonly ILogger<ValuesController> _logger;

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

        [HttpGet]
        public ActionResult<IEnumerable<string>> Get()
        {
            throw new Exception("Error");
        }

    }
}

Let’s call this ExternalAPI and running on https://localhost:7250/.

Create another .Net 6 WebAPI called CircuitBreaker.Demo and install Polly and Newtonsoft.json Nuget packages.

Configure Polly and HttpClient in Program.cs file as shown below:

using Polly;
using Polly.Extensions.Http;

var builder = WebApplication.CreateBuilder(args);
var httpRetryPolicy = Policy.HandleResult<HttpResponseMessage>(r => !r.IsSuccessStatusCode)
    
    .WaitAndRetryAsync(3, retryAttempt => TimeSpan.FromSeconds(retryAttempt));

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddHttpClient("errorApi", c => { c.BaseAddress = new Uri("https://localhost:7250"); });
builder.Services.AddSingleton<IAsyncPolicy<HttpResponseMessage>>(httpRetryPolicy);


var app = builder.Build();

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

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

Now add the PollyController to call the ExternalAPI using the HttpClient:

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using Polly;

namespace CircuitBreaker.Demo.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class PollyController : ControllerBase
    {

        private readonly ILogger<PollyController> _logger;
        private readonly IHttpClientFactory _httpClientFactory;
        private readonly IAsyncPolicy<HttpResponseMessage> _policy;

        public PollyController(ILogger<PollyController> logger, IHttpClientFactory httpClientFactory, IAsyncPolicy<HttpResponseMessage> policy)
        {
            _logger = logger;
            _httpClientFactory = httpClientFactory;
            _policy = policy;
        }

        [HttpGet(Name = "GetApiResult")]
        public async Task<ActionResult<IEnumerable<string>>> Get()
        {
            var client = _httpClientFactory.CreateClient("errorApi");
            var response = await _policy.ExecuteAsync(() => client.GetAsync("values"));
            response.EnsureSuccessStatusCode();
            return JsonConvert.DeserializeObject<string[]>(await response.Content.ReadAsStringAsync());
        }

    }
}

When you run both the APIs, the call to External APIs is automatically made using Wait and Retry policy after every retryAttempt number of seconds 3 times. After that, the calls are stopped as the ExternalAPI keeps giving 500 error.

CircuitBreaker example:

Now change the Http Retry Policy line in the Program.cs file to:

var httpRetryPolicy = Policy.HandleResult<HttpResponseMessage>(r => !r.IsSuccessStatusCode)
    .CircuitBreakerAsync(2, TimeSpan.FromSeconds(30));

The above line will open the circuit and will start giving Circuit Open Exception after 2 attempts and keep the circuit Open for 30 seconds, which means you cannot make further calls to the API for that duration. The Exception will now be shown as below:

How to create a subdomain?

If you’ve already bought a domain, and don’t want to purchase another for your sub-site, then you can create a sub-domain for your website. It can be a whole different website for which you can give the hyperlink on your main website.

Generally, the domain providers have an option to configure the sub-domain under the domain settings in the cPanel and we need to create A record there.

If you have a VPS or dedicated Server with a Public IP, the configure the IP value of the A record with the Public IP of the Server. So you need to provide following values:

Type: A record

Host: e.g. if your domain is mywebsite.com then put host as blog. So your subsite domain will be blog.mywebsite.com.

Value: Put the Public IP of the VPS or dedicated Server.

TTL: The TTL serves to tell the recursive server or local resolver how long it should keep said record in its cache. Usually, the recommended default is 1 hour but you can change as per your requirement.

Various domain providers like godaddy.com, cloudflare etc. have this kind of interface to point your subdomain to an IP address.

Use jQuery UI dialog yes no

For this example, I’m using jQuery version 3.2.1. The javascript method popupConfirm() can be called on the click of a button event or onchange event of a drop-down. The no-close class is to remove the x button from top-right of the dialog box.

< link href="../Scripts/jquery-ui.css" rel="stylesheet" />
< script src="../Scripts/jquery.js"></script>
< script src="../Scripts/jquery-ui.js"></script>
< style>
	.no-close .ui-dialog-titlebar-close{
		display: none;
	}
< /style>
<script language="JavaScript">   
    $(document).ready(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            width: 400
        });
    });

    function popupConfirm() {
        $("#dialog").dialog({
			buttons: {
				"Yes": function () {
					$("#message").text('You clicked Yes');
					$(this).dialog("close");
				},
				"No": function () {
					$("#message").text('You clicked No');
					$(this).dialog("close");
				}
			},
			dialogClass: "no-close"
		});

		$("#dialog").dialog("open");
    }
</script>

Use the following html for the dialog and message as below.

< div id="dialog" title="Confirmation Required" >
  Are you sure?
< /div >
< div id="message" style="color: red;" >

< /div >

Use onchange method of a drop-down e.g.

< select name = 'types' size='1' onchange='popupConfirm();'> < /select> 

Show multiline text svg circle

For creating a circle using svg, you can follow this post. Then add the below code within the svg view box.

Normally you can use text tag to show some text in a svg component. But in order to show multiline text, we need to use HTML inside foreignObject tag as shown below:

< foreignObject id="content" x="20" y="25" width="100" height="100" >
                    < div >
                        < p id="txt1" style="font-size: 12px;">Text 1< /p >
                        < p id="txt2" style="font-size: 12px;">Text 2< /p >
                    < /div >
                < /foreignObject >

The x, y values should be set according to the svg view box. You can also use normal Javascript to modify the text using innerText property as below:

document.getElementById("txt1").innerText = "New Text 1";

Circular Progress bar svg javascript

In this post, I’ll give the code to create a Circular progress bar which I tried with a Start button and it resets every time you click on the start button and ticks every second for 60 seconds. The start button is shown using media control html code. The start button will re-appear once timer is reset.

If you’re using Asp.net Core MVC template, I’ve put the below code in index.cshtml file.

The HTML is as below:

< div >
            < svg class="progress-ring"
                 width="120"
                 height="120" >
                < circle class="progress-ring__circle"
                        stroke="orange"
                        stroke-width="4"
                        fill="transparent"
                        r="58"
                        cx="60"
                        cy="60" / >
                < text id="play" x="40" y="70" onclick="startTimer()" >▶< /text >
            < /svg >
< /div >

Css is as follows in the site.css file:

.progress-ring {
}

.progress-ring__circle {
    transition: 0.35s stroke-dashoffset;
    transform-origin: 50% 50%;
}

#play {
    cursor: pointer;
    font-size: xx-large;
}

The below Javascript code is going to modify the svg stroke-dashoffset attribute as below in the site.js file:

var i = 0;
var interval;
var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
console.log('radius', radius);
console.log('circumference', circumference);
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;

function setProgress(percent) {
    const offset = circumference - percent / 100 * circumference;
    circle.style.strokeDashoffset = offset;
}

function startTimer() {
    console.log('circumference', circumference);
    circle.style.strokeDashoffset = `${circumference}`;
    document.getElementById("play").textContent = "ok";
    interval = setInterval(increment, 1000);
}

function increment() {
    i = i % 360 + 1;
    var perc = (i / 60) * 100;
    console.log(i);
    if (i === 60) {
        clearInterval(interval);
        document.getElementById("play").textContent = "\u25B6";
        i = 0;
    }
    setProgress(perc);
}

The stroke-dashoffset value is reduced every time to increase the progress with stroke-dasharray. You can play around with the radius to increase the circle size.

Create html div as circle using HTML and css

Create the following div on your HTML page as below:

< div id=”circularDiv” class=”circluarDiv” >< /div >

Add the following css in your html file or common css file that you’re importing:

.circluarDiv {
     width: 100px;
     height: 100px;
     background-color: whitesmoke;
     border: 1px solid black;
     border-radius: 50%;
 }

Please note that the width and height should be equal for the div. Keep the border and background colours distinct to easily recognize the element.

The border-radius is giving rounded corners to the Div.

Send email with classic asp

Below is an example function used in my classic asp code to send e-mail with Attachments. The e-mail is written in HTML format and attachments picked up from the physical path on the Server where the Application is hosted on IIS.

I’m using a hard-coded path in the sample below for the Attachment example. You can create a dynamic string by fetching the path from the DB.

I’m using CDOSYS mail provider object below to send e-mail.

Function GenerateEmailCEF(senderemail, recipient)
MailProvider = "CDOSYS"
EmailFmt = 0 'For HTML, 1 is for Plain Text ' SMTP Server Config
Dim rsSMTPSendUsing, rsSMTPServer, rsSMTPServerPort, rsSMTPSendUsername, rsSMTPSendPassword, rsSMTPUseSSL Dim SMTPSendUsing, SMTPServer, SMTPServerPort, SMTPSendUsername, SMTPSendPassword, SMTPUseSSL

SMTPSendUsing = "1"
SMTPServer = "smtp.xx.xx" 'Change as per your configuration.
SMTPServerPort = "25"
SMTPSendUsername = ""
SMTPSendPassword = ""
SMTPUseSSL = "false"

if MailProvider = "CDONTS" then set objMail=CreateObject("CDONTS.NewMail")

if MailProvider = "CDOSYS" then set objMail =CreateObject("CDO.Message")

objMail.From = senderemail
objMail.To = recipient
objMail.Subject = "Test Subject"

if MailProvider = "CDONTS" then objMail.MailFormat = EmailFmt
if MailProvider = "CDONTS" then objMail.BodyFormat = EmailFmt

'Created only HTML format
emailbod = "<html?<HEAD?<TITLE?</TITLE?</HEAD?<BODY?" 'Fix this
emailbod = emailbod & "<BR?Mail Body." 'Fix this

'Add attachments to mail.
newfn = "c:\Data\myfile.pdf" 'Path on the Server.

if MailProvider = "CDONTS" then execute ("objMail.AttachFile(" & newfn & ")")

if MailProvider = "CDOSYS" then execute ("objMail.AddAttachment(" & newfn & ")")

if MailProvider = "CDONTS" then objMail.Body = emailbod
if MailProvider = "CDOSYS" then objMail.HTMLBody = emailbod

objMail.BodyPart.Charset = "UTF-8"
objMail.HTMLBodyPart.Charset = "UTF-8"

if MailProvider = "CDOSYS" then
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/sendusing") = SMTPSendUsing
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpserver") = SMTPServer
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpserverport") = SMTPServerPort
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpusessl") = SMTPUseSSL

if SMTPSendusername <> "" then
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/sendusername") = SMTPSendusername
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/sendpassword") = SMTPSendPassword
objmail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate") = 1
end if

objmail.Configuration.Fields.Update
end if

objMail.Send
set objMail=Nothing
End Function

Download word file without Protected View .Net ReactJS

I have an Intranet Application where a .docm template downloaded from a ReactJS UI as a blob is opening in Protected View on the users’ machines. This is happening when downloading in browsers other than IE or Edge browser in IE mode.

When you download the document from Chrome or other browsers, MS Word is considering it as an Internet Application. Hence, the checkbox for Protected View is applying these changes and downloading it in Protected View.

Enable Protected View For Files Originating From The Internet. This setting controls documents opened from a website.

The code to download this as a blob is in ReactJS is available here.

However, if you generate the .docm file on the Server where the API is located and put it in a location on the Server itself. Create a Virtual Directory in IIS to make the document downloadable as http. So just return the hyperlink at the Client-side Javascript. You can receive this hyperlink and assign to anchor link clicking it through code.

var downloadUrl = response.data.Path;
        const link = document.createElement("a");
        link.id = "DownloadLink";
        link.href = downloadUrl;
        link.setAttribute("download", "filename");
        document.body.appendChild(link);
        link.click();
        document.getElementById("DownloadLink").outerHTML = "";

This will prevent it from opening in Protected View.

Also, if your word file has Macros, read-only fields become editable when you click on “Enable Editing” when you open the document in Protected View until you enable the Macros.

Change highlight color Autocomplete Material UI ReactJS

Create the below styles in your ReactJS component:

const styles = (theme) => ({
  ////....
  option: {
    // Hover
 with light-grey
    '&[data-focus="true"]': {
      backgroundColor: '#F8F8F8',
      borderColor: 'transparent',
    },
    // Selected
 has dark-grey
    '&[aria-selected="true"]': {
      backgroundColor: theme.palette.grey.A200,
      borderColor: 'transparent',
    },
  },
});

You can choose the colors based on your preference on selected and for mouse-over for backgroundColor property.

Add the following property in your AutoComplete component

classes={{
	  option: classes.option
	}}

as shown below:

<Autocomplete
	id="combo-box-1"
	options={myvalues}
	getOptionLabel={(option) => option.value}
	size="small"
	className={classes.formControlAutopopulate}
	classes={{
	  option: classes.option
	}}
	value={myvalues.find((x) => x.id === this.state.ID)}
	disabled={this.props.isLocked}
	onChange={this.handleSelected}
	renderInput={(params) => (
	  <TextField
		{...params}
		variant="outlined"
		placeholder="Please Select Value"
		fullWidth
	  />
	)}
/>