'Angular 12 .Net 6 value null being passed to api as "null"

I have an angular 12 UI that is communicating with a .net 6 API. When a parameter in a query string is null or undefined the API is interpreting it as a string value of "null" or "undefined". Relevant code below

angular code:

getDummyUser(type: string, testId: string):
Observable<UserDto> {
var url = `api/users/get-dummy-user?type=${encodeURIComponent(type)}&testId=${encodeURIComponent(testId)}`;
return this.httpClient.get<any>(url)
  .pipe(
    finalize(() =>
      this.hideLoadingIndicators()
    ),
    catchError(err => {
      return throwError(err);
    })
  );

}

.net 6 api parameter signature

[HttpGet]
    [Route("get-dummy-user")]
    public async Task<IActionResult> GetDummyUser
        (
        string type, 
        string testId
        )

I have tried using the [FromQuery] attribute but the result is the same. I also cannot send '' from the angular app as the API will then throw a 400 error (bad request). Has anyone had any experience in this? Thanks in advance

c++sharp.netangularasp.net-core.net-core


Solution 1:[1]

Add filter model in Angular and use it to send the request from Angular to .net example : FiltersModel.ts

export class GetDummy{

    type: string| null
    testId: string |null

  
}

Component.ts (where you send the request to backend)

 let filters:GetDummy = new GetDummy();
 filters.type="exampleType";
   let filterToSend="";
    Object.entries(filters).forEach(res=>{
      filterToSend+="&"+res[0]+"="+res[1];
   
    }); 
     var url='api/users/get-dummy-user?'+filterToSend);

And with this the request will be

http//:api/users/get-dummy-user?type="exampleType"

it's a way to send only the needed options to backend and the testId will be not be send as options

Solution 2:[2]

I don't know if this is something to do with new .net 6 or angular 12 but it appears that nowadays you have to send an empty string as the parameter AND make string nullable on the .net side. I'm not sure why string has to be declared as nullable now when it is... inherently nullable. Having issues with code formatting, apologies. Working solution below

getDummyUser(type) {
  this.userProvider.getDummyUser(type, '').subscribe(u => {
});




getDummyUser(type: string, testId: string):Observable<UserDto> {var url = `api/users/get-dummy-usertype=${encodeURIComponent(type)}&testId=${encodeURIComponent(testId)}`;return this.httpClient.get<any>(url).pipe(
finalize(() =>
  this.hideLoadingIndicators()
),
catchError(err => {
  return throwError(err);
})

);

  [HttpGet]
[Route("get-dummy-user")]
public async Task<IActionResult> GetDummyUser
    (
    [FromQuery] string type, 
    [FromQuery] string? testId
    )

Solution 3:[3]

export interface IGetDummy{
type: string;
testId?: string;

}

   sendingParams=[
//what u send as parameter to thi Api
]



 getDummyUser(params:Params):{

    return this.http.get<IGetDummy>(url,{observe:'response', sendingParams})
      .pipe(
        finalize(()=>{
          this.hideLoadingIndicators();
        },catchError(err => {
  return throwError(err);
      )

}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Akrem
Solution 2 TopBanana9000
Solution 3

Related Questions