Unhandled exception rendering component: Input string was not in a correct format.

Question

Hi,
I have the following message error :

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]  
      Unhandled exception rendering component: Input string was not in a correct format.  
System.FormatException: Input string was not in a correct format.  
   at System.Number.ThrowOverflowOrFormatException(ParsingStatus status, TypeCode type)  
   at System.Number.ParseInt32(ReadOnlySpan`1 value, NumberStyles styles, NumberFormatInfo info)  
   at System.Int32.Parse(String s)  
   at WebApp3.Pages.Dashboard.IndicateurComponent.MonthlyStats() in C:\Users\...\source\repos\WebApp3\Client\Pages\Dashboard\Indicateur.razor.cs:line 27  
   at WebApp3.Client.Pages.Dashboard.Indicateur.OnInitializedAsync() in C:\Users\...\source\repos\WebApp3\Client\Pages\Dashboard\Indicateur.razor:line 60  
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()  
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)  

In ServerMethodsController :

  public IActionResult MonthlyStats()  
        {  
  
             int numberecr = context.Developers.Count();  
             int calculN = context.Developers.Count(number => number.DateSoldePr > DateTime.Today);  
  
            double data = ((double)calculN) / numberecr;  
  
            var stats = new  
            {  
                NombreECR = numberecr,  
                Ratio = data  
            };  
            return Ok(stats);  
        }  

It' OK Controller side :

The format problem I can't identify is in indicator.razor.cs and indicator.razor

The code in indicator.razor.cs is :

public partial class IndicateurComponent  
        {  
         [Inject]  
         HttpClient Http { get; set; }  
  
         public class Stats  
         {  
            public int NombreECR { get; set; }  
            public int Ratio { get; set; }  
            public int stats { get; set; }  
  
        }  
           
         public async Task<Stats> MonthlyStats()  
           {  
            var response = await Http.SendAsync(new HttpRequestMessage(HttpMethod.Get, new Uri($"{UriHelper.BaseUri}api/servermethods/MonthlyStats")));  
             string jsonStr = await response.Content.ReadAsStringAsync();  
              Stats re = new Stats { stats = int.Parse(jsonStr)};  
              return re;  
           // return await response.ReadAsync<Stats>();  
  
        }  
        
        }  

The code in the indicateur.razor is :

@code {  
       
     private Stats result = new Stats();  
         
     protected override async Task OnInitializedAsync()  
     {  
      result = await MonthlyStats();       
        
     }  
}  

I don't see where I'm going wrong! Thanks in advance to your help!

Answer 1

The issue is that you're trying to parse a JSON string as an integer. Inside your indicator.razor.cs file you'll probably want to change this line:

Stats re = new Stats { stats = int.Parse(jsonStr)};

To something like this:

Stats re = System.Text.Json.JsonSerializer.Deserialize<Stats>(jsonStr);

Answer 2

It's OK

I changed the controller and .razor.cs as following way :

 public IActionResult MonthlyStats()
        {

             int numberecr = context.Developers.Count();
             int calculN = context.Developers.Count(number => number.DateSoldePr > DateTime.Today);

            double data = ((double)calculN) / numberecr;

            var stats = new
            {
                NombreECR = numberecr,
                Ratio = data
            };
            return Ok(JsonSerializer.Serialize(stats, new JsonSerializerOptions { PropertyNamingPolicy = null }));
            // return Ok(stats);
        }

 public async Task<Stats> MonthlyStats()
           {
            var response = await Http.SendAsync(new HttpRequestMessage(HttpMethod.Get, new Uri($"{UriHelper.BaseUri}api/servermethods/MonthlyStats")));
            return await response.ReadAsync<Stats>();
}

Now the values are well returned on my interface.

Many thanks for your help!