Blazor 服务器 api 返回文本/html

Question

在这里感谢任何帮助，

我刚刚开始使用 Blazor，创建了一个针对 Web 程序集的基本客户端/服务器项目。 在服务器端添加了一个新的控制器，它是

public async Task<IActionResult> GetEncryptedDataAsync()

返回

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

下面是我从 razor 页面调用的控制器方法

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

在客户端，在 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();
            }
        }
    
    
    }

在浏览器中运行后，虽然服务状态显示为 200，但内容类型为 text/html，并看到一个控制台警告如下

在同一浏览器中浏览api后，提示我如下

Answer 1

不确定您为什么要在控制器中等待结果，但以下应该可以工作。

在您的客户端/组件上试试这个：

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

在你的控制器上试试这个：

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

     return model;
}