Blazor.net UI 未呈现任何内容

Question

我正在开发一个 Blaor.Net 应用程序，参考了互联网上的许多帖子。我面临的问题是我想将代码从 UI 移动到一个单独的文件中，以保持 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;
    }
}

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

我不想在 UI 中进行 api 调用，而是将它放在单独的文件中，组件基本上在这里作为剃须刀页面的代码隐藏文件工作

Http.GetJsonAsync>(BaseUrl + "api/Item/GetItems");

但是在创建组件并将其继承到剃须刀后，它会抛出异常

System.Net.Http.HttpRequestException: 由于目标机器主动拒绝，无法建立连接。 ---> System.Net.Sockets.SocketException：无法建立连接 因为目标机器主动拒绝了。在 System.Net.Http.ConnectHelper.ConnectAsync（字符串主机，Int32 端口， CancellationToken cancelToken) --- 内部异常堆栈结束 跟踪 --- 在 System.Net.Http.ConnectHelper.ConnectAsync（字符串主机， Int32 端口，CancellationToken 取消令牌）在 System.Threading.Tasks.ValueTask1.get_Result() 在
System.Net.Http.HttpConnectionPool.ConnectAsync(HttpRequestMessage
request, Boolean allowHttp2, CancellationToken cancelToken)

在 System.Threading.Tasks.ValueTask1.get_Result() 在 System.Net.Http.HttpConnectionPool.CreateHttp11ConnectionAsync（HttpRequestMessage 请求，CancellationToken 取消令牌）在 System.Threading.Tasks.ValueTask1.get_Result() 在
System.Net.Http.HttpConnectionPool.GetHttpConnectionAsync（HttpRequestMessage 请求，CancellationToken 取消令牌）在
System.Threading.Tasks.ValueTask1.get_Result() 在 System.Net.Http.HttpConnectionPool.SendWithRetryAsync（HttpRequestMessage request, Boolean doRequestAuth, CancellationToken cancelToken) 在 System.Net.Http.RedirectHandler.SendAsync（HttpRequestMessage 请求，CancellationToken 取消令牌）在 System.Net.Http.HttpClient.FinishSendAsyncUnbuffered(Task1 sendTask,
HttpRequestMessage 请求，CancellationTokenSource cts，布尔值
disposeCts) 在 System.Net.Http.HttpClient.GetStringAsyncCore(Task1 getTask) 在 Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.GetOpenedBrowserTabs（字符串 调试器主机）在 Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.DebugHome(HttpContext 上下文）

浏览器在此异常后挂起，无法关闭，只能通过任务管理器关闭

Answer 1

所以您仍然需要进行一些重构。正如我在回答您之前的问题时所说，您需要将所有内容从 functions 块移到后面的代码中。使用基类时，您不应将其与视图中的 functions 块混合。

就您的 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>
}

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

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