C# Blazor.net用户界面不呈现任何内容

我正在开发一个Blaor.Net应用程序，参考了互联网上的许多帖子。我所面临的问题是，我想将代码从UI移动到一个seprate文件，以保持razor文件干净、可读和可理解。为此，我将UI端的C#代码保存在一个单独的组件中，该组件继承自BaseComponent

@page "/Item"
@using WebApplication1.Shared
@using WebApplication1.Client.Services;
@inherits ItemComponent

@if (ItemList != null)
{
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Category</th>
                <th>Metal</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in ItemList)
            {
                <tr>
                    <td>@item.ID</td>
                    <td>@item.Name</td>
                    <td>@item.Category</td>
                    <td>@item.Metal</td>
                    <td>@item.Price</td>
                    <td>@item.Quantity</td>
                </tr>
            }
        </tbody>
    </table>
}

@functions{
    public List<ItemModel> ItemList;
    ItemComponent IC = new ItemComponent();

    protected override async Task OnInitAsync()
    {
        ItemList = IC.GetItems().Result;
    }
}

@page”/Item
@使用WebApplication1.Shared
@使用WebApplication1.Client.Services；
@继承ItemComponent
@if（ItemList！=null）
{
身份证件
名称
类别
金属
价格
量
@foreach（ItemList中的变量项）
{
@item.ID
@项目名称
@项目.类别
@项目.金属
@项目.价格
@项目.数量
}
}
@功能{
公共清单项目清单；
ItemComponent IC=新的ItemComponent（）；
受保护的重写异步任务OnInitAsync（）
{
ItemList=IC.GetItems（）.Result；
}
}

ItemComponent.cs

public class ItemComponent : ComponentBase
{
    private string BaseUrl = "http://localhost:52114/";
    public async Task<List<ItemModel>> GetItems()
    {
        HttpClient Http = new HttpClient();
        return await Http.GetJsonAsync<List<ItemModel>>(BaseUrl + "api/Item/GetItems");
    }
}

公共类ItemComponent:ComponentBase
{
专用字符串BaseUrl=”http://localhost:52114/";
公共异步任务GetItems（）
{
HttpClient Http=新的HttpClient（）；
return wait Http.GetJsonAsync（BaseUrl+“api/Item/GetItems”）；
}
}

我不想在UI中调用api，而是想将它放在单独的文件中，组件基本上是作为razor页面的代码隐藏文件

Http.GetJsonAsync>（BaseUrl+“api/Item/GetItems”）

但在创建组件并将其继承到razor之后，它会抛出异常

System.Net.Http.HttpRequestException:无法建立连接，因为目标计算机主动拒绝它。--> System.Net.Sockets.SocketException:无法建立连接 因为目标机器主动拒绝了它。在 System.Net.Http.ConnectHelper.ConnectAsync（字符串主机，Int32端口， CancellationToken CancellationToken）--内部异常堆栈的结束 跟踪---在System.Net.Http.ConnectHelper.ConnectAsync（字符串主机， Int32端口，CancellationToken CancellationToken）位于 System.Threading.Tasks.ValueTask1.get_Result（）位于
System.Net.Http.HttpConnectionPool.ConnectAsync（HttpRequestMessage
请求，布尔allowttp2，CancellationToken CancellationToken）

在System.Threading.Tasks.ValueTask1.get_Result（）处 System.Net.Http.HttpConnectionPool.CreateHttp11ConnectionAsync（HttpRequestMessage 请求，取消令牌（取消令牌）位于 System.Threading.Tasks.ValueTask1.get_Result（）位于
System.Net.Http.HttpConnectionPool.GetHttpConnectionAsync（HttpRequestMessage 请求、取消令牌（取消令牌）位于
System.Threading.Tasks.ValueTask1.get_Result（）位于 System.Net.Http.HttpConnectionPool.SendWithRetryAsync（HttpRequestMessage 请求，布尔型doRequestAuth，CancellationToken CancellationToken） 在System.Net.Http.RedirectHandler.SendAsync（HttpRequestMessage 请求，取消令牌（取消令牌）位于 System.Net.Http.HttpClient.FinishSendAsyncUnbuffered（Task1 sendTask，
HttpRequestMessage请求，CancellationTokenSource cts，布尔值
在System.Net.Http.HttpClient.GetStringAsyncCore（Task1）中 问）在 Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.GetOpenedBrowserTabs（字符串 调试主机）位于 Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.DebugHome（HttpContext （上下文）

---

浏览器在此异常后挂起，它无法关闭，只能通过任务管理器关闭，所以您仍然需要进行一些重构。正如我在回答前面的问题时所说，您需要将

函数

块中的所有内容移到代码后面。使用基类时，不应将其与视图中的

函数

块混合使用

就http调用而言，您不需要添加基本URL，这已经为您完成了，但是您也不应该新建http客户端。您应该将一个实例注入到您的代码中

您的代码中还有一些其他的小问题，所以我认为可以更容易地对其进行返工，以显示其外观

@page "/Item"
@inherits ItemComponent

@if (ItemList != null)
{
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Category</th>
                <th>Metal</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in ItemList)
            {
                <tr>
                    <td>@item.ID</td>
                    <td>@item.Name</td>
                    <td>@item.Category</td>
                    <td>@item.Metal</td>
                    <td>@item.Price</td>
                    <td>@item.Quantity</td>
                </tr>
            }
        </tbody>
    </table>
}

@page”/Item
@继承ItemComponent
@if（ItemList！=null）
{
身份证件
名称
类别
金属
价格
量
@foreach（ItemList中的变量项）
{
@item.ID
@项目名称
@项目.类别
@项目.金属
@项目.价格
@项目.数量
}
}

公共类ItemComponent:ComponentBase
{
[Inject]HttpClient HttpClient{get；set；}
公共清单项目清单；
受保护的重写异步任务OnInitAsync（）
{
ItemList=等待GetItems（）；
}
公共异步任务GetItems（）
{
return wait HttpClient.GetJsonAsync（“api/Item/GetItems”）；
}
}

---

只要您的后端设置正确（例如：CORS），这应该可以正常工作。

所以您仍然需要进行一些重构。正如我在回答前面的问题时所说，您需要将

函数

块中的所有内容移到代码后面。使用基类时，不应将其与视图中的

函数

块混合使用

就http调用而言，您不需要添加基本URL，这已经为您完成了，但是您也不应该新建http客户端。您应该将一个实例注入到您的代码中

有一个fe

public class ItemComponent : ComponentBase
{

    [Inject] HttpClient HttpClient { get; set; }

    public List<ItemModel> ItemList;

    protected override async Task OnInitAsync()
    {
        ItemList = await GetItems();
    }

    public async Task<List<ItemModel>> GetItems()
    {
        return await HttpClient.GetJsonAsync<List<ItemModel>>("api/Item/GetItems");
    }
}