Add project files.

PaginationTest.Client/App.cshtml

@@ -0,0 +1,5 @@
+<!--
+    Configuring this here is temporary. Later we'll move the app config
+    into Program.cs, and it won't be necessary to specify AppAssembly.
+-->
+<Router AppAssembly=typeof(Program).Assembly />

PaginationTest.Client/Pages/Index.cshtml

@@ -0,0 +1,7 @@
+@page "/"
+
+<h1>Hello, world!</h1>
+
+Welcome to your new app.
+
+<SurveyPrompt Title="How is Blazor working for you?" />

PaginationTest.Client/Pages/NextPrevFetchData.cshtml

@@ -0,0 +1,90 @@
+@using System.Net
+@using PaginationTest.Shared
+@page "/nextprevfetchdata"
+@inject HttpClient Http
+
+<h1>Page Size/Page Number Pagination Example</h1>
+
+<p>This component demonstrates fetching paginated data from the server.</p>
+
+@if (_students == null)
+{
+    <p><em>Loading...</em></p>
+}
+else
+{
+    <nav aria-label="Page navigation example">
+        <ul class="pagination">
+            @if (currentPageNumber > 1)
+            {
+                <li class="page-item">
+                    <a class="page-link" href="javascript:void(0)" onclick=@(async () => await LoadDataAsync(continuationTokens[1], _pageSize, 1))>First</a>
+                </li>
+            }
+
+            @if (currentPageNumber > 1)
+            {
+                <li class="page-item">
+                    <a class="page-link" href="javascript:void(0)" onclick=@(async () => await LoadDataAsync(continuationTokens[currentPageNumber - 1], _pageSize, currentPageNumber - 1))>Previous</a>
+                </li>
+            }
+
+            @if (_students.Pager.HasNextPage)
+            {
+                <li class="page-item">
+                    <a class="page-link" href="javascript:void(0)" onclick=@(async ()=>await LoadDataAsync(_students.Pager.ContinuationToken, _pageSize, currentPageNumber + 1))>Next</a>
+                </li>
+            }
+        </ul>
+    </nav>
+
+    <table class="table">
+        <thead>
+            <tr>
+                <th>First Name</th>
+                <th>Last Name</th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (var student in _students.Items)
+            {
+                <tr>
+                    <td>@student.FirstName</td>
+                    <td>@student.LastName</td>
+                </tr>
+            }
+        </tbody>
+    </table>
+
+}
+
+@functions {
+    NextPrevPagedData<Student> _students;
+    int currentPageNumber = 1;
+    int _pageSize = 10;
+    IDictionary<int, string> continuationTokens = new Dictionary<int, string>();
+
+    protected override async Task OnInitAsync()
+    {
+        await LoadDataAsync(String.Empty, _pageSize);
+    }
+
+    protected async Task LoadDataAsync(string continuationToken, int pageSize, int pageNum = 1)
+    {
+        if (continuationTokens.ContainsKey(pageNum))
+        {
+
+            _students = await Http.GetJsonAsync<NextPrevPagedData<Student>>($"api/students/nextprev?continuationToken={WebUtility.UrlEncode(continuationToken)}&pageSize={pageSize}");
+            _pageSize = pageSize;
+            currentPageNumber = pageNum;
+            return;
+        }
+
+        currentPageNumber = pageNum;
+        _students = await Http.GetJsonAsync<NextPrevPagedData<Student>>($"api/students/nextprev?continuationToken={WebUtility.UrlEncode(continuationToken)}&pageSize={pageSize}");
+        _pageSize = pageSize;
+
+        continuationTokens[currentPageNumber] = continuationToken;
+        continuationTokens[currentPageNumber + 1] = _students.Pager.ContinuationToken;
+    }
+}

PaginationTest.Client/Pages/SkipTakeFetchData.cshtml

@@ -0,0 +1,95 @@
+@using PaginationTest.Shared
+@page "/skiptakefetchdata"
+@inject HttpClient Http
+
+<h1>Page Size/Page Number Pagination Example</h1>
+
+<p>This component demonstrates fetching paginated data from the server.</p>
+
+@if (_students == null)
+{
+    <p><em>Loading...</em></p>
+}
+else
+{
+
+    if (_students.NumSizePager.EndPage > 1)
+    {
+        <form class="form-inline">
+
+            <div class="form-group mb-2">
+                <label for="pageSize" class="col-sm-3">Page Size</label>
+                <div class="form-group mx-sm-3 mb-2">
+                    <input type="number" class="form-control" id="pageSize" value="@(_pageSize)" bind="@(_pageSize)" placeholder="Page size" />
+                    <a href="javascript:void(0)" onclick=@(async () => await LoadDataAsync(1, _pageSize)) class="btn btn-primary mb-2">Update</a>
+                </div>
+            </div>
+        </form>
+        <nav aria-label="Page navigation example">
+            <ul class="pagination">
+                @if (_students.NumSizePager.CurrentPage > 1)
+                {
+                    <li class="page-item">
+                        <a class="page-link" href="javascript:void(0)" onclick=@(async () => await LoadDataAsync(1, _pageSize))>First</a>
+                    </li>
+                    <li class="page-item">
+                        <a class="page-link" href="javascript:void(0)" onclick=@(async () => await LoadDataAsync(_students.NumSizePager.CurrentPage - 1, _pageSize))>Previous</a>
+                    </li>
+                }
+
+                @for (var page = _students.NumSizePager.StartPage; page <= _students.NumSizePager.EndPage; page++)
+                {
+                    <li class="page-item @(page == _students.NumSizePager.CurrentPage ? "active" : "")">
+                        @{ var currentPage = page;}
+                        <a class="page-link" href="javascript:void(0)" onclick=@(async () => await LoadDataAsync(currentPage, _pageSize))>@(currentPage)</a>
+                    </li>
+                }
+
+                @if (_students.NumSizePager.CurrentPage < _students.NumSizePager.TotalPages)
+                {
+                    <li class="page-item">
+                        <a class="page-link" href="javascript:void(0)" onclick=@(async () => await LoadDataAsync(_students.NumSizePager.CurrentPage + 1, _pageSize))>Next</a>
+                    </li>
+                    <li class="page-item">
+                        <a class="page-link" href="javascript:void(0)" onclick=@(async () => await LoadDataAsync(_students.NumSizePager.TotalPages, _pageSize))>Last</a>
+                    </li>
+                }
+            </ul>
+        </nav>
+    }
+
+    <table class="table">
+        <thead>
+            <tr>
+                <th>First Name</th>
+                <th>Last Name</th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (var student in _students.Items)
+            {
+                <tr>
+                    <td>@student.FirstName</td>
+                    <td>@student.LastName</td>
+                </tr>
+            }
+        </tbody>
+    </table>
+
+}
+
+@functions {
+NumSizePagedData<Student> _students;
+int _pageSize = 10;
+
+protected override async Task OnInitAsync()
+{
+    await LoadDataAsync(1, _pageSize);
+}
+
+protected async Task LoadDataAsync(int page, int pageSize)
+{
+    _students = await Http.GetJsonAsync<NumSizePagedData<Student>>($"api/students/skiptake?page={page}&pageSize={pageSize}");
+    _pageSize = pageSize;
+}
+}

PaginationTest.Client/Pages/_ViewImports.cshtml

@@ -0,0 +1 @@
+@layout MainLayout

PaginationTest.Client/PaginationTest.Client.csproj

@@ -0,0 +1,24 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>netstandard2.0</TargetFramework>
+    <OutputType>Exe</OutputType>
+    <LangVersion>7.3</LangVersion>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.6.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.6.0" PrivateAssets="all" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\PaginationTest.Shared\PaginationTest.Shared.csproj" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Content Update="Pages\NextPrevFetchData.cshtml">
+      <Pack>$(IncludeRazorContentInPack)</Pack>
+    </Content>
+  </ItemGroup>
+
+</Project>

PaginationTest.Client/Program.cs

@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.Blazor.Hosting;
+
+namespace PaginationTest.Client
+{
+    public class Program
+    {
+        public static void Main(string[] args)
+        {
+            CreateHostBuilder(args).Build().Run();
+        }
+
+        public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
+            BlazorWebAssemblyHost.CreateDefaultBuilder()
+                .UseBlazorStartup<Startup>();
+    }
+}

PaginationTest.Client/Properties/launchSettings.json

@@ -0,0 +1,27 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:50424/",
+      "sslPort": 0
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "PaginationTest.Client": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "http://localhost:50426/"
+    }
+  }
+}

PaginationTest.Client/Shared/MainLayout.cshtml

@@ -0,0 +1,15 @@
+@inherits BlazorLayoutComponent
+
+<div class="sidebar">
+    <NavMenu />
+</div>
+
+<div class="main">
+    <div class="top-row px-4">
+        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
+    </div>
+
+    <div class="content px-4">
+        @Body
+    </div>
+</div>

PaginationTest.Client/Shared/NavMenu.cshtml

@@ -0,0 +1,35 @@
+<div class="top-row pl-4 navbar navbar-dark">
+    <a class="navbar-brand" href="">PaginationTest</a>
+    <button class="navbar-toggler" onclick=@ToggleNavMenu>
+        <span class="navbar-toggler-icon"></span>
+    </button>
+</div>
+
+<div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>
+    <ul class="nav flex-column">
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match=NavLinkMatch.All>
+                <span class="oi oi-home" aria-hidden="true"></span> Home
+            </NavLink>
+        </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="skiptakefetchdata">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Skip/Take Example
+            </NavLink>
+        </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="nextprevfetchdata">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Next/Prev Example
+            </NavLink>
+        </li>
+    </ul>
+</div>
+
+@functions {
+    bool collapseNavMenu = true;
+
+    void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+}

PaginationTest.Client/Shared/SurveyPrompt.cshtml

@@ -0,0 +1,15 @@
+<div class="alert alert-secondary mt-4" role="alert">
+    <span class="oi oi-pencil mr-2" aria-hidden="true"></span> 
+    <strong>@Title</strong>
+
+    <span class="text-nowrap">
+        Please take our
+        <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2026993">brief survey</a>
+    </span>
+    and tell us what you think.
+</div>
+
+@functions {
+    [Parameter]
+    string Title { get; set; } // Demonstrates how a parent component can supply parameters
+}

PaginationTest.Client/Startup.cs

@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Blazor.Builder;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace PaginationTest.Client
+{
+    public class Startup
+    {
+        public void ConfigureServices(IServiceCollection services)
+        {
+        }
+
+        public void Configure(IBlazorApplicationBuilder app)
+        {
+            app.AddComponent<App>("app");
+        }
+    }
+}

PaginationTest.Client/_ViewImports.cshtml

@@ -0,0 +1,6 @@
+@using System.Net.Http
+@using Microsoft.AspNetCore.Blazor.Layouts
+@using Microsoft.AspNetCore.Blazor.Routing
+@using Microsoft.JSInterop
+@using PaginationTest.Client
+@using PaginationTest.Client.Shared