Azure function app deployment to Azure and integration to Blazor web assembly

Question

I am new to Azure functions. I have a scenario like to call the published Azure function in a Blazor wasm app using C#, using a relative published URL.

Could you please help us like how configure the HttpClient in the Azure function app and call the relative url from the client?

Answer 1

I tried calling the Azure Functions URL in FetchData but it did not fetch the value.

FetchData.razor:-

@page "/fetchdata"
@inject HttpClient httpClient

<PageTitle>Fetch Data</PageTitle>

<h1>Fetch Data</h1>

<p>This component demonstrates fetching data from an Azure Function.</p>

@if (responseData == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <p>@responseData</p>
}

@code {
    private string? responseData;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            var response = await httpClient.GetAsync("https://valleyfunc761.azurewebsites.net/api/HttpTrigger1?");
            response.EnsureSuccessStatusCode();
            responseData = await response.Content.ReadAsStringAsync();
        }
        catch (Exception ex)
        {
            responseData = $"Error: {ex.Message}";
        }
    }
}

In order to achieve your task, Create your Function files like Function.cs inside an API folder by referring this Github Repository:-

And deploy this Repository code in Azure static web app, You have an option to add the Function manually or the Function inside the API folder is added automatically as API like below:-

Output:-