Blazor.net UI not Rendering anything

Question

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

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

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

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)

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

Chris Sainty Chris Sainty · Accepted Answer · 2019-05-23T07:06:41

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.

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

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

Blazor.net UI not Rendering anything

1 Answers