[Blazor] Blazor *.razor 페이지의 route parameters / Rest Api
페이지 정보
작성자 sbLAB 댓글 0건 조회 9,065회 작성일 21-10-05 08:01본문
https://www.pragimtech.com/blog/blazor/blazor-route-parameters/
1. Blazor route parameters 사용법
2. Inject 사용
3. appsettings.json 에서 특정값 가져오는 방법
4. 본 프로젝트에서 레퍼런스 프로젝트의 Rest Api 사용방법
5. Blazor 페이지에 여러 파라미터를 전달하는 방법
6. Blazor 페이지에서 Rest Api 호출하여 Json을 파싱 후 데이타모델에 넣는 방법
7. Blazor 페이지와 cs 파일/데이타 Models 최적위치
1) appsettings.json
2) WeatherDetails.razor - Blazor 페이지(Pages)
- 파라미터를 여러개 받을수 있다.
@page "/weatherdetails/{Id}"
@page "/weatherdetails/{Id}/{Value}"
@inherits WeatherDetailsBase
<div class="row justify-content-center m-3">
<div class="col-sm-8">
<div class="card">
<div class="card-body text-center">
<h4>Weather ID : @Weather.Id</h4>
<h1>Weather.Value @Weather.Value</h1>
</div>
</div>
</div>
</div>
- 데이타 모델, 웹 restApi 프로젝트 - Models - WeatherModel.cs
- RestApi에 사용될 데이타모델은 Api 프로젝트에 생성
- (본 프로젝트에서 RestApi 프로젝트를 레퍼런스 등록해놓았기 때문에 본프로젝트에서 이 데이타모델 사용가능)
using System;
namespace VippApi.ApiServices{
public class WeatherModel{
public int Id { get; set; }
public int Value { get; set; }
}
}
3) WeatherDetails.razor.cs - WeatherDetails.razor 페이지의 비하인드 cs 클래스
- 파라미터 받는법, 파라미터 값이 없어 null 일 경우 처리 예제
namespace Vipp.Pages{
public class WeatherDetailsBase : ComponentBase {
public WeatherModel Weather { get; set; } = new WeatherModel();
[Inject]public IWeatherService WeatherService { get; set; }
[Parameter]public string Id { get; set; }
[Parameter]public string Value { get; set; }
protected async override Task OnInitializedAsync() {
Id = Id ?? "1";
Value = Value ?? "0";
Weather = await WeatherService.GetWeather(int.Parse(Id) + int.Parse(Value));
}
}
}
4) 본 프로젝트에 ApiServices 폴더 - Weather 폴더 - IWeatherService.cs
IWeatherService.cs
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using VippApi.ApiServices;
namespace Vipp.ApiServices{
public interface IWeatherService{
Task<IEnumerable<WeatherModel>> GetWeathers();
Task<WeatherModel> GetWeather(int id);
}
}
5) 본 프로젝트에 ApiServices 폴더 - Weather 폴더 - WeatherService.cs
WeatherService.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;
using VippApi.ApiServices;
namespace Vipp.ApiServices{
public class WeatherService : IWeatherService {
private readonly HttpClient httpClient;
public WeatherService(HttpClient httpClient) {
this.httpClient = httpClient;
}
public async Task<WeatherModel> GetWeather(int id) {
return await httpClient.GetFromJsonAsync<WeatherModel>($"api/weather/{id}");
}
public async Task<IEnumerable<WeatherModel>> GetWeathers() {
return await httpClient.GetFromJsonAsync<WeatherModel[]>("api/weather");
}
}
}
6) 본 프로젝트 Startup.cs
public void ConfigureServices(IServiceCollection services) {
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddHttpClient<IWeatherService, WeatherService>(client => {
client.BaseAddress = new Uri(Configuration.GetSection("HttpBaseAddress")["BaseAddress"]);
//client.BaseAddress = new Uri("https://localhost:5001/");
});
..
..
..
}
[이 게시물은 sbLAB님에 의해 2022-12-22 09:41:53 Web/PHP/API에서 이동 됨]
- 이전글[.net mvc] Accept multiple parameters for API in .NET 21.10.08
- 다음글[Blazor WASM - publish Trying..] 21.12.21
댓글목록
등록된 댓글이 없습니다.
