Different razor component approaches

counter.razor

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-Count="@Model.StartCount" />

___above in cshtml________below in razor____________

@using Microsoft.AspNetCore.Components

<p>Current count: @Count</p>

<button @onclick="IncrementCount" class="btn btn-primary">Click me</button>

<p>count: @Count</p>

@code {
    
    [Parameter]
    public int Count { get; set; } = 0;

    private void IncrementCount()
    {
        Count++;
    }
}

counter.razor code behind with example NavigationManager net5

@inherits CounterBase

<h3>From Inside @CurrentBlock.StartCount</h3>

<p>Current count: @Count</p>

<button @onclick="IncrementCount" class="btn btn-primary">Click me</button>


___above in .razor________below in .cs____________


using Epicweb.Mvc.Blazor.Models.Blocks;
using EPiServer;
using EPiServer.Core;
using EPiServer.ServiceLocation;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;
using System.Threading.Tasks;

namespace Epicweb.Mvc.Blazor.Views
{
    public partial class CounterBase: ComponentBase
    {
        [Inject]
        private NavigationManager navigation { get; set; }
        [Inject]
        private IContentLoader contentLoader { get; set; }
        public CounterBase2() 
        {

        }
        //only for unit tests
        public CounterBase2(NavigationManager navigation, IContentLoader contentLoader)
        {
            this.navigation = navigation;
            this.contentLoader = contentLoader;
        }

        public int Count { get; set; } = 0;

        [Parameter]
        public ContentReference BlockID { get; set; }
        //[Parameter]
        public IContent Block 
        { 
            get { 
                if (CurrentBlock != null)
                    return CurrentBlock as IContent;
                if (BlockID == null)
                    return null;
                return contentLoader.Get<IContent>(BlockID);
            }
        
        }

        [Parameter]
        public CounterBlock CurrentBlock { get; set; }

        public CounterBlock CurrentBlockFromBlockID
        {
            get
            {
                if (CurrentBlock != null)
                {
                    return CurrentBlock as CounterBlock;
                }
                if (BlockID == null)
                    return null;
                return contentLoader.Get<CounterBlock>(BlockID);
            }
        }

        protected override void OnInitialized()
        {
            var querystring = System.Web.HttpUtility.ParseQueryString(new System.Uri(navigation.Uri).Query);
            if (!string.IsNullOrEmpty(querystring["count"]))
                Count = int.Parse(querystring["count"]);
            else
                Count = CurrentBlockFromBlockID.StartCount;
            navigation.LocationChanged += HandleLocationChanged;
        }

        private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
        {
            string uri = e.Location;
        }

        protected async Task IncrementCount()
        {
            Count++;
            navigation.NavigateTo("?count=" + Count);
        }

        public void Dispose()
        {
            navigation.LocationChanged -= HandleLocationChanged;
        }
    }
}

counter.razor send in blockid

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-BlockID="@(Model as IContent).ContentLink" />
    
    
___above in .razor________below in .cs____________

@using EPiServer.Core
@using EPiServer
@using Epicweb.Mvc.Blazor.Models.Blocks
@using Microsoft.AspNetCore.Components
@inject IContentLoader ContentLoader


<h3>From Inside @CurrentBlock.StartCount</h3>

<p>Current count: @Count</p>

<button @onclick="IncrementCount" class="btn btn-primary">Click me</button>


@code {


    public int Count { get; set; } = 0;

    [Parameter]
    public ContentReference BlockID { get; set; }
    public CounterBlock CurrentBlock { get
        {
            if (BlockID == null)
                return null;
            return ContentLoader.Get<CounterBlock>(BlockID);
        } 
    }

    protected override void OnInitialized()
    {
        Count = CurrentBlock.StartCount;
        base.OnInitialized();
    }

    private void IncrementCount()
    {
        Count++;
    }
}

counter.razor with code separation

@inherits CounterBase

<h3>From Inside @CurrentBlock.StartCount</h3>

<p>Current count: @Count</p>

<button @onclick="IncrementCount" class="btn btn-primary">Click me</button>


______Below counterbase.cs_____code separation_____________________

using Epicweb.Mvc.Blazor.Models.Blocks;
using EPiServer;
using EPiServer.Core;
using EPiServer.ServiceLocation;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;
using System.Threading.Tasks;

namespace Epicweb.Mvc.Blazor.Views
{
    public partial class CounterBase: ComponentBase
    {
        [Inject]
        private ProtectedLocalStorage protectedLocalStorage { get; set; }
        [Inject]
        private IContentLoader contentLoader { get; set; }
        public CounterBase() 
        {

        }
        public CounterBase(ProtectedLocalStorage protectedLocalStorage, IContentLoader contentLoader)
        {
            this.protectedLocalStorage = protectedLocalStorage;
            this.contentLoader = contentLoader;
        }
        public int Count { get; set; } = 0;

        [Parameter]
        public ContentReference BlockID { get; set; }
        public CounterBlock CurrentBlock
        {
            get
            {
                if (BlockID == null)
                    return null;
                return contentLoader.Get<CounterBlock>(BlockID);
            }
        }

        protected override void OnInitialized()
        {
            Count = CurrentBlock.StartCount;
        }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                var result = await protectedLocalStorage.GetAsync<int>("Counter.Count" + BlockID.ID);
                Count = result.Success ? result.Value : CurrentBlock.StartCount;
                StateHasChanged();
            }
        }

        protected async Task IncrementCount()
        {
            Count++;
            await protectedLocalStorage.SetAsync("Counter.Count" + BlockID.ID, Count);
        }
    }
}