Initial commit

Chapter13/MyBlog/Components/Components.csproj

@@ -0,0 +1,28 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>net7.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+
+  <ItemGroup>
+    <SupportedPlatform Include="browser" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Markdig" Version="0.30.4" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="7.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.1" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\Data.Models\Data.Models.csproj" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Folder Include="Pages\Admin\" />
+  </ItemGroup>
+
+</Project>

Chapter13/MyBlog/Components/Interfaces/IBlogNotificationService.cs

@@ -0,0 +1,8 @@
+using Data.Models;
+namespace Components.Interfaces;
+
+public interface IBlogNotificationService
+{
+    event Action<BlogPost>? BlogPostChanged;
+    Task SendNotification(BlogPost post);
+}

Chapter13/MyBlog/Components/Interfaces/IBrowserStorage.cs

@@ -0,0 +1,7 @@
+namespace Components.Interfaces;
+public interface IBrowserStorage
+{
+    Task<T?> GetAsync<T>(string key);
+    Task SetAsync(string key, object value);
+    Task DeleteAsync(string key);
+}

Chapter13/MyBlog/Components/Pages/Admin/BlogPostEdit.razor

@@ -0,0 +1,138 @@
+@page "/admin/blogposts/new"
+@page "/admin/blogposts/{Id}"
+@inject IBlogApi _api
+@inject NavigationManager _manager
+@inject Components.Interfaces.IBrowserStorage _storage
+@using Components.Interfaces
+@inject IBlogNotificationService notificationService
+
+@using Components.RazorComponents
+@using Markdig;
+
+<EditForm Model="Post" OnValidSubmit="SavePost">
+    <DataAnnotationsValidator />
+    <CustomCssClassProvider ProviderType="BootstrapFieldCssClassProvider" />
+    <BlogNavigationLock @ref="NavigationLock" />
+    <InputText @bind-Value="Post.Title" />
+    <ValidationMessage For="()=>Post.Title" />
+    <InputDate @bind-Value="Post.PublishDate" />
+    <ValidationMessage For="()=>Post.PublishDate" />
+    <InputSelect @bind-Value="selectedCategory">
+        <option value="0" disabled>None selected</option>
+        @foreach (var category in Categories)
+        {
+            <option value="@category.Id">@category.Name </option>
+        }
+    </InputSelect>
+    <ul>
+        @foreach (var tag in Tags)
+        {
+            <li>
+                @tag.Name
+                @if (Post.Tags.Any(t => t.Id == tag.Id))
+                {
+                    <button type="button" @onclick="@(() => {Post.Tags.Remove(Post.Tags.Single(t=>t.Id==tag.Id)); })">Remove</button>
+                }
+                else
+                {
+                    <button type="button" @onclick="@(()=> { Post.Tags.Add(tag); })">Add</button>
+                }
+            </li>
+        }
+    </ul>
+    <InputTextAreaOnInput @bind-Value="Post.Text" @onkeyup="UpdateHTMLAsync" />
+    <ValidationMessage For="()=>Post.Text" />
+    <button type="submit" class="btn btn-success">Save</button>
+</EditForm>
+
+@((MarkupString)markDownAsHTML)
+
+@code{
+
+    [Parameter]
+    public string? Id { get; set; }
+    BlogPost Post { get; set; } = new();
+    List<Category> Categories { get; set; } = new();
+    List<Tag> Tags { get; set; } = new();
+    string? selectedCategory = null;
+    string? markDownAsHTML { get; set; }
+    BlogNavigationLock? NavigationLock { get; set; }
+
+    MarkdownPipeline pipeline = default!;
+    protected override Task OnInitializedAsync()
+    {
+        pipeline = new MarkdownPipelineBuilder()
+                 .UseEmojiAndSmiley()
+                 .Build();
+        return base.OnInitializedAsync();
+    }
+
+    protected async Task UpdateHTMLAsync()
+    {
+        if (Post.Text != null)
+        {
+            await notificationService.SendNotification(Post);
+            markDownAsHTML = Markdig.Markdown.ToHtml(Post.Text, pipeline);
+            if (string.IsNullOrEmpty(Post.Id))
+            {
+                await _storage.SetAsync("EditCurrentPost", Post);
+            }
+        }
+    }
+
+    bool hasTag(Tag tag)
+    {
+        return Post.Tags.Contains(tag);
+    }
+    protected override async Task OnParametersSetAsync()
+    {
+        if (Id != null)
+        {
+            var p = await _api.GetBlogPostAsync(Id);
+            if (p != null)
+            {
+                Post = p;
+                if (Post.Category != null)
+                {
+                    selectedCategory = Post.Category.Id;
+                }
+                await UpdateHTMLAsync();
+            }
+        }
+        Categories = (await _api.GetCategoriesAsync())??new();
+        Tags = (await _api.GetTagsAsync())?? new();
+        base.OnParametersSet();
+    }
+
+    override protected async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && string.IsNullOrEmpty(Id))
+        {
+            var saved = await _storage.GetAsync<BlogPost>("EditCurrentPost");
+            if (saved != null)
+            {
+                Post = saved;
+                StateHasChanged();
+            }
+        }
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+
+
+    public async Task SavePost()
+    {
+        if (!string.IsNullOrEmpty(selectedCategory) && Categories != null)
+        {
+            var category = Categories.FirstOrDefault(c => c.Id == selectedCategory);
+            if (category != null)
+            {
+                Post.Category = category;
+            }
+        }
+        await _api.SaveBlogPostAsync(Post);
+        NavigationLock?.CurrentEditContext.MarkAsUnmodified();
+        _manager.NavigateTo("/admin/blogposts");
+    }
+
+}

Chapter13/MyBlog/Components/Pages/Admin/BlogPostList.razor

@@ -0,0 +1,26 @@
+@page "/admin/blogposts"
+@attribute [Authorize]
+@inject IBlogApi _api
+<a href="/admin/blogposts/new">New blog post</a>
+<ul>
+    <Virtualize ItemsProvider="LoadPosts" Context="p">
+        <li>
+            @p.PublishDate
+            <a href="/admin/blogposts/@p.Id">@p.Title</a>
+        </li>
+    </Virtualize>
+</ul>
+@code {
+    public int TotalBlogposts { get; set; }
+    private async ValueTask<ItemsProviderResult<BlogPost>> LoadPosts(ItemsProviderRequest request)
+    {
+        if (TotalBlogposts == 0)
+        {
+            TotalBlogposts = await
+              _api.GetBlogPostCountAsync();
+        }
+        var numblogposts = Math.Min(request.Count, TotalBlogposts - request.StartIndex);
+        List<BlogPost> posts = (await _api.GetBlogPostsAsync(numblogposts,request.StartIndex))??new();
+        return new ItemsProviderResult<BlogPost>(posts, TotalBlogposts);
+    }
+}

Chapter13/MyBlog/Components/Pages/Admin/CategoryList.razor

@@ -0,0 +1,66 @@
+@page "/admin/categories"
+@attribute [Authorize]
+@using Components.RazorComponents
+@inject IBlogApi _api
+<h3>Categories</h3>
+<EditForm OnValidSubmit="Save" Model="Item">
+    <DataAnnotationsValidator />
+    <CustomCssClassProvider ProviderType="BootstrapFieldCssClassProvider" />
+    <InputText @bind-Value="@Item.Name"  />
+    <ValidationMessage For="@(()=>Item.Name)" />
+    <button class="btn btn-success" type="submit">Save</button>
+</EditForm>
+<ItemList Items="Items" DeleteEvent="@Delete" SelectEvent="@Select" ItemType="Category">
+    <ItemTemplate>
+        @{
+            var item = context as Category;
+            if (item != null)
+            {
+                @item.Name
+            }
+        }
+    </ItemTemplate>
+</ItemList>
+@code {
+    private List<Category> Items { get; set; } = new();
+    public Category Item { get; set; } = new();
+    protected async override Task OnInitializedAsync()
+    {
+        Items = (await _api.GetCategoriesAsync()) ?? new();
+        await base.OnInitializedAsync();
+    }
+
+    private async Task Delete(Category category)
+    {
+        try
+        {
+            await _api.DeleteCategoryAsync(category.Id!);
+            Items.Remove(category);
+        }
+        catch { }
+    }
+
+    private async Task Save()
+    {
+        try
+        {
+            await _api.SaveCategoryAsync(Item);
+            if (!Items.Contains(Item))
+            {
+                Items.Add(Item);
+            }
+            Item = new Category();
+        }
+        catch { }
+    }
+
+    private Task Select(Category category)
+    {
+        try
+        {
+            Item = category;
+        }
+        catch { }
+        return Task.CompletedTask;
+    }
+}

Chapter13/MyBlog/Components/Pages/Admin/TagList.razor

@@ -0,0 +1,67 @@
+@page "/admin/tags"
+@attribute [Authorize]
+@using Components.RazorComponents
+@inject IBlogApi _api
+<h3>Tags</h3>
+<EditForm OnValidSubmit="Save" Model="Item">
+    <DataAnnotationsValidator />
+    <CustomCssClassProvider ProviderType="BootstrapFieldCssClassProvider" />
+    <InputText @bind-Value="@Item.Name" />
+    <ValidationMessage For="@(()=>Item.Name)" />
+    <button class="btn btn-success" type="submit">Save</button>
+</EditForm>
+<ItemList Items="Items" DeleteEvent="@Delete" SelectEvent="@Select" ItemType="Tag">
+    <ItemTemplate>
+        @{
+            var item = context as Tag;
+            if (item != null)
+            {
+                @item.Name
+            }
+        }
+    </ItemTemplate>
+</ItemList>
+
+@code {
+    private List<Tag> Items { get; set; } = new List<Tag>();
+    public Tag Item { get; set; } = new Tag();
+    protected async override Task OnInitializedAsync()
+    {
+        Items = (await _api.GetTagsAsync())??new();
+        await base.OnInitializedAsync();
+    }
+
+    private async Task Delete(Tag tag)
+    {
+        try
+        {
+            await _api.DeleteTagAsync(tag.Id!);
+            Items.Remove(tag);
+        }
+        catch { }
+    }
+
+    private async Task Save()
+    {
+        try
+        {
+            await _api.SaveTagAsync(Item);
+            if (!Items.Contains(Item))
+            {
+                Items.Add(Item);
+            }
+            Item = new Tag();
+        }
+        catch { }
+    }
+
+    private Task Select(Tag tag)
+    {
+        try
+        {
+            Item = tag;
+        }
+        catch { }
+        return Task.CompletedTask;
+    }
+}

Chapter13/MyBlog/Components/Pages/AlertTest.razor

@@ -0,0 +1,11 @@
+@page "/alerttest"
+@using Components.RazorComponents
+<Alert Style="Alert.AlertStyle.Danger">
+    This is a test
+</Alert>
+<Alert Style="Alert.AlertStyle.Success">
+    <ChildContent>
+        This is another test
+    </ChildContent>
+</Alert>
+<Alert Style="Alert.AlertStyle.Success"/>

Chapter13/MyBlog/Components/Pages/AuthTest.razor

@@ -0,0 +1,19 @@
+@page "/authtest"
+
+<PageTitle>Index</PageTitle>
+
+<AuthorizeView>
+    <Authorized>
+        @foreach (var claim in context.User.Claims)
+        {
+            <p>@claim.Type - @claim.Value</p>
+        }
+    </Authorized>
+    <NotAuthorized>
+        Please login to see all the claims, <a href="authentication/login">Log in</a>
+    </NotAuthorized>
+</AuthorizeView>
+
+<AuthorizeView Roles="Administrator">
+    Only Administrators can see this.
+</AuthorizeView>

Chapter13/MyBlog/Components/Pages/Counter.razor

@@ -0,0 +1,18 @@
+@page "/counter"
+
+<PageTitle>Counter</PageTitle>
+
+<h1>Counter</h1>
+
+<p role="status">Current count: @currentCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+
+@code {
+    private int currentCount = 0;
+
+    private void IncrementCount()
+    {
+        currentCount++;
+    }
+}

Chapter13/MyBlog/Components/Pages/CounterWithParameterAndEvent.razor

@@ -0,0 +1,22 @@
+@page "/counterwithparameter"
+<h1>Counter</h1>
+<p>Current count: @CurrentCount</p>
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+@code {
+    [Parameter]
+    public int IncrementAmount { get; set; } = 1;
+    [Parameter]
+    public int CurrentCount { get; set; } = 0;
+    //private void IncrementCount()
+    //{
+    //    CurrentCount+=IncrementAmount;
+    //}
+
+    [Parameter]
+    public EventCallback<int> CurrentCountChanged { get; set; }
+    private void IncrementCount()
+    {
+        CurrentCount += IncrementAmount;
+        CurrentCountChanged.InvokeAsync(CurrentCount);
+    }
+}

Chapter13/MyBlog/Components/Pages/ErrorBoundaryDemo/ComponentWithError.razor

@@ -0,0 +1,4 @@
+<h3>ComponentWithError</h3>
+
+
+<button @onclick="@(()=>{ throw new Exception("This is an error");})">Throw error</button>

Chapter13/MyBlog/Components/Pages/ErrorBoundaryDemo/CustomErrorBoundaryDemo.razor

@@ -0,0 +1,9 @@
+@page "/customerrorboundary"
+<ErrorBoundary>
+    <ChildContent>
+		<ComponentWithError />
+	</ChildContent>
+	<ErrorContent>
+		<h1 style="color: red;">Oops... something broke</h1>
+	</ErrorContent>
+</ErrorBoundary>

Chapter13/MyBlog/Components/Pages/ErrorBoundaryDemo/ErrorBoundaryDemo.razor

@@ -0,0 +1,4 @@
+@page "/errorboundary"
+<ErrorBoundary>
+   <ComponentWithError />
+</ErrorBoundary>

Chapter13/MyBlog/Components/Pages/ErrorBoundaryTest.razor

@@ -0,0 +1,13 @@
+@page "/errorboundarytest"
+<ErrorBoundary Context=ex>
+     <ChildContent>
+        <p>@(1/zero)</p>       
+    </ChildContent>
+    <ErrorContent>
+       An error occured
+       @ex.Message
+    </ErrorContent>
+</ErrorBoundary>
+@code {
+    int zero = 0;
+}

Chapter13/MyBlog/Components/Pages/HighChartTest.razor

@@ -0,0 +1,21 @@
+@page "/HighChartTest"
+<HighChart Json="@chartjson">
+
+</HighChart>
+
+@code {
+    string chartjson = @" {
+    chart: { type: 'pie' },
+    series: [{
+        data: [{
+            name: 'Does not look like Pacman',
+            color:'black',
+            y: 20,
+        }, {
+            name: 'Looks like Pacman',
+            color:'yellow',
+            y: 80
+        }]
+    }]
+}";
+}

Chapter13/MyBlog/Components/Pages/Index.razor

@@ -0,0 +1,42 @@
+@page "/"
+@using Data.Models.Interfaces
+@using Data.Models
+@inject IBlogApi _api
+@using Markdig;
+
+<Virtualize ItemsProvider="LoadPosts" Context="p">
+    <article>
+        <h2>@p.Title</h2>
+        @((MarkupString)Markdig.Markdown.ToHtml(new string(p.Text.Take(100).ToArray()), pipeline))
+        <a href="/Post/@p.Id">Read more</a>
+    </article>
+</Virtualize>
+
+
+
+
+@code {
+    MarkdownPipeline pipeline;
+    protected override Task OnInitializedAsync()
+    {
+        pipeline = new MarkdownPipelineBuilder()
+                    .UseEmojiAndSmiley()
+                    .Build();
+        return base.OnInitializedAsync();
+    }
+
+    public int totalBlogposts { get; set; }
+    private async ValueTask<ItemsProviderResult<BlogPost>> LoadPosts(ItemsProviderRequest request)
+    {
+        if (totalBlogposts == 0)
+        {
+            totalBlogposts = await _api.GetBlogPostCountAsync();
+        }
+        var numblogposts = Math.Min(request.Count, totalBlogposts - request.StartIndex);
+        var blogposts = await _api.GetBlogPostsAsync(numblogposts, request.StartIndex);
+        return new ItemsProviderResult<BlogPost>(blogposts, totalBlogposts);
+    }
+
+
+
+}

Chapter13/MyBlog/Components/Pages/JSInteropSamples/JSToReferenceNET.razor

@@ -0,0 +1,45 @@
+@page "/jstoreferencenet"
+@implements IDisposable
+@inject IJSRuntime JS
+<h3>This is a demo how to call .NET from JavaScript using a .NET reference</h3>
+
+@*
+    This demo shows how to call a JavaScript method with an instance of a .NET object.
+    The JavaScript then calls a method on the .NET object.
+    The JavaScript file JSToReferenceNET.js is included in the _layout/index page.
+*@
+<p>
+    <label>
+        Name: <input @bind="name" />
+    </label>
+</p>
+
+<p>
+    <button @onclick="TriggerDotNetInstanceMethod">
+        Trigger .NET instance method
+    </button>
+</p>
+
+<p>
+    @result
+</p>
+
+@code {
+    private string? name;
+    private string? result;
+    private DotNetObjectReference<JSToReferenceNET>? dotNetHelper;
+
+    public async Task TriggerDotNetInstanceMethod()
+    {
+        dotNetHelper = DotNetObjectReference.Create(this);
+        result = await JS.InvokeAsync<string>("callreferencenetfromjs", dotNetHelper);
+    }
+
+    [JSInvokable]
+    public string GetHelloMessage() => $"Hello, {name}!";
+
+    public void Dispose()
+    {
+        dotNetHelper?.Dispose();
+    }
+}

Chapter13/MyBlog/Components/Pages/JSInteropSamples/JSToReferenceNET.razor.js

@@ -0,0 +1,3 @@
+window.callreferencenetfromjs = (dotNetHelper) => {
+    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
+};

Chapter13/MyBlog/Components/Pages/JSInteropSamples/JSToStaticNET.razor

@@ -0,0 +1,16 @@
+@page "/jstostaticnet"
+
+<h3>This is a demo how to call .NET from JavaScript</h3>
+
+@*
+    Note that we are using the JavaScript onclick parameter not the @onclick
+    The JavaScript file JSToStaticNET.js is included in the _layout/index page.
+*@
+<button onclick="callnetfromjs()">Show alert with message</button>
+@code {
+    [JSInvokable("NameOfTheMethod")]
+    public static Task<string> GetAMessageFromNET()
+    {
+        return Task.FromResult("This is a message from .NET");
+    }
+}

Chapter13/MyBlog/Components/Pages/JSInteropSamples/JSToStaticNET.razor.js

@@ -0,0 +1,7 @@
+
+window.callnetfromjs = () => {
+    DotNet.invokeMethodAsync('Components', 'NameOfTheMethod')
+        .then(data => {
+            alert(data);
+        });
+};

Chapter13/MyBlog/Components/Pages/JSInteropSamples/NetToJS.razor

@@ -0,0 +1,15 @@
+@page "/nettojs"
+@inject IJSRuntime jsRuntime
+
+<h3>This is a demo how to call JavaScript from .NET</h3>
+
+
+<button @onclick="ShowAlert">Show Alert</button>
+@code {
+    protected async void ShowAlert()
+    {
+        IJSObjectReference jsRef = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "/_content/Components/Pages/JSInteropSamples/NetToJS.razor.js");
+        
+        await jsRef.InvokeVoidAsync("showAlert", "Hello from .NET");
+    }
+}

Chapter13/MyBlog/Components/Pages/JSInteropSamples/NetToJS.razor.js

@@ -0,0 +1,3 @@
+export function showAlert(message) {
+    return alert(message);
+} 

Chapter13/MyBlog/Components/Pages/ParentCounter.razor

@@ -0,0 +1,10 @@
+@page "/parentcounter"
+<CounterWithParameterAndEvent IncrementAmount="@incrementamount" @bind-CurrentCount="currentcount"/>
+The current count is: @currentcount
+@code {
+    int incrementamount = 10;
+    int currentcount = 0;
+
+   
+
+}

Chapter13/MyBlog/Components/Pages/Post.razor

@@ -0,0 +1,56 @@
+@page "/post/{BlogPostId}"
+@inject IBlogApi _api
+@inject NavigationManager _navman
+@using Components.Interfaces
+@inject IBlogNotificationService notificationService
+@implements IDisposable
+
+@using Markdig
+@if (BlogPost != null)
+{
+    <PageTitle>@BlogPost.Title</PageTitle>
+    <HeadContent>
+    <meta property="og:title" content="@BlogPost.Title" />
+    <meta property="og:description" content="@(new string(BlogPost.Text.Take(100).ToArray()))" />
+    <meta property="og:image" content="@($"{_navman.BaseUri}/pathtoanimage.png")" />
+    <meta property="og:url" content="@_navman.Uri" />
+    <meta name="twitter:card" content="@(new string(BlogPost.Text.Take(100).ToArray()))" />
+    </HeadContent>
+
+    <h2>@BlogPost.Title</h2>
+    @((MarkupString)Markdig.Markdown.ToHtml(BlogPost.Text, pipeline))
+}
+
+@code {
+    [Parameter]
+    public string BlogPostId { get; set; } = default!;
+
+    public BlogPost? BlogPost { get; set; }
+    protected async override Task OnParametersSetAsync()
+    {
+        BlogPost = await _api.GetBlogPostAsync(BlogPostId);
+        await base.OnParametersSetAsync();
+    }
+    MarkdownPipeline pipeline;
+    protected override Task OnInitializedAsync()
+    {
+        notificationService.BlogPostChanged += PostChanged;
+        pipeline = new MarkdownPipelineBuilder()
+                 .UseEmojiAndSmiley()
+                 .Build();
+        return base.OnInitializedAsync();
+    }
+    private async void PostChanged(BlogPost post)
+    {
+        if (BlogPost?.Id == post.Id)
+        {
+            BlogPost = post;
+            await InvokeAsync(() => this.StateHasChanged());
+        }
+    }
+    void IDisposable.Dispose()
+    {
+        notificationService.BlogPostChanged -= PostChanged;
+    }
+
+}

Chapter13/MyBlog/Components/Pages/SetFocus.razor

@@ -0,0 +1,8 @@
+@page "/setfocus"
+
+<input @ref="textInput" />
+<button @onclick="() => textInput.FocusAsync()">Set focus</button>
+
+@code {
+    ElementReference textInput;
+}

Chapter13/MyBlog/Components/Pages/ThrowException.razor

@@ -0,0 +1,2 @@
+@page "/ThrowException"
+<button @onclick="@(()=> {throw new Exception("Something is broken"); })">Throw an exception</button>

Chapter13/MyBlog/Components/RazorComponents/Alert.razor

@@ -0,0 +1,20 @@
+<div class="@($"alert alert-{Style.ToString().ToLower()}")" role="alert">
+    @ChildContent
+</div>
+@code{
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }      =@<b>This is a default value</b>;
+    [Parameter]
+    public AlertStyle Style { get; set; }
+    public enum AlertStyle
+    {
+        Primary,
+        Secondary,
+        Success,
+        Danger,
+        Warning,
+        Info,
+        Light,
+        Dark
+    }
+}

Chapter13/MyBlog/Components/RazorComponents/BlogNavigationLock.razor

@@ -0,0 +1,42 @@
+@inject IJSRuntime JSRuntime
+@implements IDisposable
+
+<NavigationLock 
+    ConfirmExternalNavigation="@(CurrentEditContext.IsModified())"
+    OnBeforeInternalNavigation="OnBeforeInternalNavigation" />
+
+@code{
+    [CascadingParameter]
+    public required EditContext CurrentEditContext { get; set; }
+    public string InternalNavigationMessage { get; set; } = "You are about to loose changes, are you sure you want to navigate away?";
+
+    protected override Task OnInitializedAsync()
+    {
+        CurrentEditContext.OnFieldChanged += OnFieldChangedAsync;
+        return base.OnInitializedAsync();
+    }
+
+    private async void OnFieldChangedAsync(object? sender,FieldChangedEventArgs args)
+    {
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task OnBeforeInternalNavigation(LocationChangingContext context)
+    {
+        if (CurrentEditContext.IsModified())
+        {
+            var isConfirmed = await JSRuntime.InvokeAsync<bool>("confirm",
+                InternalNavigationMessage);
+
+            if (!isConfirmed)
+            {
+                context.PreventNavigation();
+            }
+        }
+    }
+
+    void IDisposable.Dispose()
+    {
+        CurrentEditContext.OnFieldChanged -= OnFieldChangedAsync;
+    }
+}

Chapter13/MyBlog/Components/RazorComponents/BootstrapFieldCssClassProvider.cs

@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Components.Forms;
+namespace Components;
+public class BootstrapFieldCssClassProvider : FieldCssClassProvider
+{
+    public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier)
+    {
+        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();
+        var isModified = editContext.IsModified(fieldIdentifier);
+        return (isModified, isValid) switch
+        {
+            (true, true) => "form-control modified is-valid",
+            (true, false) => "form-control modified is-invalid",
+            (false, true) => "form-control",
+            (false, false) => "form-control"
+        };
+    }
+}

Chapter13/MyBlog/Components/RazorComponents/CustomCssClassProvider.cs

@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+namespace Components;
+
+public class CustomCssClassProvider<ProviderType> : ComponentBase where ProviderType : FieldCssClassProvider, new()
+{
+    [CascadingParameter]
+    EditContext? CurrentEditContext { get; set; }
+    public ProviderType Provider { get; set; } = new ProviderType();
+    protected override void OnInitialized()
+    {
+        if (CurrentEditContext == null)
+        {
+            throw new InvalidOperationException($"{nameof(CustomCssClassProvider<ProviderType>)} requires a cascading parameter of type {nameof(EditContext)}. For example, you can use {nameof(CustomCssClassProvider<ProviderType>)} inside an EditForm.");
+        }
+        CurrentEditContext.SetFieldCssClassProvider
+         (Provider);
+    }
+}

Chapter13/MyBlog/Components/RazorComponents/HighChart.razor

@@ -0,0 +1,29 @@
+@inject Microsoft.JSInterop.IJSRuntime jsruntime
+
+<div>
+    <div id="@id.ToString()"></div>
+</div>
+
+@code
+{
+    [Parameter] public string Json { get; set; }
+    private string id { get; set; } = "Highchart" + Guid.NewGuid().ToString();
+
+
+    protected override void OnParametersSet()
+    {
+        StateHasChanged();
+        base.OnParametersSet();
+    }
+    IJSObjectReference jsmodule;
+    protected async override Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!string.IsNullOrEmpty(Json))
+        {
+            jsmodule = await jsruntime.InvokeAsync<IJSObjectReference>("import", "/_content/Components/RazorComponents/HighChart.razor.js");
+            await jsmodule.InvokeAsync<string>("loadHighchart", new object[] { id, Json });
+        }
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+}

Chapter13/MyBlog/Components/RazorComponents/HighChart.razor.js

@@ -0,0 +1,8 @@
+export function loadHighchart(id, json) {
+var obj = looseJsonParse(json);
+    Highcharts.chart(id, obj);
+};
+
+export function looseJsonParse(obj) {
+    return Function('"use strict";return (' + obj + ')')();
+}

Chapter13/MyBlog/Components/RazorComponents/ILoginStatus.cs

@@ -0,0 +1,5 @@
+namespace Components.RazorComponents;
+
+public interface ILoginStatus
+{
+}

Chapter13/MyBlog/Components/RazorComponents/InputTextAreaOnInput.cs

@@ -0,0 +1,22 @@
+using System.Diagnostics.CodeAnalysis;
+using Microsoft.AspNetCore.Components.Rendering;
+namespace Microsoft.AspNetCore.Components.Forms;
+public class InputTextAreaOnInput :
+ InputBase<string?>
+{
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        builder.OpenElement(0, "textarea");
+        builder.AddMultipleAttributes(1, AdditionalAttributes);
+        builder.AddAttribute(2, "class", CssClass);
+        builder.AddAttribute(3, "value", BindConverter.FormatValue(CurrentValue));
+        builder.AddAttribute(4, "oninput", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
+        builder.CloseElement();
+    }
+    protected override bool TryParseValueFromString(string? value, out string? result, [NotNullWhen(false)] out string? validationErrorMessage)
+    {
+        result = value;
+        validationErrorMessage = null;
+        return true;
+    }
+}

Chapter13/MyBlog/Components/RazorComponents/ItemList.razor

@@ -0,0 +1,36 @@
+@typeparam ItemType
+@using System.Collections.Generic
+@inject IJSRuntime jsRuntime
+
+<h3>List</h3>
+<table>
+    <Virtualize Items="@Items" Context="item">
+        <tr>
+            <td>
+                <button class="btn btn-primary" @onclick="@(()=>{SelectEvent.InvokeAsync(item); })">                  Select</button>
+            </td>
+            <td>@ItemTemplate(item)</td>
+            <td><button class="btn btn-danger" @onclick="@(async ()=>{ if (await ShouldDelete()) { await DeleteEvent.InvokeAsync(item); } })">Delete</button></td>
+        </tr>
+    </Virtualize>
+</table>
+
+
+@code{
+    [Parameter]
+    public List<ItemType> Items { get; set; } = new List<ItemType>();
+    [Parameter, EditorRequired]
+    public required RenderFragment<ItemType> ItemTemplate { get; set; }
+    [Parameter]
+    public EventCallback<ItemType> DeleteEvent { get; set; }
+    [Parameter]
+    public EventCallback<ItemType> SelectEvent { get; set; }
+    
+    IJSObjectReference jsmodule;
+    private async Task<bool> ShouldDelete()
+    {
+        jsmodule = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "/_content/Components/RazorComponents/ItemList.razor.js");
+        return await jsmodule.InvokeAsync<bool>("showConfirm", "Are you sure?");
+    }
+
+}

Chapter13/MyBlog/Components/RazorComponents/ItemList.razor.js

@@ -0,0 +1,3 @@
+export function showConfirm(message) {
+    return confirm(message);
+}

Chapter13/MyBlog/Components/RazorComponents/LoginStatus.razor

@@ -0,0 +1,9 @@
+@implements ILoginStatus
+<AuthorizeView>
+    <Authorized>
+        <a href="authentication/logout">Log out</a>
+    </Authorized>
+    <NotAuthorized>
+        <a href="authentication/login?redirectUri=/">Log in</a>
+    </NotAuthorized>
+</AuthorizeView>

Chapter13/MyBlog/Components/Shared/MainLayout.razor

@@ -0,0 +1,20 @@
+@inherits LayoutComponentBase
+@inject ILoginStatus status
+<div class="page">
+    <AuthorizeView Roles="Administrator">
+        <div class="sidebar">
+            <NavMenu />
+        </div>
+    </AuthorizeView>
+
+
+    <main>
+        <div class="top-row px-4">
+            <DynamicComponent Type="@status.GetType()" />
+        </div>
+
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+</div>

Chapter13/MyBlog/Components/Shared/MainLayout.razor.css

@@ -0,0 +1,82 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+.sidebar {
+    background-image: linear-gradient(180deg, var(--bs-body-bg) 0%,var(--bs-gray-800) 70%);
+}
+
+
+.top-row {
+    background-color: var(--bs-primary);
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+        text-decoration: none;
+        color: white
+    }
+
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
+
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row:not(.auth) {
+        display: none;
+    }
+
+    .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}

Chapter13/MyBlog/Components/Shared/NavMenu.razor

@@ -0,0 +1,41 @@
+<div class="top-row pl-4 navbar navbar-dark">
+    <a class="navbar-brand" href="">MyBlog Admin</a>
+    <button class="navbar-toggler" @onclick="ToggleNavMenu">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+</div>
+<div class="@NavMenuCssClass" @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="Admin/Blogposts">
+                <span class="oi oi-signpost" aria-hidden="true"></span> Blog posts
+            </NavLink>
+        </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="Admin/Tags">
+                <span class="oi oi-tags" aria-hidden="true"></span> Tags
+            </NavLink>
+        </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="Admin/Categories">
+                <span class="oi oi-tags" aria-hidden="true"></span> Categories
+            </NavLink>
+        </li>
+    </ul>
+</div>
+
+@code {
+    private bool collapseNavMenu = true;
+
+    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    private void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+}

Chapter13/MyBlog/Components/Shared/NavMenu.razor.css

@@ -0,0 +1,68 @@
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-row {
+    height: 3.5rem;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.oi {
+    width: 2rem;
+    font-size: 1.1rem;
+    vertical-align: text-top;
+    top: -2px;
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+    .nav-item:first-of-type {
+        padding-top: 1rem;
+    }
+
+    .nav-item:last-of-type {
+        padding-bottom: 1rem;
+    }
+
+    .nav-item ::deep a {
+        color: #d7d7d7;
+        border-radius: 4px;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        line-height: 3rem;
+    }
+
+.nav-item ::deep a.active {
+    background-color: rgba(255,255,255,0.25);
+    color: white;
+}
+
+.nav-item ::deep a:hover {
+    background-color: rgba(255,255,255,0.1);
+    color: white;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        display: none;
+    }
+
+    .collapse {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+    }
+    
+    .nav-scrollable {
+        /* Allow sidebar to scroll for tall menus */
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
+}

Chapter13/MyBlog/Components/Shared/SurveyPrompt.razor

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

Chapter13/MyBlog/Components/_Imports.razor

@@ -0,0 +1,13 @@
+@using System.Net.Http
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.JSInterop
+@using Components.Pages
+@using Components.Shared
+@using Data.Models.Interfaces
+@using Data.Models
+@using Microsoft.AspNetCore.Components.Authorization 
+@using Components.RazorComponents

Chapter13/MyBlog/Components/wwwroot/exampleJsInterop.js

@@ -0,0 +1,6 @@
+// This is a JavaScript module that is loaded on demand. It can export any number of
+// functions, and may import other JavaScript modules if required.
+
+export function showPrompt(message) {
+  return prompt(message, 'Type anything here');
+}