Integrating NOV in Blazor

In This Topic

NOV can be integrated in Blazor WebAssembly projects. This topic provides a step-by-step tutorial on how to achieve this.

NOV cannot be integrated in Blazor Server projects. The installation of NOV will throw an exception, if you try to do that.

Coded Integration for C#

1. Create a new Blazor Web Assembly App project in Visual Studio

From File Menu - Choose New Project
Select the "Visual C# -> Web -> Blazor Web Assembly App"
Click OK

This step is not mandatory, because you can integrate NOV in an already existing Blazor WebAssembly project. It is performed just for the purpose of making a complete installation scenario.

2. Reference the NOV Assemblies

Ensure that your application references the following NOV dlls:

Nevron.Nov.Presentation.dll - Core NOV assembly.
Nevron.Nov.Host.WebAssembly.dll - host for Blazor WebAssembly Apps.
Nevron.Nov.Barcode.dll - NOV Barcode (optional).
Nevron.Nov.Chart.dll - NOV Chart (optional).
Nevron.Nov.Diagram.dll - NOV Diagram (optional).
Nevron.Nov.Grid.dll - NOV Grid (optional).
Nevron.Nov.Schedule.dll - NOV Schedule (optional).
Nevron.Nov.Text.dll - NOV Rich Text Editor (optional).

4. Initialize the NOV Application

Locate the App.razor file in the Solution Explorer of Visual Studio and double click on it to open it. Then replace its content with the following C# code:

Installing NOV in Blazor	Copy Code
@inject IJSRuntime JSRuntime @inject NavigationManager NavigationManager @using Nevron.Nov; @using Nevron.Nov.WebAssembly; @using Nevron.Nov.IO; <Router AppAssembly="@typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> <FocusOnNavigate RouteData="@routeData" Selector="h1" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <LayoutView Layout="@typeof(MainLayout)"> <p role="alert">Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router> @code { protected override void OnInitialized() { base.OnInitialized(); // Apply license for redistribution here. You can skip this code when evaluating NOV. // NLicenseManager.Instance.SetLicense(new NLicense("LICENSE KEY")); // Install NOV NNovApplicationInstaller.Install( JSRuntime, NavigationManager.BaseUri, Nevron.Nov.Barcode.NBarcodeModule.Instance, Nevron.Nov.Text.NTextModule.Instance, Nevron.Nov.Diagram.NDiagramModule.Instance, Nevron.Nov.Chart.NChartModule.Instance, Nevron.Nov.Schedule.NScheduleModule.Instance, Nevron.Nov.Grid.NGridModule.Instance ); } }

Installing NOV in Blazor

Copy Code

@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager
@using Nevron.Nov;
@using Nevron.Nov.WebAssembly;
@using Nevron.Nov.IO;
<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>
@code {
    protected override void OnInitialized()
    {
        base.OnInitialized();
        // Apply license for redistribution here. You can skip this code when evaluating NOV.
        // NLicenseManager.Instance.SetLicense(new NLicense("LICENSE KEY"));
        // Install NOV
        NNovApplicationInstaller.Install(
            JSRuntime,
            NavigationManager.BaseUri,

            Nevron.Nov.Barcode.NBarcodeModule.Instance,
            Nevron.Nov.Text.NTextModule.Instance,
            Nevron.Nov.Diagram.NDiagramModule.Instance,
            Nevron.Nov.Chart.NChartModule.Instance,
            Nevron.Nov.Schedule.NScheduleModule.Instance,
            Nevron.Nov.Grid.NGridModule.Instance
        );
    }
}

See Hosting NOV in your Application for more information about modules.

4. Say Hello World from NOV

Open the Index.razor file and replace its content with the following code:

Hello World from NOV	Copy Code
@page "/" @using Nevron.Nov.UI @using Nevron.Nov.WebAssembly <PageTitle>Index</PageTitle> <NNovWidgetHost @ref="m_Label" TWidget="NLabel" Style="width:200px; height:20px"/> @code { NNovWidgetHost<NLabel> m_Label; protected override void OnAfterRender(bool firstRender) { base.OnAfterRender(firstRender); if (firstRender) { m_Label.Widget.Text = "Hello World from Nevron Open Vision"; } } }

Hello World from NOV

Copy Code

@page "/"
@using Nevron.Nov.UI
@using Nevron.Nov.WebAssembly
<PageTitle>Index</PageTitle>
<NNovWidgetHost @ref="m_Label" TWidget="NLabel" Style="width:200px; height:20px"/>
@code
{
    NNovWidgetHost<NLabel> m_Label;
    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if (firstRender)
        {
            m_Label.Widget.Text = "Hello World from Nevron Open Vision";
        }
    }
}

Run the application - it should display a simple page with a "Hello World from Nevron Open Vision" label inside. This is as much as is required to host some NOV content in a Blazor WebAssembly App. The sample just makes a simple label, as content of the NNovWidgetHost Blazor component, but this component can actually contain any NOV widget. See the UI Overview topic for an overview of the User Interface that comes along with NOV.