Not able to invoke method call from Theme's Default razor component.

[techravi007]

I have created a test theme, and from Default.razor theme component, I'm trying to invoke a method call from button component but it never hit the defined method. Please see the below code snippet and pl advise what I'm doing wrong here..
Oqtane Version- 520
Can someone help me to figure out the issues?

Thanks for any help or suggestions.
🙏

@namespace Oqtane.Theme.TestTheme
@inherits ThemeBase
@inject ISettingService SettingService
@inject IJSRuntime JS

<div class="wrapper">
    <div class="main-panel">
		<div><!-- Nav menu goes here --></div>
        <div class="main-header">
            <!-- Userprofile,Login,Ctrl Pnl etc. goes here -->
        </div>
        <div class="container">
            <div class="page-inner">
                <Pane Name="@PaneNames.Default" />
            </div>
        </div>
        <footer class="footer">
            <div class="container-fluid d-flex justify-content-between">
                <!-- Footer Content gores here -->
            </div>
        </footer>
    </div>
    @if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
    {
        <div>
            <button type="button" class="btn btn-icon btn-round btn-success" @onclick="Save">
                        <i class="fa fa-check"></i>
            </button>
        </div>
    }
</div>

@code {
    public override string Name => "Default";
    public override string Panes => PaneNames.Default;

    private bool _login = true;
    private bool _register = true;

    protected override void OnParametersSet()
    {
        try
        {
            var settings = SettingService.MergeSettings(PageState.Site.Settings, PageState.Page.Settings);
            _login = bool.Parse(SettingService.GetSetting(settings, GetType().Namespace + ":Login", "true"));
            _register = bool.Parse(SettingService.GetSetting(settings, GetType().Namespace + ":Register", "true"));
        }
        catch
        {
            // error loading theme settings
        }
    }

    private async Task Save()
    {
        try
        {
            await JS.InvokeVoidAsync("console.log", $"Clicked on save button");
        }
        catch (Exception ex)
        {
            await JS.InvokeVoidAsync("console.log", $"Clicked on save button throws exception");
        }
    }
}

[leigh-pointer]

Clicks are interactive thus you need to set the site to interactive, in your site settings.

[sbwalker]

@techravi007 by default when you create a site in Oqtane it uses Static Server Rendering (SSR). This means that the theme component will be rendered statically on the server and is not interactive - so you cannot use onclick events on buttons. I would suggest you watch the following webinar so that you can understand the different render modes in Blazor:

https://www.youtube.com/watch?v=1lsjpfdqBk0

As @leigh-pointer mentioned above, one possible option is to configure your site to be fully interactive (in Site Settings). This will make all components in the entire site render interactively. However the downside to this approach is that interactivity requires a lot of system resources and does not scale as well as static rendering. So it really depends on what you are trying to accomplish with your site.

[techravi007]

@sbwalker thanks for the detailed information and video. 🙏