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相互運用機能をちょっとだけコードリーディング