April 30, 2024

CSS Properties - Inherit, Initial and Unset Values

All CSS properties have 3 basic values in common: inherit, initial and unset.

Here is quick summary for these values:

  • initial: The default value for the property (the browser default).
  • inherit: Get the property from the parent element.
  • unset: Acts as either inherit or initial. It’ll act as inherit if the parent has a value that matches, or else it will act as initial.

Example CSS:

    <style>
        div {
            color: red;
            font-size:larger;
        }

        .some-design {
            color: blue;
        }

        .unset {
            color: unset;
        }

        .initial {
            color: initial;
        }
    </style>

Example HTML:

    <div>
        <div>Text in this (parent) div element is red.</div>
        <div class="some-design">This div's css make it blue.</div>
        <div class="unset">(color => unset): The color is unset 
             (red, because it is inherited from the parent div).</div>
        <div class="initial">(color => initial): The color is initial 
             (black, the browser default).</div>
    </div>

It will display the output like:

JS Geolocation API – Use watchPosition()

The watchPosition() method of the Geolocation interface is used to register a handler function that will be called automatically each time the position of the device changes. You can also, optionally, specify an error handling callback function.

This method retrieves periodic updates about the current geographic location of the device, allows to detect a change in position of device. The location object contains geographic coordinates with information about speed.

Like we have 3 parameters in getCurrentPosition() method, watchPosition() accepts the same:

  • success: A callback function that retrieves the location information.
  • error (Optional): An optional callback function that takes a GeolocationPositionError object as an input parameter.
  • options (Optional): This optional parameter specifies a set of options for retrieving the location information.

    You can specify:

    • Accuracy of the returned location information
    • Timeout for retrieving the location information
    • Use of cached location information
Return value: An integer ID that identifies the registered handler. The ID can be passed to the Geolocation.clearWatch() to unregister the handler and stop receiving location updates.

Example Code:

function onSuccess(position) {
	//do something with position data.
	console.log("Latitude: " + position.coords.latitude);
	console.log("Longitude: " + position.coords.longitude);
}

function onError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      console.log("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      console.log("Location information is unavailable.");
      break;
    case error.TIMEOUT:
      console.log("The request to get user location timed out.");
      break;
    case error.UNKNOWN_ERROR:
      console.log("An unknown error occurred.");
      break;
  }
}

// Options: throw an error if no update is received every 30 seconds.
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 30000 });

Related Post(s):

March 21, 2024

JS Geolocation API – getCurrentPosition with options parameter

In the last post (JS Geolocation API – Get a User's Location) we have covered navigator.geolocation.getCurrentPosition() method to get user's location. We have used the success and error callbacks to receive the position object or report error.

The method getCurrentPosition() also accepts an options object as third paramter (optional).

This options object allows you to specify:

  • enableHighAccurancy (default false): if set to true, response is slower and more accurate.
  • maximumAge (default 0): milliseconds when cached value is valid, the device may decide to use valid cached data instead of sensor measure. Represents age for the returned position value (up until this age it will be cached and reused if the same position is requested again, after this the browser will request fresh position data)
  • timeout (default infinity): milliseconds before the API gives up and calls the error handler (the second parameter).

The example below calls getCurrentPosition() with both success and error callbacks, and pass the options object in third argument:

var options = {
  enableHighAccuracy: true,
  timeout: 5000, //timeout 5 seconds
  maximumAge: 10000 //(location) age 10 seconds
};

navigator.geolocation.getCurrentPosition(success, error, options);

Related Post(s):

JS Geolocation API – Get a User's Location

The JavaScript Geolocation API provides access to geographical location data associated with a user's device. This can be determined using GPS, WIFI, IP Geolocation and so on.

Geolocation is most accurate for devices with GPS, like smartphones.

To protect the user's privacy, it requests permission to locate the device. If the user grants permission, you will gain access to location data such as latitude, longitude, altitude and speed etc.

The Geolocation API is available through the navigator.geolocation object.

If the object exists, geolocation services are available. You can test for the presence of geolocation:

if ("geolocation" in navigator) {
  console.log("geolocation is available");
} else {
  console.log("geolocation is not available");
}

navigator.geolocation object provides the method getCurrentPosition() to return the user's position.

There are three possible arguments with this method:

  • A success callback (required)
  • An error callback (optional)
  • An options object (optional)

The example below calls getCurrentPosition() with both success and error callbacks, and returns the latitude and longitude of the user's position:

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(usePositionData, useError);
  } else {
    console.log("Geolocation is not supported by this browser.");
  }
}

function usePositionData(position) {
	//do something with position data.
	console.log("Latitude: " + position.coords.latitude);
	console.log("Longitude: " + position.coords.longitude);
}

function useError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      console.log("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      console.log("Location information is unavailable.");
      break;
    case error.TIMEOUT:
      console.log("The request to get user location timed out.");
      break;
    case error.UNKNOWN_ERROR:
      console.log("An unknown error occurred.");
      break;
  }
}

Related Post(s):

February 27, 2024

CSS - Using media query features

Media Query features define the style for specific characteristics of a given user agent, output device, or environment.

Media features can be either range or discrete.

Discrete features take their value from an enumerated set of possible keyword values. For example, the discrete orientation feature accepts either landscape or portrait.

@media print and (orientation: portrait) {
  colod: red;
}

Many range features can be prefixed with min- or max- to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's viewport width is equal to or narrower than 1000px:

@media (max-width: 1000px) {
  colod: blue;
}

An alternative syntax for above condition is to use ordinary mathematical comparison operators >, <, >=, or <=.

@media (width <= 1000px) {
  colod: blue;
}

@media (width <= 1000px) is the equivalent of @media (max-width: 1000px).

These are some other commonly used media features:

  • orientation: Orientation of the viewport (landscape or portrait)
  • max-height: Maximum height of the viewport
  • min-height: Minimum height of the viewport
  • height: Height of the viewport (including scrollbar)
  • max-width: Maximum width of the viewport
  • min-width: Minimum width of the viewport
  • width: Width of the viewport (including scrollbar)

Related Post(s):

CSS - Using media queries

Media queries allow you to conditionally apply CSS styles depending on a device's media type (such as screen, print). You can also specifiy other features or characteristics such as screen resolution or orientation etc.

A media query is composed of an optional media type and any number of media feature expressions, which may be combined using logical operators.

Media types describe the general category of a given device, mainly we are using three basic types screen, print, and all.

  • screen: used for websites commonly designed (for computer screens, tablets, smart-phones etc).
    @media screen {
      colod: red;
    }
    
  • print: used for printing (print preview mode)
    @media print {
      colod: blue;
    }
    
  • all: for all devies, there is no filter for any specific device category.
    @media all {
      colod: green;
    }
    
The mediatype is optional (if omitted, it will be set to all).
@media {
  colod: green;
}

You can also target multiple devices types. For instance, this @media rule uses two media queries to target both screen and print devices:

@media screen, print {
  colod: green;
}

Related Post(s):

January 28, 2024

git shows files as modified after adding to .gitignore

In Visual Studio, once the .Net project is setup with git, you might notice that it will keep track for extra files, like autogenerated files in obj/debug folders.

You can ignore these selected folders/files by using .gitignore file.

To ignore debug, release, bin and obj folders etc., you can make these entries in .gitignore file.

[Dd]ebug/
[Rr]elease/
[Bb]in/
[Oo]bj/

After settings these changes you might notice that git is still tracking the files in these folders.

The reason is that these are the changes before the .gitignore file is updated.

To fix this issue you need to removes all files that have been cached (as being 'tracked'), then re-add files based on the .gitignore file entries.

Here are the steps, notice the dot (.) in the end of first 2 commands, this . is part of command syntax:

  • Remove all files recursively from index that are cached (being tracked).
    git rm -r --cached .
    

    rm is to remove files, -r is to remove recursively.

  • Add all files that have changed (re-add the files). This command will add all files except those which are mentioned in .gitignore.
    git add .
    
  • This command will commit your files again and remove the files you want to ignore, but keep them in your local directory.
    git commit -am "Remove ignored files"
    

January 27, 2024

How to set up git server on local machine (Windows)

To configure git server on local windows machine, you can follow these steps:

Setup Git Server Repo:

  1. Go to folder, where you want to initialize the server, specify a name without spaces (else you will need to use quotes whenever accessing this folder)
  2. Open this folder in command prompt and type this command to initiate server repo.
    //git init <repo-name>.git --bare
    
    git init mylocalrepo.git --bare
    
    

    mylocalrepo is the repository name.

    (Note: to avoid any issues later, its better to append the suffix '.git' to the repository name)

The git server repo is setup.

Setup Git Client/Clone:

  1. Go to the folder, where you want to initialize the client.
  2. Open this folder in command prompt and type this command to initiate client repo.
    //git clone <path_to_your_server>
    
    git clone C:\_Data\Test\GitServer\mylocalrepo.git
    
    You may need to change the back-slash "\" to forward-slash "/" in the path.

The client repo is setup.

You can try to make chages in client repo and push to git server.

Manually create a new file (readme.txt) in client folder, and make some changes.

You can stage this file:

git add .

Commit the changes with custom message:

git commit -m "added readme file"

Push the changes to git server:

git push

December 31, 2023

Microsoft.Data.SqlClient.SqlException: The certificate chain was issued by an authority that is not trusted

I faced this error while using the Entity Framework Core with .Net 6.0,

Microsoft.Data.SqlClient.SqlException: 'A connection was successfully established 
with the server, but then an error occurred during the login process. 
(provider: SSL Provider, error: 0 - The certificate chain was issued by an authority
that is not trusted.)'

Breaking change in Microsoft.Data.SqlClient 4.0.0.

I found there is breaking change in Microsoft.Data.SqlClient - 4.0.0 .

Changed Encrypt connection string property to be true by default:
The default value of the Encrypt connection setting has been changed from false to true. 
With the growing use of cloud databases and the need to ensure those connections are secure, 
it's time for this backwards-compatibility-breaking change.

Ensure connections fail when encryption is required:
In scenarios where client encryption libraries were disabled or unavailable, 
it was possible for unencrypted connections to be made when Encrypt was set to true
or the server required encryption.

Solution

The quick-fix is to add Encrypt=False to your connection-strings.

Alongwith Encrypt=False, setting Trusted_Connection=True would also help.

Another workaround if you are using local computer is to set

TrustServerCertificate=True

Please note that, setting TrustServerCertificate=True is not a real fix. The more authentic part of the solution is installing a CA signed certificate.

References:

December 26, 2023

Serialize with System.Text.Json.JsonSerializer

The System.Text.Json namespace provides functionality for serializing to and deserializing from JavaScript Object Notation (JSON). When serializing C# objects to json, by default all public properties are serialized.

Lets say we have this User class object we want to serialize:

 class User
 {
     public int Id { get; set; }
     public string Name { get; set; }
     public string? Email { get; set; }
     public string Password { get; set; }
 }

var obj = new User
 {
     Id = 1,
     Name = "Idrees",
     Email = null,
     Password = "123"
 };

If we serialize this object:

string txtJson = Json.JsonSerializer.Serialize(obj);

We will get the this json:

{"Id":1,"Name":"Idrees","Email":null,"Password":"123"}

If we want to skip the Password property, we can use the attribute [JsonIgnore] on that property.

After this change the User class will look like this:

 class User
 {
     public int Id { get; set; }
     public string Name { get; set; }
     public string Email { get; set; }
     [JsonIgnore]
     public string Password { get; set; }
 }

Serializing now will give you this result:

{"Id":1,"Name":"Idrees","Email":null}

Notice that the Password property is no longer serialized.

You can also specify the condition for exclusion by setting the [JsonIgnore] attribute's Condition property.

In above example, we have set the null value for Email property and it is showing null in serialized json text.

To exclude that property we can specify the condition to ignore when it has null value. After this change the User class will become like this:

 class User
 {
     public int Id { get; set; }
     public string Name { get; set; }
     [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public string? Email { get; set; }
     [JsonIgnore]
     public string Password { get; set; }
 }

The serialization will remove the Email property and generate this json.

{"Id":1,"Name":"Idrees"}

References:

Repeat a String in C#

C# do not have built-in function, as of C# 12.0, to repeat a string for x number of times.

Lets say we have a string variable:

	string text = "-"; //the string we need to repeat
	int n = 5; // number-of-times to repeat

Here are some ways you can use to repeat a string value:

Using Enumerable.Repeat and string.Concat:

	string result1 = string.Concat(Enumerable.Repeat(text, n));

Using StringBuilder:

	string result2 = new StringBuilder().Insert(0, text, n).ToString();

Using Enumerable.Range, Select with string.Concat

	var repeatedStrings = Enumerable.Range(0, n).Select(i => text);
	string result3 = string.Concat(repeatedStrings);

Using String() constructor

If the required string is single character, you can also use String constructor.

	string result4 = new String('-', n);

November 28, 2023

C# Caller Argument Expression Attribute

The System.Runtime.CompilerServices.CallerArgumentExpressionAttribute enables you to receive the expression passed as an argument. It captures the expression passed for another parameter as a string.

This would be helpful specially in diagnostic libraries which need to provide more details about the expressions passed to arguments. By providing the expression that triggered the diagnostic, in addition to the parameter name, developers have more details about the condition that triggered the diagnostic.

Lets say we have this method to log the method name.

public static void LogMethodName(string name, 
                 [CallerArgumentExpression("name")] string? message = null)
{
   if (string.IsNullOrEmpty(name))
   {
      //we are printing the 'message' which represents the actual expression 
      //being passed for parameter 'name'
      throw new ArgumentException($"Argument validation: <{message}>", name);
   }

   Console.WriteLine($"Method {name} is called.");
}

Here we are calling above method:

public static void RegisterUser()
{
    LogMethodName(nameof(RegisterUser));
}

In RegisterUser method, we are calling LogMethodName with the value as name of RegisterUser. The expression used for name parameter, is injected by the compiler into the message argument.

In this example, the expression passed for the name parameter is nameof(RegisterUser), so the value of message parameter in LogMethodName is "nameof(RegisterUser)"

References:

C# documentation comments - para and cref

C# documentation comments use XML elements to define the structure of the output documentation. It helps to write the information about code and makes it more readable and understandable.

<para> tag

The <para> tag can be used inside a tag, such as <summary>, <remarks>, or <returns>. It allows you to add structure to the text.

Here the <para> is used to add another line (paragraph) in the summary section.

/// <summary>
/// This property will keep the type of project.
///     <para>
///         The Type of project defined in the document.
///     </para>
/// </summary>
public string ProjectType { get; set; }

It will display this information on mouse hover like this:

cref attribute

The cref attribute in an XML documentation tag means "code reference." It specifies that the inner text of the tag is a code element, such as a type, method, or property.

Here the cref attribute is referencing another class which contains constant string values.

/// <summary>
///     <para>
///         Use <see cref="MyNamespace.ProjectStatus"/> class.
///     </para>
/// </summary>
public string Status { get; set; }

On mouse hover it will display like this:

Note that the ProjectStatus will appear as link, and will take you to the definition of class when clicked.

References:

October 29, 2023

Kendo UI Grid - Nested child grids

To add hierarchy or nested child grids in Kendo UI Grid component, we can use the detailInit event for the parent grid and initialize the next level of hierarchy.

Lets say we have the following function which will return dummy data based on ParentAccountID.

private getGridData(parentAccountID: string) {
	var data = [
		{
			"RowLabel": "Initial Balance",
			"AccountID": "1",
			"AccountNo": 1,
			"AccountName": "Account1",
			"AccountTitle": "1 - Account1",
			"ParentAccountID": null,
		},
		{
			"RowLabel": "Initial Balance",
			"AccountID": "2",
			"AccountNo": 2,
			"AccountName": "Account2",
			"AccountTitle": "2 - Account2",
			"ParentAccountID": null,
		},
		{
			"RowLabel": "Initial Balance",
			"AccountID": "3",
			"AccountNo": 3,
			"AccountName": "Account3",
			"AccountTitle": "3 - Account3",
			"ParentAccountID": "1",
		},
		{
			"RowLabel": "Initial Balance",
			"AccountID": "4",
			"AccountNo": 4,
			"AccountName": "Account4",
			"AccountTitle": "4 - Account4",
			"ParentAccountID": "2",
		}
	];

	var tempData = data;
	tempData = tempData.filter((obj) => {
		return obj.ParentAccountID === parentAccountID;
	});
		
	return tempData;
}

Here is how we can define the grid configuration to call above function to get data for ParentAccountID.

private createDataInquiryGrid3() {

	var tempData = this.getGridData(null);//Pass null as ParentAccountID for 1st level data.
	
	var element = $("#grid").kendoGrid({
		dataSource: {
			data: tempData,
		},
		height: 600,
		sortable: false,
		pageable: false,
		detailInit: this.detailInit,//this event will define child grid configuration
		dataBound: function () {
			this.expandRow(this.tbody.find("tr.k-master-row").first());
		},
		columns: [
			{ field: "AccountTitle", title: " ", aggregates: ["count"] },
			{ field: "AccountNo", title: "AccountNo" },
			{ field: "AccountName", title: "AccountName" },
		]
	});
}

private detailInit(e) {
	//e.data contains the current row's data-object.
	var getDataFunction = window["getGridData"];
	var tempData = getDataFunction(e.data.AccountID);
	
	$("<div/>").appendTo(e.detailCell).kendoGrid({
		dataSource: {
			data: tempData,
		},
		scrollable: false,
		sortable: false,
		pageable: false,
		columns: [
			{ field: "AccountTitle", title: " ", aggregates: ["count"] },
			{ field: "AccountNo", title: "AccountNo" },
			{ field: "AccountName", title: "AccountName" },
		]
	});
}

It will display the grids like this:

With detailInit event you can add multiple level of nested grids using the same event in nested grids.

References:

Related Post(s):

October 28, 2023

Kendo UI Grid - Column Template

Kendo UI grid will display the column data in table format. If we need to customize the display value for specific column we can use the template function. It allows us to define the template which renders the actual content for that column.

columns array can be defined like this:

columns: [
    { field: "AccountTitle", title: "AccountTitle"},
    { field: "TransactionType", title: "Type" },
    { field: "DatePosting", title: "Date", format: "{0:dd/MM/yyyy}" },
	{
		field: "Status",
		template: function (dataRow) {
			var linkHtml = "";
			if (dataRow.StatusNo == '1') {
				linkHtml = "<span style='color:green;'>Active</span>";
			}
			else {
				linkHtml = "<span style='color:red;'>Deactive</span<";
			}
			return linkHtml;
		},
		title: "Status"
	},
]

Note that Status column, we have defined a template function, which will accept the dataRow as parameter and return the final html as string, which the Kendo Grid will display as cell's content.

References:

Related Post(s):

September 30, 2023

Enable Tag Helper using @tagHelperPrefix

The @tagHelperPrefix directive allows you to specify a tag prefix string to enable Tag Helper support and to make Tag Helper usage explicit.

For example, you could add the following markup to the Views/_ViewImports.cshtml file:

@tagHelperPrefix cst:

This allows you to enable Tag Helper support by using this prefix (cst). Only those elements using the prefix cst, support the Tag Helpers (Tag Helper-enabled elements have a distinctive font/color).

In the code image below, the <label> element have the Tag Helper prefix (cst), so the Tag Helper is enabled for this element. While the <input> element doesn't have Tag Helper prefix (cst), so Tag Helper is not enabled for this element, this is just a regular HTML element.

The same hierarchy rules that apply to @addTagHelper also apply to @tagHelperPrefix.

References:

Related Post(s):

Tag Helper scope with _ViewImports file

  • The _ViewImports.cshtml can be added to any view folder, and the view engine applies the directives from both that file and the Views/_ViewImports.cshtml file.
  • The _ViewImports.cshtml file is additive, If you add an empty Views/Home/_ViewImports.cshtml file for the Home views, there would be no change because it will import all tag helpers from Views/_ViewImports.cshtml file.
  • If you add new tag helpers in Views/Home/_ViewImports.cshtml file for the Home views, it will import all tag helpers from Views/_ViewImports.cshtml file, also it will import all tag helpers from Views/Home/_ViewImports.cshtml file.
  • Any new @addTagHelper directives you add to the Views/Home/_ViewImports.cshtml file (that are not in the default Views/_ViewImports.cshtml file) would expose those Tag Helpers to views only in the Home folder.

References:

Related Post(s):

August 28, 2023

Remove Tag Helpers with @removeTagHelper

Remove Tag Helpers with @removeTagHelper

The @removeTagHelper removes a Tag Helper that was previously added by @addTagHelper.

It has the same two parameters as @addTagHelper:

@removeTagHelper *, MyApplicationTagHelpers

For example, when you want to restrict a specific Tag Helper on a particular view, you can apply the @removeTagHelper to remove the specified Tag Helper.

Using @removeTagHelper in a child folder's _ViewImports.cshtml file (e.g. Views/Folder/_ViewImports.cshtml), it removes the specified Tag Helper from all of the views in that Folder.

Opting out of individual Tags

Instead of removing the Tag Helper from a View, you can also disable a Tag Helper at the element level with the Tag Helper opt-out character ("!").

For example, we can disable the Email validation in the <span> with the Tag Helper opt-out character:

<!span asp-validation-for="Email" class="text-danger"></!span>

In this case, the Tag Helper will be disabled on a single element (<span> in this case), rather than all elements in a View.

The Tag Helper opt-out character must be applied to the both opening and closing tags.

References:

Related Post(s):

Custom Tag Helpers in ASP.NET Core

Tag Helper allows you to add or modify HTML elements from server-side code. In Razor markup, the Tag Helper looks like standard HTML elements. It provides more productive syntax than manually writing the C# Razor markup.

Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files.

(Microsoft Docs - Tag Helpers in ASP.NET Core)

To create a custom Tag Helper, you need to inherit from built-in TagHelper class. For example we have this Tag Helper,

public class StringTagHelper : TagHelper
{
   public override void Process(TagHelperContext context, TagHelperOutput output)
   {
      output.TagName = "span";
      output.TagMode = TagMode.StartTagAndEndTag;

      output.Attributes.Add("data-entity", "customer");

      base.Process(context, output);
   }
}

This Tag Helper will output the span element and add a custom attribute data-entity with value customer.

In the Razor markup, we can use this Tag Helper as:

<string field="CustomerID"></string>

Ofcourse we can add any extra/custom attributes to html tags, these will not interrupt with Tag Helpers.

The browser will render the final output as:

<span field="CustomerID" data-entity="customer"></span>

To use the Tag Helpers in the views, you need to set its scope, usually we define the scope in Views/_ViewImports.cshtml file.

Tag Helpers scope is controlled by a combination of @addTagHelper, @removeTagHelper, and the "!" opt-out character.

To make the required TagHelper avialable for one or more views we use @addTagHelper.

If you create a new ASP.NET Core web app named MyApplicationTagHelpers, the following Views/_ViewImports.cshtml file will be added to your project:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, MyApplicationTagHelpers

Some points for above code:

  • The code above uses the wildcard syntax ("*") to specify that all Tag Helpers in the specified assembly (Microsoft.AspNetCore.Mvc.TagHelpers) will be available to every view file in the Views directory or subdirectory.
  • The first parameter after @addTagHelper specifies the Tag Helpers to load ("*" is used to load all Tag Helpers)
  • The second parameter "Microsoft.AspNetCore.Mvc.TagHelpers" specifies the source assembly from which we want to load the Tag Helpers. It can be current project's assemly or any reference to external library.

References:

Related Post(s):

July 24, 2023

MSB3037 - NSwag- openapi2csclient exited with code -1

I was working with Visual Studio 2022 (Version 17.6.5). The project has consumed the nuget package for NSwag.ApiDescription.Client (version 13.19.0). It was working fine.

When I moved the project to another machine, it starts generating this error on Rebuild:

The command ""C:\Users\x\source\repos\G21-V5-Web\packages_rep\nswag.msbuild\13.0.5\build\
../tools/Win/NSwag.exe" 
openapi2csclient /className:ServiceClient /namespace:MyService 
/input:C:\Users\x\source\repos\G21-V5-Web\swagger.json /output:obj\swaggerClient.cs " 
exited with code -1.

I found out the root cause in my case was the whitespaces in the path to the project.

We need to fix in the file:

C:\Users\x\source\repos\G21-V5-Web\packages_rep\nswag.apidescription.client\13.0.5
\build\NSwag.ApiDescription.Client.targets

You will find line # 21 similar to this:

    <Command>%(Command) /input:%(FullPath) /output:%(OutputPath) %(Options)</Command>

To make swagger work with whitespaces, change this line by adding double quotes around the path:

    <Command>%(Command) /input:"%(FullPath)" /output:"%(OutputPath)" %(Options)</Command>

My project works fine after this fix.