Using Razor, how do I render a Boolean to a JavaScript variable?

This is our C# model;

public class Foo
{
  public bool IsAllowed {get; set;} = false;
}

We would like to read this property in JS;

let isAllowed = '@Model.IsAllowed' === '@true';
if (isAllowed)
{
    console.log('Allowed reading..');
}
else
{
    console.log('Reading not allowed..');
}

Reference

https://stackoverflow.com/questions/14448604/using-razor-how-do-i-render-a-boolean-to-a-javascript-variable

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean

Uninstall and Reinstall Angular

We are interested in a specific angular version and NOT in a specific angular-cli version (angular-cli is just a tool after all).

Here are the steps (All these steps are done in npm);

If you’re not sure of the angular-cli version installed in your environment, uninstall it.

npm uninstall -g @angular/cli

Then, run (–force flag might be required).

npm cache clean

or, if you’re using npm > 5.

npm cache verify

Install an angular-cli specific version.

npm install -g @angular/cli@wished.version.here

Create a project

ng new you-app-name

The resulting white app will be created in the desired angular version.

I have not found any page displaying the compatibility matrix of angular and angular-cli. So I guess the only way to know what angular-cli version should be installed is to try various versions, create a new project and checkout the package.json to see which angular version is used.

angular versions changelog Here is the changelog from github reposition, where you can check available versions and the differences.

Reference

https://stackoverflow.com/questions/43344600/how-to-install-a-specific-version-of-angular-with-angular-cli

Angular 17 Local Install

Follow Steps To Install Angular CLI locally.

Disclaimer: I have Angular 16 Installed Globally. and will be installing 17 Locally (To install globally, follow this)

Create a folder in your local drive, say AngularTest.

> mkdir AngularTest
> cd AngularTest

Install your angular version (Make sure while installation you are not using -g at the end of the installation command);

> npm install @angular/cli@  (for any other version)
> npm install @angular/cli   (for current version)

Type following command in your AngularTest folder to confirm your version

> ng version

This will list down version for Angular CLI, Node, Package Manager and OS. If Angular is not compatible with Node, you will see a yellow message at the bottom of window. In that case you need to figure out correct node version for Angular.

Cheers!

You may be interested in Angular Getting Started Guide.

If you want to uninstall angular, follow this

Store Complex Object in TempData

To pass object from controller method to controller method use this extension methid;

public static class TempDataExtensions
{
    public static void Put<T>(this ITempDataDictionary tempData, string key, T value) where T : class
    {
        tempData[key] = JsonConvert.SerializeObject(value);
    }

    public static T Get<T>(this ITempDataDictionary tempData, string key) where T : class
    {
        object o;
        tempData.TryGetValue(key, out o);
        return o == null ? null : JsonConvert.DeserializeObject<T>((string)o);
    }
}

And, you can use them as follows:

Say objectA is of type ClassA. You can add this to the temp data dictionary using the above mentioned extension method like this:

TempData.Put("key", objectA);

And to retrieve it you can do this:

var value = TempData.Get<ClassA>("key") where value retrieved will be of type ClassA

To configure TempData in ASP.NET Core, Refer to this article

Reference

https://stackoverflow.com/questions/34638823/store-complex-object-in-tempdata

Passing TempData value from controller to controller

Refer to following code;

TempData["error"] = true;
return RedirectToAction("YourViewName", "YourControllerName);       

On Redirect, TempData will become NULL. To solve this, try string test first;

On first controller method, set this;
TempData["error"] = "There is an error"

On a second controller method, get this;
var message = TempData["error"]

if you can see the message in second controller, no need to make any configuration changes. The problem is with your complex object serialization/deserialization

If TempData string (shown above) doesn’t work, then you need to make these configuration changes.

builder.Services.Configure<CookieTempDataProviderOptions>(options =>
{
    options.Cookie.Name = "TEMPDATA";
    //you have to avoid setting SameSiteMode.Strict here 
    options.Cookie.SameSite = SameSiteMode.Lax;
    options.Cookie.IsEssential = true;
   
});

We can pass values as query string in RedirectToAction method but we don’t want to show sensitive data in URL. So the alternate is to pass it as TempData that is using session at the backend or simply use Session.

Here is a simple comparison;

Maintains data betweenViewData/ViewBagTempDataHiddenFieldsSession
ControllerToControllerNOYESNOYES
ControllerToViewYESNONOYES
ViewToControllerNONOYESYES

If you like to store/retrieve complex objects between controllers using TempData, use this extension method;

Reference

https://learn.microsoft.com/en-us/aspnet/core/fundamentals/app-state?view=aspnetcore-8.0#tempdata

https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.mvc.cookietempdataprovideroptions.cookie?view=aspnetcore-7.0