Powered by Google Code Prettify

        
@page "/zoo"
@using AnimalData
@using Newtonsoft.Json
@using System.Net

<div style="display:flex;justify-content:space-between;">
<div style="width:120px;font-weight:bold">動物図鑑?</div>
<div><span style="font-size:xx-small;font-weight:bold">Powered by ASP.NET Core Web API+MongoDB</span></div>
</div>
<br/>
<p style="font-size:small">
このページはASP.NET Core 3.0 Blazor Server Side+ASP.NET Core 3.0 Web APIおよび、MongoDBを使用して作成されています。<br/>
ボタンをクリックすると、Web APIにページ番号と表示数が送られ、Web APIではMongoDB中のデータを取得して、Json形式で返します。<br/>
返されたJsonを解析し、&lt;table&gt;タグの内容を作成することで、表示内容を変更します。(画像データもMongoDBに格納されています)
<br/>
<a href="/ShowCode?FileName=Zoo.razor.src&Return=zoo">本体ソース</a>&nbsp;
<a href="/ShowCode?FileName=GetAnimalController.cs.src&Return=zoo">Web APIソース</a>
<br/>
</p>
<br/>
<br/>

@if (Animals == null) {
    <span style="font-size:large;font-weight:bold">Loading...</span>
} else {
    <div style="height:660px">
        <table style="@tableStyle">
            <tr>
                <th style="@thStyle">名前</th><th style="@thStyle">写真</th>
            </tr>
            @foreach(var ani in Animals) {
                <tr>
                    <td>@ani.Name</td>
                    @{
                        string b64str = Convert.ToBase64String(ani.Image,0,ani.Image.Length);
                    }
                    <td><img src="data:image/jpeg;base64,@b64str"/></td>
                </tr>
            }
        </table>
    </div>
    <br/>
    <div style="text-align:center">
    <button class="btn btn-primary" @onclick="firstBtnClick">First Page</button>&nbsp;&nbsp;
    <button class="btn btn-primary" @onclick="prevBtnClick" disabled="@prevDisabled">&lt;&lt;</button>&nbsp;&nbsp;
    <button class="btn btn-primary" @onclick="nextBtnClick" disabled="@nextDisabled">&gt;&gt;</button>&nbsp;&nbsp;
    <button class="btn btn-primary" @onclick="lastBtnClick">Last Page</button>
    </div>
}
<br/>
<br/>

@code { // ここからコード
    private const string tableStyle = "border-style:solid;boder-color:darkgreen;border-collapse:collapse;border-width:1px";
    private const string tdStyle = "border-style:solid;boder-color:darkgreen;border-width:1px";
    private const string thStyle = "border-style:solid;boder-color:darkgreen;border-width:1px;background-color:darkgreen;color:white;width:150px";

    private bool prevDisabled;    // <<ボタンのディセーブル
    private bool nextDisabled;    // >>ボタンのディセーブル
    private int currentPage;        // 現在表示されているページ
    private int pageCount = 0;      // 全ページ数
    private const int ITEMS_IN_PAGE = 2;    // 1度に表示するアイテム数

    private List<Animal> Animals = null;

    // ページ初期化時処理(awaitを使用するのでasyncバージョン)
    protected override async Task OnInitializedAsync() {
        currentPage = 0;
        await GetItem();
        ChangeButtonStatus();
    }
    // ボタン状態の変更
    private void ChangeButtonStatus() {
        if (currentPage == 0) {
            prevDisabled = true;
        } else {
            prevDisabled = false;
        }
        if (currentPage == (pageCount-1)) {
            nextDisabled = true;
        } else {
            nextDisabled = false;
        }
    }
    // >>ボタン処理
    private async Task nextBtnClick() {
        currentPage++;
        ChangeButtonStatus();
        await GetItem();
    }
    // <<ボタン処理
    private async Task prevBtnClick() {
        currentPage--;
        ChangeButtonStatus();
        await GetItem();
    }
    // Firstボタン処理
    private async Task firstBtnClick() {
        currentPage = 0;
        ChangeButtonStatus();
        await GetItem();
    }
    // Lastボタン処理
    private async Task lastBtnClick() {
        currentPage = pageCount - 1;
        ChangeButtonStatus();
        await GetItem();
    }
    // アイテムの取得
    //  Web API使用
    private async Task GetItem() {
        HttpClient cli = new HttpClient();
        string ret = await cli.GetStringAsync(new Uri($"http://・・・/api/GetAnimal?page={currentPage}&itemcount=2"));
        AnimalList animals = JsonConvert.DeserializeObject<AnimalList>(ret);
        pageCount = animals.PageCount;
        Animals = animals.Animals;
    }
}