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

问题描述

我正在开发Blaor.Net应用程序，并参考了Internet上许多可用的帖子.我面临的问题是，我想将代码从UI移到单独的文件中，以使剃刀文件的整洁可读性和可理解性.为此，我将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调用，而是希望将其放在单独的文件中，而Component基本上是在这里作为剃刀页面的文件后面的代码

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

但是在创建组件并将其继承到剃刀之后，它会引发异常

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 CancellationToken)-内部异常堆栈的结尾 跟踪---在System.Net.Http.ConnectHelper.ConnectAsync(String host， Int32端口，在以下位置使用CancellationToken cancelToken) System.Threading.Tasks.ValueTask1.get_Result()在
System.Net.Http.HttpConnectionPool.ConnectAsync(HttpRequestMessage
请求，布尔值allowHttp2，CancellationToken cancelToken)

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 的请求，在 System.Threading.Tasks.ValueTask1.get_Result()在
System.Net.Http.HttpConnectionPool.GetHttpConnectionAsync(HttpRequestMessage 请求，在
处使用CancellationToken cancellingToken) System.Threading.Tasks.ValueTask1.get_Result()在 System.Net.Http.HttpConnectionPool.SendWithRetryAsync(HttpRequestMessage 请求，布尔值doRequestAuth，CancelationToken cancelToken) 在System.Net.Http.RedirectHandler.SendAsync(HttpRequestMessage 请求，请在以下位置输入CancellationToken cancelToken) System.Net.Http.HttpClient.FinishSendAsyncUnbuffered(Task1 sendTask，
HttpRequestMessage请求，CancellationTokenSource cts，布尔值
在System.Net.Http.HttpClient.GetStringAsyncCore(Task1) getTask) Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.GetOpenedBrowserTabs(String debuggerHost)在 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屋！