Blazor.net UI 不呈现任何内容 [英] Blazor.net UI not Rendering anything

问题描述

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

I am developing an Blaor.Net Application , taking reference from many post available on internet . The Problem i am facing that i want to move code from UI to a seprate file to keep razor file clean readable and understandable . For this i am keeping my UI side C# code into a separate component which is inherited from 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 调用，而是希望将它放在单独的文件中，组件基本上作为此处剃刀页面的代码隐藏文件

Instead of making api call in UI i want to have it in separate file , Component basically working as a code behind file for razor page here

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

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

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

But After creating component and inheriting it into razor it throw exception

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

System.Net.Http.HttpRequestException: No connection could be made because the target machine actively refused it. ---> System.Net.Sockets.SocketException: No connection could be made because the target machine actively refused it. at System.Net.Http.ConnectHelper.ConnectAsync(String host, Int32 port, CancellationToken cancellationToken) --- End of inner exception stack trace --- at System.Net.Http.ConnectHelper.ConnectAsync(String host, Int32 port, CancellationToken cancellationToken) at System.Threading.Tasks.ValueTask1.get_Result() at
System.Net.Http.HttpConnectionPool.ConnectAsync(HttpRequestMessage
request, Boolean allowHttp2, CancellationToken cancellationToken)

在 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请求，布尔值 doRequestAuth，CancellationToken 取消令牌)在 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(String调试器主机)在Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.DebugHome(HttpContext上下文)

at System.Threading.Tasks.ValueTask1.get_Result() at System.Net.Http.HttpConnectionPool.CreateHttp11ConnectionAsync(HttpRequestMessage request, CancellationToken cancellationToken) at System.Threading.Tasks.ValueTask1.get_Result() at
System.Net.Http.HttpConnectionPool.GetHttpConnectionAsync(HttpRequestMessage request, CancellationToken cancellationToken) at
System.Threading.Tasks.ValueTask1.get_Result() at System.Net.Http.HttpConnectionPool.SendWithRetryAsync(HttpRequestMessage request, Boolean doRequestAuth, CancellationToken cancellationToken) at System.Net.Http.RedirectHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) at System.Net.Http.HttpClient.FinishSendAsyncUnbuffered(Task1 sendTask,
HttpRequestMessage request, CancellationTokenSource cts, Boolean
disposeCts) at System.Net.Http.HttpClient.GetStringAsyncCore(Task1 getTask) at Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.GetOpenedBrowserTabs(String debuggerHost) at Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.DebugHome(HttpContext context)

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

Browser got hang after this exception , it can not be closed , only through task manager

推荐答案

所以您还有一些重构工作要做​​.正如我在回答您之前的问题时所说，您需要将 functions 块中的所有内容移动到后面的代码中.使用基类时，您不应该将它与视图中的functions 块混合.

So you've still got a little refactoring to do. As I said in my answer to your earlier question, you need to move everything from the functions block into the code behind. When using a base class you should not mix it with a functions block in the view.

就您的 http 调用而言，您不需要添加已经为您完成的基本 URL，但您也不应该新建一个 HTTP 客户端.您应该在后面的代码中注入一个实例.

In terms of your http call, you don't need to add the base URL this is already done for you, but you should not be newing up a HTTP client either. You should inject an instance into your code behind.

您的代码中还有一些其他小问题，所以我认为重新编写它以显示它的外观可能会更容易.

There are a few other slight issues in your code, so I thought it might be easier to rework it to show how it should look.

@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)，这就会按预期工作.

This should work as expected as long as your backend is setup correctly (Example: CORS).

这篇关于Blazor.net UI 不呈现任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！