Translated from Waqas Anwar 2021 year 5 month 4 Japanese articles 《Making HTTP Requests in Blazor Server Apps》 [1]

Blazor Server The application uses standard ASP.NET Core Applications , Execute... On the server .NET Code . stay Blazor Server In the application , We can be like ASP.NET Core Web In the application , Access any... In the same way .NET Library or server functions . One of these functions is , Use HTTP Client Instances to third parties Web API send out HTTP request . In this tutorial , I'll show you how to create HTTP Client Different methods of examples . in addition , I will also show you how to Blazor Server Use third parties in your application API To get and display data .

Download the source code [2]

The third party Web API overview

We will develop a Blazor Server Applications , The application allows users to Blazor Enter the country code and year on the page component , Then we will call a third party API To get a list of public holidays in the specified country and year . The third party we use API yes Nager.Date[3], It's a global public holiday API.

This is a very simple API, You can easily in Postman Enter the following URL Test this API.

https://date.nager.at/api/v2/PublicHolidays/2021/CN

The API The response is JSON List of public holidays in format , As shown below :

from Blazor Sever Application start

stay Visual Studio 2019 Create a Blazor Server Applications , And create a new one called Models Folder . stay Models Add the following two model classes to the folder , To map the above Holidays API Request and response .

HolidayRequestModel.cs

public class HolidayRequestModel
{
public string CountryCode { get; set; }
public int Year { get; set; }
}

HolidayResponseModel.cs

public class HolidayResponseModel
{
public string Name { get; set; }
public string LocalName { get; set; }
public DateTime? Date { get; set; }
public string CountryCode { get; set; }
public bool Global { get; set; }
}

Next , stay Pages Create a new Razor Components HolidaysExplorer.razor And its code behind files HolidaysExplorer.razor.cs. If you want to know about Razor More knowledge of components and code behind files , You can read my article 《Blazor Getting started with components 》.

HolidaysExplorer.razor.cs

public partial class HolidaysExplorer
{
private HolidayRequestModel HolidaysModel = new HolidayRequestModel();
private List<HolidayResponseModel> Holidays = new List<HolidayResponseModel>(); [Inject]
protected IHolidaysApiService HolidaysApiService { get; set; } private async Task HandleValidSubmit()
{
Holidays = await HolidaysApiService.GetHolidays(HolidaysModel);
}
}

HolidaysModel The fields are HolidayRequestModel An instance of a class , It will help us create a simple form to ask users for country code and year . The following code snippet shows how to use HolidaysModel Object created Blazor Forms , among HandleValidSubmit The method is to use Blazor Form Of OnValidSubmit Event configuration , This method will be called when the user submits the form .

<EditForm Model="@HolidaysModel" OnValidSubmit="@HandleValidSubmit" class="form-inline">

   <label class="ml-2">Country Code:</label>
<InputText id="CountryCode" @bind-Value="HolidaysModel.CountryCode" class="form-control" /> <label class="ml-2">Year:</label>
<InputNumber id="Year" @bind-Value="HolidaysModel.Year" class="form-control" /> <button class="btn btn-primary ml-2" type="submit">Submit</button> </EditForm>

Holidays The list is used to display information from third parties API Return vacation . We need to use a @foreach Loop iterates over the returned vacation to generate a simple bootstrap form .

@if (Holidays.Count > 0)
{
<table class="table table-bordered table-striped table-sm">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Local Name</th>
<th>Country Code</th>
<th>Global</th>
</tr>
</thead>
<tbody>
@foreach (var item in Holidays)
{
<tr>
<td>@item.Date.Value.ToShortDateString()</td>
<td>@item.Name</td>
<td>@item.LocalName</td>
<td>@item.CountryCode</td>
<td>@item.Global</td>
</tr>
}
</tbody>
</table>
}

HolidaysExplorer.razor The complete code of the view is as follows :

HolidaysExplorer.razor

@page "/"
<h3>Holidays Explorer</h3>
<br /> <EditForm Model="@HolidaysModel" OnValidSubmit="@HandleValidSubmit" class="form-inline"> <label class="ml-2">Country Code:</label>
<InputText id="CountryCode" @bind-Value="HolidaysModel.CountryCode" class="form-control" /> <label class="ml-2">Year:</label>
<InputNumber id="Year" @bind-Value="HolidaysModel.Year" class="form-control" /> <button class="btn btn-primary ml-2" type="submit">Submit</button> </EditForm> <br />
@if (Holidays.Count > 0)
{
<table class="table table-bordered table-striped table-sm">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Local Name</th>
<th>Country Code</th>
<th>Global</th>
</tr>
</thead>
<tbody>
@foreach (var item in Holidays)
{
<tr>
<td>@item.Date.Value.ToShortDateString()</td>
<td>@item.Name</td>
<td>@item.LocalName</td>
<td>@item.CountryCode</td>
<td>@item.Global</td>
</tr>
}
</tbody>
</table>
}

At this point, if you run the application , You'll see a simple... That doesn't show any holidays HTML Forms . This is because of the method HandleValidSubmit It's empty. , We haven't called any API To get vacation data .

stay Blazor Server Used in applications IHttpClientFactory establish HttpClient

stay Blazor Server Used in applications HttpClient Ask a third party API There are many different ways , Let's start with a basic example , In this example, we use IHttpClientFactory establish HttpClient object .

Create one in the project Services Folder , And create the following IHolidaysApiService Interface . The interface has only one method GetHolidays, It uses HolidayRequestModel As a parameter and return HolidayResponseModel List of objects .

IHolidaysApiService.cs

public interface IHolidaysApiService
{
Task<List<HolidayResponseModel>> GetHolidays(HolidayRequestModel holidaysRequest);
}

Next , stay Services Create a HolidaysApiService class , Implement the above interface .

HolidaysApiService.cs

public class HolidaysApiService : IHolidaysApiService
{
private readonly IHttpClientFactory _clientFactory; public HolidaysApiService(IHttpClientFactory clientFactory)
{
_clientFactory = clientFactory;
} public async Task<List<HolidayResponseModel>> GetHolidays(HolidayRequestModel holidaysRequest)
{
var result = new List<HolidayResponseModel>(); var url = string.Format("https://date.nager.at/api/v2/PublicHolidays/{0}/{1}",
holidaysRequest.Year, holidaysRequest.CountryCode); var request = new HttpRequestMessage(HttpMethod.Get, url);
request.Headers.Add("Accept", "application/vnd.github.v3+json"); var client = _clientFactory.CreateClient(); var response = await client.SendAsync(request); if (response.IsSuccessStatusCode)
{
var stringResponse = await response.Content.ReadAsStringAsync(); result = JsonSerializer.Deserialize<List<HolidayResponseModel>>(stringResponse,
new JsonSerializerOptions() { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });
}
else
{
result = Array.Empty<HolidayResponseModel>().ToList();
} return result;
}
}

Above GetHolidays In the method , We first for the third party API Created a URL, And add the country code and year parameters to URL in .

var url = string.Format("https://date.nager.at/api/v2/PublicHolidays/{0}/{1}", holidaysRequest.Year, holidaysRequest.CountryCode);

Next , We created HttpRequestMessage Object and configure it to communicate to third parties API URL send out HTTP GET request .

var request = new HttpRequestMessage(HttpMethod.Get, url);
request.Headers.Add("Accept", "application/vnd.github.v3+json");

have access to Dependency injection (DI) Request one IHttpClientFactory, That's why we injected it into the constructor of the previous class . The following line of code uses IHttpClientFactory Created a HttpClient example .

var client = _clientFactory.CreateClient();

With HttpClient After object , We simply call its SendAsync Method to send a HTTP GET request .

var response = await client.SendAsync(request);

If API Successful call , We use the following line of code to read its response as a string .

var stringResponse = await response.Content.ReadAsStringAsync();

Last , We use JsonSerializer Class Deserialize Method to deserialize the response .

result = JsonSerializer.Deserialize<List<HolidayResponseModel>>(stringResponse,
new JsonSerializerOptions() { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });

Before testing the application , We need to be in Startup.cs Register in the file HolidaysApiService service . We also need to call AddHttpClient Methods registration IHttpClientFactory.

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor(); services.AddSingleton<IHolidaysApiService, HolidaysApiService>(); services.AddHttpClient();
}

Run the application and provide any country code and year in the text box . Click on Submit The button will call our... In the background GetHolidays Method , Then you should see a list of public holidays as shown below .

stay Blazor Server Created in the application name HttpClient object

The above example applies to an existing application that you are refactoring , You want to do this without affecting the entire application , Use... In some methods IHttpClientFactory establish HttpClient The scene of the object . If you want to create a new application , Or you want to create HttpClient The way objects are centralized , Then you must use name HttpClient.

Here's how to create a named HTTP The benefits of the client :

  1. We can for each HttpClient name , And specify and when the application starts HttpClient All related configurations , Instead of distributing the configuration throughout the application .
  2. We can configure named... Only once HttpClient, And reuse it many times to call a specific API All of the providers API.
  3. According to the usage of these clients in different areas of the application , Configure the naming of multiple different configurations HttpClient object .

We can do it in Startup.cs Of documents ConfigureServices In the method , Use the previously used name AddHttpClient Method specifies a named HttpClient.

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor(); services.AddSingleton<IHolidaysApiService, HolidaysApiService>(); services.AddHttpClient("HolidaysApi", c =>
{
c.BaseAddress = new Uri("https://date.nager.at/");
c.DefaultRequestHeaders.Add("Accept", "application/vnd.github.v3+json");
});
}

We need to specify the name of the client ( for example HolidaysApi), We can also configure... As shown above BaseAddressDefaultRequestHeaders And other properties .

Naming is configured HttpClient after , We can use the same CreateClient Method to create... Throughout the application HttpClient object , But this time we need to specify which named client we want to create ( for example HolidaysApi).

HolidaysApiService.cs

public class HolidaysApiService : IHolidaysApiService
{
private readonly IHttpClientFactory _clientFactory; public HolidaysApiService(IHttpClientFactory clientFactory)
{
_clientFactory = clientFactory;
} public async Task<List<HolidayResponseModel>> GetHolidays(HolidayRequestModel holidaysRequest)
{
var result = new List<HolidayResponseModel>(); var url = string.Format("api/v2/PublicHolidays/{0}/{1}",
holidaysRequest.Year, holidaysRequest.CountryCode); var request = new HttpRequestMessage(HttpMethod.Get, url); var client = _clientFactory.CreateClient("HolidaysApi"); var response = await client.SendAsync(request); if (response.IsSuccessStatusCode)
{
var stringResponse = await response.Content.ReadAsStringAsync(); result = JsonSerializer.Deserialize<List<HolidayResponseModel>>(stringResponse,
new JsonSerializerOptions() { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });
}
else
{
result = Array.Empty<HolidayResponseModel>().ToList();
} return result;
}
}

We are CreateClient Method ( such as HolidaysApi) You have to be with us Startup.cs The names configured in the file are consistent . Every time you call CreateClient When the method is used , Will create a new HttpClient example .

in addition , We don't need to ask URL It is specified in API Host name , Because we are Startup.cs The base address has been specified in the file .

Run the application again and provide the country code and year values , You should see the following list of public holidays .

stay Blazor Server Created in the application Typification HttpClient object

Create and use HttpClient The third option for objects is to use typed clients . This client has the following benefits :

  1. They provide the same functionality as named clients , But you don't need to use a string as a key .
  2. They provide IntelliSense and compiler help when using the client .
  3. They provide a single storage unit to configure specific storage HttpClient And interact with it . for example , We can configure for Facebook API A type of a particular terminal HttpClient, And the HttpClient It can encapsulate all the logic required to use this particular terminal .
  4. They are related to dependency injection (DI) Use it together , You can inject... Where you need it .

To configure typed HTTPClient, We need to be in Startup.cs Use the same... In the file AddHttpClient Method to register it , But this time , We need to pass our service name HolidaysApiService As its type .

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor(); services.AddSingleton<IHolidaysApiService, HolidaysApiService>(); services.AddHttpClient<HolidaysApiService>();
}

In the code snippet above ,HTTP Clients and our services HolidaysApiService Will register as transient clients and services . This will allow us to pass... In the constructor of the service HttpClient, As shown in the following code snippet . Please note that ,HttpClient How it is exposed to serve public Attribute .

HolidaysApiService.cs

public class HolidaysApiService : IHolidaysApiService
{
public HttpClient Client { get; } public HolidaysApiService(HttpClient client)
{
client.BaseAddress = new Uri("https://date.nager.at/");
client.DefaultRequestHeaders.Add("Accept", "application/vnd.github.v3+json");
Client = client;
} public async Task<List<HolidayResponseModel>> GetHolidays(HolidayRequestModel holidaysRequest)
{
var result = new List<HolidayResponseModel>(); var url = string.Format("api/v2/PublicHolidays/{0}/{1}",
holidaysRequest.Year, holidaysRequest.CountryCode); var response = await Client.GetAsync(url); if (response.IsSuccessStatusCode)
{
var stringResponse = await response.Content.ReadAsStringAsync(); result = JsonSerializer.Deserialize<List<HolidayResponseModel>>(stringResponse,
new JsonSerializerOptions() { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });
}
else
{
result = Array.Empty<HolidayResponseModel>().ToList();
} return result;
}
}

The configuration of the typed client may not be specified in the constructor of the typed client , During the registration period Startup.cs Of documents ConfigureServices Method .

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor(); services.AddHttpClient<IHolidaysApiService, HolidaysApiService>(c =>
{
c.BaseAddress = new Uri("https://date.nager.at/");
c.DefaultRequestHeaders.Add("Accept", "application/vnd.github.v3+json");
});
}

If you use this method , You do not need to register your service separately . You can learn from ConfigureServices Method to delete the following line of code .

services.AddSingleton<IHolidaysApiService, HolidaysApiService>();

Can be HttpClient Objects are sealed in a typed client , Not publicly known as public attribute . then , We can use this client in any method inside the service .

public class HolidaysApiService : IHolidaysApiService
{
private readonly HttpClient _httpClient; public HolidaysApiService(HttpClient client)
{
_httpClient = client;
} public async Task<List<HolidayResponseModel>> GetHolidays(HolidayRequestModel holidaysRequest)
{
var result = new List<HolidayResponseModel>(); var url = string.Format("api/v2/PublicHolidays/{0}/{1}",
holidaysRequest.Year, holidaysRequest.CountryCode); var response = await _httpClient.GetAsync(url); if (response.IsSuccessStatusCode)
{
var stringResponse = await response.Content.ReadAsStringAsync(); result = JsonSerializer.Deserialize<List<HolidayResponseModel>>(stringResponse,
new JsonSerializerOptions() { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });
}
else
{
result = Array.Empty<HolidayResponseModel>().ToList();
} return result;
}
}

Run the application again , And provide country code and year value , You should be able to see the following list of public holidays .

summary

In this paper , I introduced in Blazor Server Create and use... In your application HTTP Different technologies of the client . Most of the technologies mentioned here can also be found in ASP.NET Core Used in applications , because Blazor Server The application is built on ASP.NET Core On top of the infrastructure . In my next article 《Making HTTP Requests in Blazor WebAssembly Apps》 in , I will try to introduce HTTP The client is in Blazor WebAssembly Creation and use in applications .

Related reading :

author : Waqas Anwar

translate : Technical translation station

link : The original English text


  1. https://www.ezzylearning.net/tutorial/making-http-requests-in-blazor-server-apps Making HTTP Requests in Blazor Server Apps

  2. https://github.com/ezzylearning/BlazorServerWebAPIsDemo

  3. https://date.nager.at/

Blazor Server In the application HTTP More related articles requested

  1. java In the procedure of http request

    background java Sometimes in the program, we need to initiate http Level request , For example, when grasping data or third-party docking , There are generally two kinds : One is that we just need to make a request , Another is that we should not only make a request , We also need to get the requested data for the next step Realization in the light of ...

  2. Use Fiddler Capture Java In program HTTP request

      Default Java The program does not support Fiddler Obtain requested , Therefore, you need to set up a proxy to achieve .   Fiddler The port of is 8888, if Fiddler Is not running , An exception will be thrown .   HttpClient4.5 Example : ...

  3. Data requests in applets sessionid, Stay logged in .

    Copyright notice : This paper is about CSDN Blogger 「weixin_43964779」 The original article of , follow CC 4.0 BY-SA Copyright agreement , For reprint, please attach the original source link and this statement . Link to the original text :https://blog.csdn.net ...

  4. Blazor Server and WebAssembly Getting started with Applications

    Translated from Waqas Anwar 2021 year 3 month 12 Japanese articles <A Beginner's Guide To Blazor Server and WebAssembly Applications&g ...

  5. stay ASP.NET MVC Implemented in the application Server.Transfer() Similar functions

    stay ASP.NET MVC In the application , If you use Server.Transfer() Method wants to forward the request to another path or Http The handler handles , Will trigger “ by xxx Error executing sub request ” Of HttpException ...

  6. Understand the mystery of performance —— Slow in the application ,SSMS Medium fast (2)——SQL Server How to compile stored procedures

    This paper belongs to < Understand the mystery of performance -- Slow in the application ,SSMS Medium fast > series Continued above : Understand the mystery of performance -- Slow in the application ,SSMS Medium fast (1)-- brief introduction In this paper, SQL Server How to compile stored procedures and use the plan cache ...

  7. stay Asp.net Razor Pages/MVC Integration in the program Blazor

    I tried it today Asp.net core Razor Pages/MVC Integration in the program Blazor(Server-side), It can be perfectly integrated , Here we use Razor Pages For example (.net core 3.1 ...

  8. stay ASP.NET 5 Detailed explanation of cross domain request function in application program

    stay ASP.NET 5 Detailed explanation of cross domain request function in application program Browser security prevents one web page from submitting requests to another domain , This restriction is called the same domain policy (same-origin policy), This organized a malicious website to read from another website ...

  9. Automatically install... In the packaging program SQL Server database .

    original text : Automatically install... In the packaging program SQL Server database . 1. Create an installation project “Setup1” Installation project stay “ file ” On the menu, point to “ Add the project ”, And then choose “ New projects ”. stay “ Add a new project ” In the dialog box , choice “ Project type ” ...

  10. Understand the mystery of performance —— Slow in the application ,SSMS Medium fast (6)——SQL Server How to compile dynamic SQL

    This paper belongs to < Understand the mystery of performance -- Slow in the application ,SSMS Medium fast > series Continued above : Understand the mystery of performance -- Slow in the application ,SSMS Medium fast (5)-- Case study : How to deal with parameter sniffing Let's forget about parameter sniffing , Back to the top of the series ...

Random recommendation

  1. linux Installation configuration apk packaged applications gradle+jdk+Android_sdk+python Automatically compile scripts

    install gradle: 1. download gradle package Go here and download what you need tar.gz package :https://services.gradle.org/distributions/ 2. decompression tar zxvf gradl ...

  2. java Learning the second 6 God

    Today is mainly to learn static Understanding of static variables , It is mainly used for the same member variables of multiple objects , To save space . It is loaded as the class is loaded. It can be a method or an object . Call... Directly through the class name . such as main The way is , Can be called directly . ma ...

  3. 66. Why sometimes in ISE In software , Top level files cannot be placed on top ?

    When can't the top file appear ? Hey , There must be a mistake in the project . If your top-level file contains include file , This will happen at this time . But it seems to have appeared in the beginning of a new project , Because when the top file doesn't include Include writing ...

  4. Two bootstrap plug-in unit bootstrap-select and bootstrap-paginator

    be based on bootstrap Selector  http://silviomoreto.github.io/bootstrap-select/ <label for="androids" c ...

  5. JS-string Built-in objects

    1.charCodeAt Method returns an integer , Representing the character at the specified position Unicode code . strObj.charCodeAt(index)  explain : index The zero based number of the character to be processed . Valid values are 0 To character ...

  6. DevExpress in GridView Excel download

    DevExpress in GridView Provides a lot Excel How to download , Such as gridView.ExportToExcelOld(sfdExcelDown.FileName); In the revision Bug when , When it comes to this problem ...

  7. Linux Do password free login on

    Key based authentication 1. Generate a pair of keys ssh-keygen -t {rsa|dsa} -f /path/to/keyfile -N 'password'2. Transfer the public key to the home directory of a user on the server .ssh/autho ...

  8. Some of the Qt The program is in Windows Sort out the problems of porting between platforms

    Today, try to Qt The program is ported to various virtual machines for testing , because Qt The report of dependent libraries often can't show all the dependent libraries . As a result, there are frequent problems , It's not easy to solve all the problems , Here are some routines . First of all, for Qt edition , I've used it a lot , Finally, it is recommended at this stage Min ...

  9. Linux Next user and raid Exercises

    1. A developer of the company applied to the server 10 Days of oldboy Normal user rights , How to operate ? useradd oldboy passwd oldboy usermod -e `date -d "10day& ...

  10. CPU Utilities

    System version :CentOS 7.4 top 17:49:04 // current time up 3:55 // System running time , The format is : branch 2 users // Number of currently logged in users load average // Three values ...