Blazor 앱에서 section 태그를 지정하여 화면 점프

10168 단어 BlazorASP.NET_Core
Blazor의 클라이언트 앱에서 section 태그를 지정하고 JavaScript를 사용하여 화면으로 이동합니다.



개발 환경



Windows10
Visual Studio 2019
.Net Core 3.0
Blazor template Version: 3.0.0-preview9.19465.2

index.html에 JavaScript 작성


wwwroot\index.html에 JavaScript를 작성합니다. 화면상에서는 이 Script의 처리가 불립니다.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>BlazorApp9</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />

    <!--scrollIntoViewを行う処理-->
    <script>
        window.scrollToElementId = (elementId) => {
            console.info('scrolling to element', elementId);
            var element = document.getElementById(elementId);
            if (!element) {
                console.warn('element was not found', elementId);
                return false;
            }
            element.scrollIntoView();
            return true;
        }
    </script>

</head>
<body>
    <app>Loading...</app>

    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

호출자 처리



razor 페이지에서 JavaScript 처리를 호출합니다. 이 예에서는 기본 프로젝트 Pages\FetchData.razor에 처리를 작성합니다.

FetchData.razor
@page "/fetchdata"
@inject HttpClient Http
@inject IJSRuntime JSRuntime      @*追加*@

@*Topのsection*@
<section id="top" />

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@*下へジャンプするボタン*@
<button class="btn btn-primary" @onclick="onbottom">下へ</button>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}
@*bottomのsection*@
<section id="bottom" />
@*上へジャンプするボタン*@
<button class="btn btn-primary" @onclick="ontop">上へ</button>

@code {

    /// <summary>
    /// 下へジャンプ
    /// </summary>
    void onbottom()
    {
        JSRuntime.InvokeAsync<bool>("scrollToElementId", "bottom");
    }

    /// <summary>
    /// 上へジャンプ
    /// </summary>
    void ontop()
    {
        JSRuntime.InvokeAsync<bool>("scrollToElementId", "top");
    }



    WeatherForecast[] forecasts;


    protected override async Task OnInitializedAsync()
    {
        var tmp = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");

        var l = new List<WeatherForecast>();

        for (int i = 0; i < 5; i++)
        {
            l.AddRange(tmp);
        }

        forecasts = l.ToArray();

    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

움직임이 있는 페이지를 만들려고 하면 아직 JavaScript가 필요하다고 느낍니다.

참고 기사



Scroll to specified part of page when clicking top navigation link in Blazor
Blazor의 JavaScript 상호 운용 기능을 조금 코드 읽기
ASP.NET Core MVC 코드 우선 단일 테이블 샘플
.NET Core2.2에서 IFormFile을 모델과 함께 나열하면 Post가 끝나지 않습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage