###### tags: `MAUI + Blazor`
# MAUI + Blazor (.Net6.0) 連結API服務案例
此案例使用的API服務如下

## 製作接收檔案的service
有了服務地址 就可以開始製作接收檔案的service

與API的溝通, 我是使用HttpClient
將API網址輸入後 呼叫GetStringAsync 取得結果字串
使用POSTMAN看了回復的資料之後, 確定我們只需要records的字串
服務製作好之後需要把這個服務註冊
同上圖第23行

## 資料轉換成class
將回傳的資料 丟進線上轉換成 class
[Convert Json to C# Classes Online](https://json2csharp.com/)
貼進專案之後稍微處理一下

## 製作畫面
[快速創建畫面教學](https://hackmd.io/g7oYHGhBTgSfW4xUa6hDsA)

創建一個RAZOR 畫面
原始碼如下

@page "/TaiwanWeatherView"
@using MauiTestApp.Data
@inject WeatherForecastService ForecastService
@inject NavigationManager NavigationManager

<h3>TaiwanWeatherView</h3>

@if (forecasts == null)
{
	<p><em>Loading...</em></p>
}
else
{
	<p>@forecasts.datasetDescription</p>
	<p>@forecasts.location.FirstOrDefault().locationName</p>
	<table class="table">
		<thead>
			<tr>
				<th>elementName</th>				 
				<th>Summary</th>
			</tr>
		</thead>
		<tbody>
			@foreach (var forecast in forecasts.location.FirstOrDefault().weatherElement)
			{
				<tr>
					<td>@forecast.elementName</td>
					<td>
						<table class="table">
							<thead>
								<tr>
									<th>startTime</th>
									<th>endTime</th>
									<th>parameterName</th>									
									<th>parameterUnit</th>
								</tr>
							</thead>
							<tbody>
								@foreach (var forecast1 in forecast.time)
								{
									<tr>
										<td>@forecast1.startTime</td>
										<td>@forecast1.endTime </td>
										<td>@forecast1.parameter.parameterName </td>										
										<td>@forecast1.parameter.parameterUnit </td>
									</tr>
								}
							</tbody>
						</table>
					</td>
				</tr>
			}
		</tbody>
	</table>
	
}

@code {
	private Records forecasts;	

	protected override async Task OnInitializedAsync()
	{
		forecasts = await ForecastService.GetTaiwanWeatherAsync();
	} 
}

@inject WeatherForecastService ForecastService 注入服務後
就可以使用服務取得資料, 然後塞進Table裡面
結果畫面如上圖

## 畫面共用
RAZOR的一個特性是做好的畫面可以共用, 如果我要在首頁將寫好的天氣預報呈現出來, 只需要一行代碼即可
寫入<TaiwanWeatherView />
首頁就會出現剛剛寫好的畫面