CODEWITHSUNDEEP
c#.netangularasp.net-core.net-core
TopBanana9000
TopBanana9000

Reputation: 898

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

Upvotes: 1

Views: 1443

Answers (3)

Akrem Hammami
Akrem Hammami

Reputation: 153

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

Upvotes: 2

Serhat Balpetek
Serhat Balpetek

Reputation: 11

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);
      )

}

Upvotes: 1

TopBanana9000
TopBanana9000

Reputation: 898

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
    )

Upvotes: 1

Related Questions