Пользовательский интерфейс Blazor.net ничего не рендерит - PullRequest
Новая
       33

Пользовательский интерфейс Blazor.net ничего не рендерит

0 голосов
/ 23 мая 2019

Я занимаюсь разработкой приложения Blaor.Net, ссылаясь на множество постов, доступных в Интернете.Проблема, с которой я сталкиваюсь, заключается в том, что я хочу переместить код из пользовательского интерфейса в отдельный файл, чтобы обеспечить чистоту и понятность файла бритвы.Для этого я держу свой код 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");
    }
}

вместо создания APIвызов в пользовательском интерфейсе, я хочу иметь его в отдельном файле, компонент в основном работает в качестве кода для файла для страницы бритвы здесь

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 (Строковый хост, порт Int32, CancellationTokencancellationToken) в System.Threading.Tasks.ValueTask1.get_Result () в
System.Net.Http.HttpConnectionPool.ConnectAsync (запрос HttpRequestMessage
, логическое разрешение allowHttp2, CancellationToken CancellationToken 10okate в режиме 10) *.Tasks.ValueTask1.get_Result () в System.Net.Http.HttpConnectionPool.CreateHttp11ConnectionAsync (запрос HttpRequestMessage, CancellationToken cancellationToken) в System.Threading.Tasks.(Запрос HttpRequestMessage, CancellationToken cancellationToken) в
System.Threading.Tasks.ValueTask1.get_Result () в System.Net.Http.HttpConnectionPool.SendWithRetryAsync (HttpRequestMessage, запрос Cuele, BooleellationToken cancellationToken) в System.Net.Http.RedirectHandler.SendAsync (запрос HttpRequestMessage, CancellationToken cancellationToken) в System.Net.Http.HttpClient.FinishSendAsyncUnbuffered (Task1 sendTasktek, запрос на возврат, резервный источник, 10-й класс, запрос на возврат, резервное копирование, 10-й запросSystem.Net.Http.HttpClient.GetStringAsyncCore (Task1 getTask) в Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.GetOpenedBrowserTabs (строковый отладчикHost * * контекстная_комма_поля)Браузер завис после этого исключения, его нельзя закрыть, только через диспетчер задач

1 Ответ

2 голосов
/ 23 мая 2019

Так что у вас еще есть небольшой рефакторинг.Как я уже сказал в своем ответе на ваш предыдущий вопрос, вам нужно переместить все из блока 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).

...