Blazor Server api returning text/html

Question

Appreciate any help here,

I just started very new with Blazor, created a basic client/server project targeting to Web assembly. Added a new controller at Server side which is of

public async Task<IActionResult> GetEncryptedDataAsync()

returning

return await Task.FromResult(new JsonResult(model));

Below is the controller method that I am calling from razor page

[HttpGet]
public async Task<IActionResult> GetEncryptedDataAsync()
{
var model =  new DecryptViewModel
{
   ApiKey = _appsettings.Value.Checkout.InboundApikey,
   Sharedsecretkey = _appsettings.Value.Checkout.InboundSharedsecret,
   EncKey = "XoSVc/2E717Ivf56JUEMn2",
   EncPaymentData = "S7e9mZy9GrZtaEC/s0f2/4hj1lq"  };

   return await Task.FromResult(new JsonResult(model));
}

At Client side, in index.razor

@page "/"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Zapy.Shared.ViewModels;
@using System.Net.Http
@inject HttpClient Http
@attribute [Authorize]

<br />
<div class="card card-nav-tabs navbar-dark text-left">
    <div class="card-header card-header-primary"><strong>Decryption</strong></div>
    <div class="card-body">
        <h4 class="card-title">Enter encrypted payload below</h4>


        <EditForm Model=@decryptViewModel OnSubmit=@SubmitData>
            <DataAnnotationsValidator />
            <ValidationSummary />

            <div class="form-group">
                <label for="apikey">Apikey</label>
                <InputText Id="apikey" class="form-control" @bind-Value="decryptViewModel.ApiKey" />
               
            </div>
            <div class="form-group">
                <label for="Sharedsecretkey">Sharedsecret</label>
                <InputText Id="Sharedsecretkey" type="password" class="form-control" @bind-Value="decryptViewModel.Sharedsecretkey" />
               
            </div>
            <div class="form-group">
                <label for="encKey">Enckey</label>
                <InputText Id="encKey" class="form-control" @bind-Value="decryptViewModel.EncKey" />
            </div>
            <div class="form-group">
                <label for="encPaymentData">encPaymentData</label>
                <textarea Id="encPaymentData" class="form-control" @bind="decryptViewModel.EncPaymentData" rows="15"/>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </EditForm>

    </div>
    <div class="card-footer text-muted">
        2 days ago
    </div>
</div>
<br />
<div id="DisplayResults" class="card card-nav-tabs text-left">
    <div class="card-header card-header-primary"><strong>Results</strong></div>
    <div class="card-body ">
        <pre id="jsonResults"></pre>
    </div>
</div>

    code {
        private DecryptViewModel decryptViewModel = new DecryptViewModel();
    
        protected override async Task OnInitializedAsync()
        {
            try
            {
                decryptViewModel = await Http.GetFromJsonAsync<DecryptViewModel>("api/CheckoutService/GetEncryptedDataAsync");
            }
            catch (AccessTokenNotAvailableException exception)
            {
                exception.Redirect();
            }
        }
    
       
        async Task SubmitData()
        {
            try
            {
                decryptViewModel.Result = await Http.GetFromJsonAsync<string>("GetResult");
    
            }
            catch (AccessTokenNotAvailableException exception)
            {
                exception.Redirect();
            }
        }
    
    
    }

After I run in the browser, although the service status is showing 200 but contenttype is text/html and seeing one console warning as below

And after browsing the api within the same browser, it's prompting me as below

mend0k mend0k · Accepted Answer · 2020-07-10T03:51:10

Not sure why you're awaiting your result in the controller but the below should work.

Try this on your client/component:

... OnInitializedAsync()
{
     
     var result = await Http.GetFromJsonAsync<DecryptViewModel>
     var decryptModel = System.Text.Json.JsonSerializer.Deserialize<DecryptViewModel>
         (await result.Content.ReadAsStringAsync(), 
          new System.Text.Json.JsonSerializerOptions { PropertyNameCaseInsensitive = true });
}

Try this on your controller:

[HttpGet]
public DecryptViewModel GetEncryptedDataAsync()
{
     var model = new DecryptViewModel
     // populate your model

     return model;
}

Blazor Server api returning text/html

1 Answers