[Blazor] Blazor *.razor 페이지의 route parameters / Rest Api > Web/Blazor

본문 바로가기
사이트 내 전체검색

Web/Blazor

[Blazor] Blazor *.razor 페이지의 route parameters / Rest Api

페이지 정보

작성자 sbLAB 댓글 0건 조회 45회 작성일 21-10-05 08:01

본문


https://youtu.be/7jSiBDkW0qI 

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

  "HttpBaseAddress": {
    "BaseAddress""https://localhost:5001/"
  }

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 { getset; }
        public int Value { getset; }
    }
}


3) WeatherDetails.razor.cs  -  WeatherDetails.razor 페이지의 비하인드 cs 클래스
-  파라미터 받는법, 파라미터 값이 없어  null 일 경우 처리 예제
namespace  Vipp.Pages{
    public class WeatherDetailsBase : ComponentBase {
        public WeatherModel Weather { getset; } = new WeatherModel();

        [Inject]public IWeatherService WeatherService { getset; }

      [Parameter]public string Id { getset; }
      [Parameter]public string Value { getset; }

        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<WeatherModelGetWeather(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<WeatherModelGetWeather(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<IWeatherServiceWeatherService>(client => {
                client.BaseAddress = new Uri(Configuration.GetSection("HttpBaseAddress")["BaseAddress"]);
                //client.BaseAddress = new Uri("https://localhost:5001/");
            });
            ..
            ..
            ..
        }









댓글목록

등록된 댓글이 없습니다.

회원로그인

접속자집계

오늘
49
어제
71
최대
124
전체
31,281

그누보드5
Copyright © sebom.com All rights reserved.