--- title: "DocuVieware guide for Blazor" canonical_url: "https://www.nutrient.io/guides/docuvieware/other-technologies/docuvieware-tutorial-for-blazor/" md_url: "https://www.nutrient.io/guides/docuvieware/other-technologies/docuvieware-tutorial-for-blazor.md" last_updated: "2026-05-18T15:55:45.958Z" description: "Set up and configure a Blazor WebAssembly project using DocuVieware in an ASP.NET Core hosted environment." --- # DocuVieware guide for Blazor This guide focuses on the ASP.NET Core hosted version of Blazor WebAssembly. **Legacy guide notice** This guide uses Blazor WebAssembly with ASP.NET Core 3.1 and Visual Studio 2019. Some steps (DLL setup, jQuery injection, session handling) may be outdated for modern Blazor/.NET 6+ projects. Use this guide only for existing projects or learning purposes. For new development, follow the latest DocuVieware integration guides. ## Create the Visual Studio project Make sure you’ve taken care of the following: - [Install DocuVieware](https://www.nutrient.io/guides/dotnet/downloads.md#viewers) and obtain a license key. - Install the latest version of [Visual Studio 2019](https://visualstudio.microsoft.com/downloads/) with the **.NET and web development workload** selected (this guide uses version 16.6.2). - Install the.NET Core SDK along with Visual Studio 2019. Check that you’re on the [latest (non-preview) version](https://dotnet.microsoft.com/download/dotnet-core/3.1) (this guide uses version 3.1.301). You can check your version by running this command on the command line: ```bash dotnet --version ``` Create a new Blazor WebAssembly project. Make sure that the **ASP.NET Core Hosted** checkbox is selected.![New Blazor WebAssembly project dialog with ASP.NET Core Hosted checkbox selected](@/assets/guides/docuvieware/tutorial_blazor_01.png) You’ll end up with three projects: - A `.Client` project for the Blazor WebAssembly app. - A `.Server` project that hosts the client app and provides controllers to expose Web API endpoints. - A `.Shared` project for code and logic shared between the client and server. You can run the app by pressing **F5**. Then navigate to see it in action. Notice that the `WeatherForecast` class is used on the server in `WeatherForecastController`, and the client in the `FetchData` Razor component. ## Setting up DocuVieware Set up DocuVieware on the server. In the server application, right-click **Dependencies** in the Solution Explorer and select **Add COM Reference**. Click **Browse** and navigate to the redistribution folder for ASP.NET Core 3. On most systems, the path is: `C:\GdPicture.NET 14\Redist\DocuVieware` (.NET Core 3.0) Select the DLL (`GdPicture.NET.14.WEB.DocuVieware.Core.dll`). Then click **Add** and confirm. The DLL shows up under **Dependencies > Assemblies**. Select it in the Solution Explorer and set the **Copy Local** property to **Yes**. Next, add the related dependencies. Right-click the server project and select **Add** > **Existing Item**. Navigate to the root of the redistribution directory (`C:\GdPicture.NET 14\Redist`) and select the following DLLs (select the correct versions for your execution environment): - `GdPicture.NET.14.filters.dll` (for 32-bit) - `GdPicture.NET.14.filters.64.dll` (for 64-bit) - `GdPicture.NET.14.image.gdimgplug.dll` (for 32-bit) - `GdPicture.NET.14.image.gdimgplug.64.dll` (for 64-bit) - `GdPicture.NET.14.Imaging.Rendering.Skia.dll` (for 32-bit) - `GdPicture.NET.14.Imaging.Rendering.Skia.64.dll` (for 64-bit) - `GdPicture.NET.14.jbig2.encoder.dll` (for 32-bit) - `GdPicture.NET.14.jbig2.encoder.64.dll` (for 64-bit) Add the files. Then select them all in the Solution Explorer and set their **Build Action** to **Content** and set **Copy to Output Directory** to **Copy Always**.![Solution Explorer showing DLL files with Build Action set to Content](@/assets/guides/docuvieware/tutorial_blazor_02.png) ## Activating DocuVieware To activate DocuVieware, open the `Startup.cs` file in the server project. Add the following statements: ```csharp using GdPicture14.WEB; using System.Reflection; ``` In the `ConfigureServices` method, append the following code to the end of the method: ```csharp var assemblyPath = Assembly.GetExecutingAssembly().Location; var path = System.IO.Path.GetDirectoryName(assemblyPath); DocuViewareLicensing.RegisterKEY("your key"); DocuViewareManager.SetupConfiguration(true, DocuViewareSessionStateMode.InProc, path + "\\Cache", "https://localhost:44370/", "api/DocuViewareREST"); ``` Substitute “your key” with your product key (a long number). The cache is created in the executing directory. The path to the application may need to be updated with a different port number. To obtain it, you can run the application and copy it from the browser URL. Alternatively, you can right-click the server project, select **Properties**, navigate to the **Debug** tab, and copy the HTTPS URL.![Visual Studio project properties showing Debug tab with HTTPS URL](@/assets/guides/docuvieware/tutorial_blazor_02.png) ## Configuring the DocuVieware controller The example application supports configuration of the DocuVieware control options. In the shared project, add a class named `DocuViewareConfiguration`. Define the following properties: ```csharp public class DocuViewareConfiguration { public string SessionId { get; set; } public string ControlId { get; set; } public bool AllowPrint { get; set; } public bool EnablePrintButton { get; set; } public bool AllowUpload { get; set; } public bool EnableFileUploadButton { get; set; } public bool CollapsedSnapIn { get; set; } public bool ShowAnnotationsSnapIn { get; set; } public bool EnableRotateButtons { get; set; } public bool EnableZoomButtons { get; set; } public bool EnablePageViewButtons { get; set; } public bool EnableMultipleThumbnailSelection { get; set; } public bool EnableMouseModeButtons { get; set; } public bool EnableFormFieldsEdition { get; set; } public bool EnableTwainAcquisitionButton { get; set; } } ``` Add another class, named `DocuViewareRESTOutputResponse`, to the same project: ```csharp public class DocuViewareRESTOutputResponse { public string HtmlContent { get; set; } } ``` Next, right-click the Controllers folder and select **Add** > **Controller**. Pick **API Controller – Empty** and click **Add**. Name the controller `DocuViewareRESTController`. The first controller method you add receives a copy of the configuration and returns the HTML5 markup necessary to render the control on the client. Start by adding the following statements at the top of the controller: ```csharp using System.IO; using System.Net; using System.Net.Http; using BlazorDocuVieware.Shared; using GdPicture14.WEB; ``` The first controller method receives two distinct identifiers from the configuration: one for the user session, and one for the control. These are necessary because DocuVieware keeps track of the control’s state on the server. ```csharp [HttpPost] [Route("GetDocuViewareControl")] public IActionResult GetDocuViewareControl([FromBody] DocuViewareConfiguration controlConfiguration) { if (!DocuViewareManager.IsSessionAlive(controlConfiguration.SessionId)) { if (!string.IsNullOrEmpty(controlConfiguration.SessionId) &&!string.IsNullOrEmpty(controlConfiguration.ControlId)) { DocuViewareManager.CreateDocuViewareSession(controlConfiguration.SessionId, controlConfiguration.ControlId, 20); } else { throw new Exception("Invalid session identifier and/or invalid control identifier."); } } using var docuVieware = new DocuViewareControl(controlConfiguration.SessionId) { AllowPrint = controlConfiguration.AllowPrint, EnablePrintButton = controlConfiguration.EnablePrintButton, AllowUpload = controlConfiguration.AllowUpload, EnableFileUploadButton = controlConfiguration.EnableFileUploadButton, CollapsedSnapIn = controlConfiguration.CollapsedSnapIn, ShowAnnotationsSnapIn = controlConfiguration.ShowAnnotationsSnapIn, EnableRotateButtons = controlConfiguration.EnableRotateButtons, EnableZoomButtons = controlConfiguration.EnableZoomButtons, EnablePageViewButtons = controlConfiguration.EnablePageViewButtons, EnableMultipleThumbnailSelection = controlConfiguration.EnableMultipleThumbnailSelection, EnableMouseModeButtons = controlConfiguration.EnableMouseModeButtons, EnableFormFieldsEdition = controlConfiguration.EnableFormFieldsEdition, EnableTwainAcquisitionButton = controlConfiguration.EnableTwainAcquisitionButton, MaxUploadSize = 36700160 // 35MB }; using StringWriter controlOutput = new StringWriter(); docuVieware.RenderControl(controlOutput); return new OkObjectResult(new DocuViewareRESTOutputResponse { HtmlContent = controlOutput.ToString() }); } ``` Next, copy the DocuVieware integration methods from the [ASP.NET Core tutorial](https://www.nutrient.io/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-asp-dotnet-core-mvc-razor-client-application.md) and paste them into your file. Don’t copy the entire controller code; just copy the methods starting with `HttpGet("ping")` and ending with the `HttpPost("digisign")` method. The server setup is now complete. ## Preparing the Blazor WebAssembly client Right-click the client project and add a class named `SessionService`. This tracks a unique GUID and session ID (part of the GUID) for the logged-in user. Keeping track of these values enables the DocuVieware service to maintain state when the user navigates to other pages. ```csharp public class SessionService { public SessionService() { SessionId = Guid.NewGuid().ToString(); Key = SessionId.Split("-")[^1]; } public string SessionId { get; } public string Key { get; } } ``` Register the service in `Program.cs` after the existing `builder.Services.AddTransient` line of code: ```csharp builder.Services.AddSingleton(); ``` Next, open the `Index.razor` page. Delete everything that was generated from the template and replace it with the following: ```csharp @page "/" @inject HttpClient Client @inject IJSRuntime Runtime @inject SessionService Service @using BlazorDocuVieware.Shared @using System.Net.Http; ``` The inject statements receive a copy of an HTTP client for making web API calls, an instance of the JavaScript runtime for interoperability, and the session service. Add a `
` element to host the control. The `@ref` statement enables you to reference the element from code. ```html
``` Finally, add the `@code` block that loads the control from the server when the component is initialized. ```csharp @code { ElementReference docuDiv; protected override async Task OnInitializedAsync() { var docuViewareConfig = new DocuViewareConfiguration { SessionId = Service.SessionId, ControlId = $"DocuVieware{Service.Key}", AllowPrint = true, EnablePrintButton = true, AllowUpload = true, EnableFileUploadButton = true, CollapsedSnapIn = true, ShowAnnotationsSnapIn = true, EnableRotateButtons = true, EnableZoomButtons = true, EnablePageViewButtons = true, EnableMultipleThumbnailSelection = true, EnableMouseModeButtons = true, EnableFormFieldsEdition = true, EnableTwainAcquisitionButton = true }; var response = await Client.PostAsJsonAsync("api/DocuViewareREST/GetDocuViewareControl", docuViewareConfig); var responseContent = await response.Content.ReadFromJsonAsync(); await Runtime.InvokeVoidAsync("docuViewareShim.loadControl", new[] { (object)docuDiv, (object)responseContent.HtmlContent }); } } ``` After the control is fetched from the server, the HTML content must be inserted into the DOM. This is done via JavaScript. Under `wwwroot` in the client project, add a new folder named DocuVieware. Copy the stylesheet and JavaScript file from the resources folder (`C:\GdPicture.NET 14\Redist\DocuVieware (Resources)`) and paste them into the new folder. There should be two files.![DocuVieware folder in wwwroot containing stylesheet and JavaScript files](@/assets/guides/docuvieware/tutorial_blazor_03.png) Right-click the DocuVieware folder and add a new JavaScript file. Name it `shim.js` and populate it with the following code: ```javascript window.docuViewareShim = { loadControl: (target, html) => { $(target).html(html); } }; ``` This code retrieves the HTML content from the Web API call and injects it into the `
` element. Open the `index.html` file under wwwroot. After the `app.css` stylesheet, add the DocuVieware stylesheet: ```html ``` After the ` ``` Due to security concerns, by default, plain JavaScript doesn’t enable injecting dynamic content with script tags into existing elements. jQuery provides an `html()` method that works around this restriction. This is what the `loadControl` JavaScript method uses. ## Start manipulating documents You’re now ready to press **F5** and start working with documents. The following example shows a loaded image with an annotation added using the annotation tools.![DocuVieware displaying an image with annotation tools and highlighted text](@/assets/guides/docuvieware/tutorial_blazor_04.png) Because the server keeps track of the control, you can click the **Counter** and **Fetch data** options, and then return to the **Home** view to pick up where you left off. With DocuVieware integrated into your Blazor app, you can move on to advanced features: - [Add a custom action](https://www.nutrient.io/guides/docuvieware/other-technologies/rest-client-server-coming-and-going-with-custom-actions.md) to draw a QR code on a document. - [Manipulate the current selection](https://www.nutrient.io/guides/docuvieware/other-technologies/rest-use-and-handling-of-the-selection-area.md) to show coordinates, clear selection, or apply a negative filter. - [Build a custom snap-in](https://www.nutrient.io/guides/docuvieware/other-technologies/rest-custom-snap-in-implementation.md) that creates a button to trigger a custom action, which returns a message from the server. ## Wrapping up This integration enables you to load documents, annotate them, and manipulate them. You can also extend and customize the control’s functionality using the advanced features linked above. --- ## Related pages - [Integrating DocuVieware in your AngularJS client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-angularjs-client-application.md) - [How to set up and use DocuVieware with React](/guides/docuvieware/other-technologies/how-to-set-up-and-use-docuvieware-with-react.md) - [Introduction](/guides/docuvieware/other-technologies.md) - [Integrating DocuVieware in your Angular2 client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-angular2-client-application.md) - [Integrating DocuVieware in your JavaScript/jQuery client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-javascript-jquery-client-application.md) - [Integrating DocuVieware in your Java client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-java-client-application.md) - [Integrating DocuVieware in your PHP client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-php-client-application.md) - [Integrating DocuVieware into SharePoint 2019](/guides/docuvieware/other-technologies/integrating-docuvieware-into-sharepoint-2019.md) - [Integrating DocuVieware in your Node.js client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-nodejs-client-application.md) - [Integrating DocuVieware in your ASP.NET Core MVC Razor client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-asp-dotnet-core-mvc-razor-client-application.md) - [Use and handling of the selection area](/guides/docuvieware/other-technologies/rest-use-and-handling-of-the-selection-area.md) - [Custom snap-in implementation](/guides/docuvieware/other-technologies/rest-custom-snap-in-implementation.md) - [Client/server coming and going with custom actions](/guides/docuvieware/other-technologies/rest-client-server-coming-and-going-with-custom-actions.md) - [Integrating DocuVieware in your ASP.NET MVC Razor client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-asp-dotnet-mvc-razor-client-application.md) - [Your first Angular 10 application with DocuVieware](/guides/docuvieware/other-technologies/your-first-angular-10-application-with-docuvieware.md) - [Serving DocuVieware through a REST API](/guides/docuvieware/other-technologies/serving-docuvieware-through-a-rest-api.md) - [Integrating DocuVieware with Electron](/guides/docuvieware/other-technologies/integrating-docuvieware-with-electron.md)