Question

我正在开发Blaor.Net应用程序，并从Internet上的许多帖子中获取参考。我面临的问题是，我想将代码从UI移到单独的文件中，以使剃刀文件清晰易读。为此，我将UI端C＃代码保留在一个单独的组件中，该组件继承自BaseComponent

dask.compute()

ItemComponent.cs

@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;
    }
}

我不想在UI中进行api调用，而是希望将其保存在单独的文件中，而Component基本上是在这里作为剃刀页面的文件后面的代码

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

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

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（）at
  System.Net.Http.HttpConnectionPool.ConnectAsync（HttpRequestMessage
  请求，布尔值allowHttp2，CancellationToken cancelToken）

在System.Threading.Tasks.ValueTask1.get_Result（）在   System.Net.Http.HttpConnectionPool.CreateHttp11ConnectionAsync（HttpRequestMessage   的请求，在   System.Threading.Tasks.ValueTask1.get_Result（）at
  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   的请求，在   System.Net.Http.HttpClient.FinishSendAsyncUnbuffered（Task1 sendTask，
  HttpRequestMessage请求，CancellationTokenSource cts，布尔值
  System.Net.Http.HttpClient.GetStringAsyncCore（Task1处的disposeCts）   getTask）   Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.GetOpenedBrowserTabs（String   debuggerHost）在   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），这应该可以正常工作。

Blazor.net UI不呈现任何内容

1 个答案: