Qita Advent Calendar 2019 C# 기사입니다.C#WEB 앱으로 만들 수 있는 블레이저의 좋은 곳, 로드맵 등을 기재하고 싶지만, 드래곤 퀘워크로 토산물 근처를 조사하고 싶은데 눈치채면 코드가 적혀있어요!지금 반성하고 있어요...
Demo

현인 몇 명을 폭로하다.

개요

지금부터 용자 두악용 워커 특산품에 가까운 순서로 표시된다.나는 PC의 브라우저는 기본적으로 문제가 없다고 생각하지만, 브라우저에 따라 작동할 수 없을 것이다.GeoLocation 정보는 브라우저에서 가져옵니다JavaScript.장비에 따라 GPS의 정밀도도 편차가 있기 때문에 정확한 거리가 반드시 생기지는 않을 때도 있다.
블라조르는 JavaScriptレス를 포인트로 한 느낌이지만, 현재는 JavaScript와도 잘라내지 못하는 관계다.

블라조르의 설명.HTML에서 인라인 C# 인코딩

Razor 문법에 익숙해지면 매우 가볍다.C#를 사용하면 요소를 직관적으로 볼 수 있기 때문에 이 부분을 유창하게 쓸 수 있을 거라고 생각합니다.또한LINQ'バババ'도 사용할 수 있다.
Index.Razor

@page "/"
@inject HttpClient Http

@using AspNetMonsters.Blazor.Geolocation
@inject LocationService  LocationService
<h3>ドラクエウォーク　現在地から近いところTop20</h3>

@*データがある場合、表示*@
@if(Datas.Any())
{
    @foreach (var d in Datas)
    {
        <SurveyPrompt Title="@(Pres.Where(p=>p.Id==d.Pre).First().Name)" Data="@d"/>
    }
}

@functions
{
    Location location;

    private Omiyage[] Datas = new Omiyage[0];

    private Pre[] Pres = new Pre[0];


    protected async override Task OnInitializedAsync()
    {
        // 現在地取得
        location = await LocationService.GetLocationAsync();

        // お土産データ取得
        Datas = await Http.GetJsonAsync<Omiyage[]>("data.json");

        // 県名取得
        Pres = await Http.GetJsonAsync<Pre[]>("pre.json");

        //データのセット
        SetData();
    }

    //データのセット
    void SetData()
    {
        // 現在地の取得
        var lat1 = (double)location?.Latitude;
        var lon1 = (double)location?.Longitude;

        // 現在地との距離を計算
        foreach(var data in Datas)
        {
            data.SetKyori(lat1, lon1);
        }

        // 近い順に20個まで取得
        Datas = Datas.OrderBy(p => p.Kyori).Take(20).ToArray();
    }

}

Blazor의 설명.Net의 도서관은 매우 풍부하다!

Blazor Celient-Side 응용 프로그램은 WebAssembly를 통해 브라우저에서 실행됩니다.지금은 미리보기지만 실용성에 가깝죠.물론 브라우저가 할 수 있는 일을 제외하고nuget 패키지는 적용되는 패키지가 많아 기존 기술을 활용해 개발할 수 있다.
2분간 거리 계산도 한 번.이것은 브라우저에서 실행되기 때문에 위화감을 느낄 수 있다.
Model.cs

/// <summary>
/// 現在地との距離
/// </summary>
public double Kyori { get; set; }

/// <summary>
/// 距離を算出する
/// </summary>
/// <param name="lat2">現在の緯度</param>
/// <param name="lon2">現在の経度</param>
public void SetKyori(double lat2,double lon2)
{
    Kyori = new System.Device.Location.GeoCoordinate(Lat, Lon).GetDistanceTo(new System.Device.Location.GeoCoordinate(lat2, lon2));
}

Blazor에 관심이 있다면...

이 프로그램의 생성에 시간이 많이 걸리지 않았습니다. (위치 정보를 수집하는 데 시간이 필요합니다.)Blazor에 관심이 있으면 BlazorQiita Advent Calendar를 방문하십시오.