Integrating NOV in Blazor

In This Topic

There are 2 ways in which NOV can integrate in a Blazor WebAssembly application:

Project Templates - if you are using the NOV C# or Visual Basic (VB.NET) project templates you can skip this documentation topic.
Coded Integration - you can initialize NOV manually in the entry point of the application. This is the recommended integration method for existing C# and VB.NET Windows Forms applications. See the Coded Integration section below for instructions and C# and VB.NET sample code.

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 WebAssembly Standalone App project in Visual Studio

From the "File" menu of Visual Studio choose "New -> Project"
Select the "Blazor WebAssembly Standalone App" project template
Click Next
Make sure the "Include sample pages" option is unchecked.
Click the "Create" button to create the project.

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 integration 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.GraphicsGL.dll - NOV Graphics GL (optional).
Nevron.Nov.Grid.dll - NOV Grid (optional).
Nevron.Nov.Schedule.dll - NOV Schedule (optional).
Nevron.Nov.Text.dll - NOV Rich Text Editor (optional).

Alternatively you can add the "NevronOpenVision" nuget package to the project.

3. 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
@using Nevron.Nov; @using Nevron.Nov.WebAssembly; @using Nevron.Nov.IO; @inject IJSRuntime JSRuntime; @inject NavigationManager NavigationManager; <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.Grid.NGridModule.Instance, Nevron.Nov.Chart.NChartModule.Instance, Nevron.Nov.Schedule.NScheduleModule.Instance, Nevron.Nov.Diagram.NDiagramModule.Instance ); } }

Installing NOV in Blazor

Copy Code

@using Nevron.Nov;
@using Nevron.Nov.WebAssembly;
@using Nevron.Nov.IO;

@inject IJSRuntime JSRuntime;
@inject NavigationManager NavigationManager;

<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.Grid.NGridModule.Instance,
            Nevron.Nov.Chart.NChartModule.Instance,
            Nevron.Nov.Schedule.NScheduleModule.Instance,
            Nevron.Nov.Diagram.NDiagramModule.Instance
        );
    }
}

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

4. Say Hello World from NOV

Open the Pages\Home.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>My NOV Application</PageTitle> <NNovWidgetHost @ref="m_Host" TWidget="NLabel" Style="width:200px; height:100px;"/> @code { private NNovWidgetHost<NLabel> m_Host; protected override void OnAfterRender(bool firstRender) { base.OnAfterRender(firstRender); if (firstRender) { NLabel label = m_Host.Widget; label.Text = "Hello World from Nevron Open Vision"; } } }

Hello World from NOV

Copy Code

@page "/"

@using Nevron.Nov.UI
@using Nevron.Nov.WebAssembly

<PageTitle>My NOV Application</PageTitle>

<NNovWidgetHost @ref="m_Host" TWidget="NLabel" Style="width:200px; height:100px;"/>

@code
{
    private NNovWidgetHost<NLabel> m_Host;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);

        if (firstRender)
        {
            NLabel label = m_Host.Widget;
            label.Text = "Hello World from Nevron Open Vision";
        }
    }
}

If you want the NOV widget host to occupy the whole page, set its Style property to 100% viewport width and height like this:

Make the NOV widget host occupy the whole page	Copy Code
<NNovWidgetHost @ref="m_Label" TWidget="NLabel" Style="width:100vw; height:100vh;" />

In this case you should also remove the margins of the body element in the wwwroot\index.html file of your Blazor WebAssembly project, otherwise you will get scrollbars when running the application:

Remove the margins of the body element	Copy Code
<body style="margin:0">

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. This sample just creates and sets 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.

UI

UI Overview