Nevron Open Vision Documentation
Getting Started / Integrating NOV in Blazor
In This Topic
    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
    @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,
                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";
            }
        }
    }
    

    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.