{"id":3333,"date":"2021-10-05T00:50:33","date_gmt":"2021-10-05T00:50:33","guid":{"rendered":"https:\/\/contentlab.com\/docuvieware-tutorial-for-blazor-2\/"},"modified":"2021-11-11T04:41:22","modified_gmt":"2021-11-11T04:41:22","slug":"docuvieware-tutorial-for-blazor","status":"publish","type":"post","link":"https:\/\/contentlab.com\/docuvieware-tutorial-for-blazor\/","title":{"rendered":"DocuVieware Tutorial for Blazor"},"content":{"rendered":"<p><a href=\"https:\/\/www.docuvieware.com\/\">DocuVieware<\/a> is an HTML5-based viewer and document management toolkit. It is built to work with all modern browsers and devices to handle documents from any source. The DocuVieware UI supports annotations, thumbnails, bookmarks, as well as custom snap-ins that extend functionality. DocuVieware enables you to pan, zoom, rotate, select text, and print documents. And you can embed it into existing applications with just a few lines of code.<\/p>\n<p>DocuVieware integrates directly with ASP.NET and ASP.NET Core applications, as well as with any other web technology that uses REST APIs. The DocuVieware website offers several <a href=\"https:\/\/www.docuvieware.com\/guides\/aspnet\/Tutorials%20Overview.html\">tutorials<\/a> for implementing features on different platforms.<\/p>\n<p>In addition to the server-side API with support for thousands of functions, DocuVieware provides a JavaScript API for full control over the available UI features and the control appearance. The rich functionality and the ease of integration make DocuVieware an ideal solution for document viewing and manipulation.<\/p>\n<p><a href=\"https:\/\/blazor.net\" target=\"_blank\" rel=\"noopener noreferrer\">Blazor<\/a> is a web platform with which DocuVieware now integrates. Blazor allows C# developers to build interactive web clients without relying on JavaScript. The code for both the client and the server can be written using C#. Blazor also supports existing .NET Standard libraries. The <a href=\"https:\/\/contentlab.com\/docuvieware-tutorial-for-blazor-2\/\">Blazor<\/a> rendering engine is based on reusable <a href=\"https:\/\/docs.microsoft.com\/aspnet\/core\/mvc\/views\/razor\" target=\"_blank\" rel=\"noopener noreferrer\">Razor components<\/a> whose syntax combines HTML with C# code.<\/p>\n<p>Blazor apps can be written using one of two <a href=\"https:\/\/docs.microsoft.com\/aspnet\/core\/blazor\/hosting-models\" target=\"_blank\" rel=\"noopener noreferrer\">hosting models<\/a>: Blazor WebAssembly and Blazor Server.<\/p>\n<p>Blazor WebAssembly allows your app to run entirely in the browser using a technology called <a href=\"https:\/\/webassembly.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WebAssembly<\/a>. You can think of WebAssembly as a sandboxed virtual machine that runs in modern browsers on desktops, laptops, phones, tablets, and edge devices. WebAssembly is built-in so it requires no plugin to operate.<\/p>\n<p>Blazor WebAssembly uses a virtual machine to load a version of the .NET Core runtime and provide additional services to render the browser UI and fetch remote resources. This hosting model is typically deployed in one of two ways: as a standalone static website or as a client app relying on an <a href=\"https:\/\/contentlab.com\/using-the-tomtom-maps-sdk-for-web-with-asp-net-core-part-2\/\">ASP.NET Core<\/a> server app with controllers that expose Web API endpoints.<\/p>\n<p>Blazor WebAssembly apps can even be installed to run offline as Progressive Web Applications (PWA).<\/p>\n<p>Blazor Server runs the engine on the server. The client receives a small JavaScript shim that sets up a real-time connection with the server using <a href=\"https:\/\/docs.microsoft.com\/aspnet\/signalr\/overview\/getting-started\/introduction-to-signalr\" target=\"_blank\" rel=\"noopener noreferrer\">SignalR<\/a>. The server renders the UI and sends HTML to the client. The client captures browser events and relays them back to the server. This results in a smaller client footprint and enables more advanced server-side scenarios. The trade-off is that the server must scale to handle all client connections and the hosting model in general lacks offline support.<\/p>\n<p>The client\/server nature of DocuVieware makes it embeddable in both hosting models. The client control exposes a JavaScript API. It is possible to both <a href=\"https:\/\/docs.microsoft.com\/aspnet\/core\/blazor\/call-javascript-from-dotnet\" target=\"_blank\" rel=\"noopener noreferrer\">call JavaScript from the .NET application<\/a> and <a href=\"https:\/\/docs.microsoft.com\/aspnet\/core\/blazor\/call-dotnet-from-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">call .NET APIs from JavaScript<\/a>. The <a href=\"https:\/\/www.docuvieware.com\/guides\/aspnet\/Serving%20DocuVieware%20through%20a%20REST%20API.html\">DocuVieware REST API<\/a> makes it possible to integrate DocuVieware with the static website version of Blazor WebAssembly.<\/p>\n<p>This tutorial focuses on the ASP.NET Core hosted version of Blazor WebAssembly. Let\u2019s dig right in.<\/p>\n<h2 class=\"fw-bold\" data-fontsize=\"18\" data-lineheight=\"27\">Create the Visual Studio Project<\/h2>\n<p>Make sure you have taken care of the following:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.docuvieware.com\/guides\/aspnet\/How%20To%20Evaluate.html\">Install DocuVieware<\/a> and obtain a license key.<\/li>\n<li>Install the latest version of <a href=\"https:\/\/visualstudio.microsoft.com\/downloads\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio 2019<\/a> with the <strong>NET and web development workload<\/strong> selected (this tutorial uses version 16.6.2).<\/li>\n<li>Install the .NET Core SDK along with Visual Studio 2019. Check that you are on the <a href=\"https:\/\/dotnet.microsoft.com\/download\/dotnet-core\/3.1\" target=\"_blank\" rel=\"noopener noreferrer\">latest (non-preview) version<\/a> (this tutorial uses version 3.1.301). You can check your version by running this command on the command line:<\/li>\n<\/ul>\n<p><code>dotnet \u2013version <\/code><\/p>\n<p>Create a new Blazor WebAssembly project. Make sure that the <strong>ASP.NET Core Hosted<\/strong> checkbox is selected.<\/p>\n<p><strong><img decoding=\"async\" src=\"https:\/\/www.docuvieware.com\/blog\/wp-content\/uploads\/2020\/07\/new-blazor-app.png\"><\/strong><\/p>\n<p>You will end up with three projects:<\/p>\n<ul>\n<li><code>A .Client<\/code> project for the Blazor WebAssembly app.<\/li>\n<li><code>A .Server<\/code> project that hosts the client app and provides controllers to expose Web API endpoints.<\/li>\n<li><code>A .Shared<\/code> project for code and logic shared between the client and server.<\/li>\n<\/ul>\n<p>You can run the app by pressing <strong>F5<\/strong> and navigate to see it in action. Notice that the <code>WeatherForecast<\/code> class is used on the server in <code>WeatherForecastController<\/code>, and the client in the <code>FetchData Razor<\/code> component.<\/p>\n<h2 class=\"fw-bold\" data-fontsize=\"18\" data-lineheight=\"27\">Set Up DocuVieware<\/h2>\n<p>Now let\u2019s set up DocuVieware on the server. In the server application, right-click <strong>Dependencies<\/strong> in the Solution Explorer and select <strong>Add COM Reference<\/strong>. Click <strong>Browse<\/strong> and navigate to the redistribution folder for ASP.NET Core 3. On most systems, the path is:<\/p>\n<p><code>C:GdPicture.NET 14RedistDocuVieware (.NET Core 3.0)<\/code><\/p>\n<p>Select the DLL (<code>GdPicture.NET.14.WEB.DocuVieware.Core.dll<\/code>), then click <strong>Add<\/strong> and confirm. The DLL will show up under <strong>Dependencies &gt; Assemblies<\/strong>. Select it in the Solution Explorer and set the <strong>Copy Local<\/strong> property to Yes.<\/p>\n<p>Next, add the related dependencies. Right-click the server project and select <strong>Add &gt; Existing Item<\/strong>. Navigate to the root of the redistribution directory (<code>C:GdPicture.NET 14Redist<\/code>) and select the following DLLs (select the correct versions for your execution environment):<\/p>\n<ul>\n<li><code>NET.14.filters.dll (for 32-bit)<\/code><\/li>\n<li><code>NET.14.filters.64.dll (for 64-bit)<\/code><\/li>\n<li><code>NET.14.image.gdimgplug.dll (for 32-bit)<\/code><\/li>\n<li><code>NET.14.image.gdimgplug.64.dll (for 64-bit)<\/code><\/li>\n<li><code>NET.14.Imaging.Rendering.Skia.dll (for 32-bit)<\/code><\/li>\n<li><code>NET.14.Imaging.Rendering.Skia.64.dll (for 64-bit)<\/code><\/li>\n<li><code>NET.14.jbig2.encoder.dll (for 32-bit)<\/code><\/li>\n<li><code>NET.14.jbig2.encoder.64.dll (for 64-bit)<\/code><\/li>\n<\/ul>\n<p>Add the files, then select them all in the Solution Explorer and set their <strong>Build Action<\/strong> to Content and <strong>Copy to Output Directory<\/strong> to Copy Always.<\/p>\n<p style=\"text-align: center;\"><strong><img decoding=\"async\" src=\"https:\/\/www.docuvieware.com\/blog\/wp-content\/uploads\/2020\/07\/copy-to-output-directory.png\"><\/strong><br \/>\n<em>Figure 2: Setting build and copy properties<\/em><\/p>\n<h2 class=\"fw-bold\" data-fontsize=\"18\" data-lineheight=\"27\">Activate DocuVieware<\/h2>\n<p>To activate DocuVieware, open the <code>Startup.cs<\/code> file in the server project. Add the following statements:<\/p>\n<pre>using<code> GdPicture14.WEB;<\/code> using System.Reflection;<\/pre>\n<p>In the <code>ConfigureServices<\/code> method, append the following code to the end of the method:<\/p>\n<pre>using GdPicture14.WEB;\nusing System.Reflection;<\/pre>\n<p>In the ConfigureServices method, append the following code to the end of the method:<\/p>\n<pre>var assemblyPath = Assembly.GetExecutingAssembly().Location;\nvar path = System.IO.Path.GetDirectoryName(assemblyPath);\nDocuViewareLicensing.RegisterKEY(\"your key\");\nDocuViewareManager.SetupConfiguration(true, DocuViewareSessionStateMode.InProc,\n    path + \"Cache\",\n    \"https:\/\/localhost:44370\/\", \"api\/DocuViewareREST\");<\/pre>\n<p>Substitute &#8220;your key&#8221; with your product key (a long number). The cache will be created in the executing directory.<\/p>\n<p>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 <strong>Properties<\/strong>, navigate to the <strong>Debug<\/strong> tab, and copy the HTTPS URL.<\/p>\n<p><strong><img decoding=\"async\" src=\"https:\/\/www.docuvieware.com\/blog\/wp-content\/uploads\/2020\/07\/debug-blazor.png\"><\/strong><\/p>\n<h2 class=\"fw-bold\" data-fontsize=\"18\" data-lineheight=\"27\">Configure the DocuVieware Controller<\/h2>\n<p>The example application supports configuration of the DocuVieware control options. In the shared project, add a class named <code>DocuViewareConfiguration<\/code>. Define the following properties:<\/p>\n<pre>public class DocuViewareConfiguration\n{\n    public string SessionId { get; set; }\n    public string ControlId { get; set; }\n    public bool AllowPrint { get; set; }\n    public bool EnablePrintButton { get; set; }\n    public bool AllowUpload { get; set; }\n    public bool EnableFileUploadButton { get; set; }\n    public bool CollapsedSnapIn { get; set; }\n    public bool ShowAnnotationsSnapIn { get; set; }\n    public bool EnableRotateButtons { get; set; }\n    public bool EnableZoomButtons { get; set; }\n    public bool EnablePageViewButtons { get; set; }\n    public bool EnableMultipleThumbnailSelection { get; set; }\n    public bool EnableMouseModeButtons { get; set; }\n    public bool EnableFormFieldsEdition { get; set; }\n    public bool EnableTwainAcquisitionButton { get; set; }\n}<\/pre>\n<p>Add another class to the same project, named <code>DocuViewareRESTOutputResponse<\/code>:<\/p>\n<pre>public class DocuViewareRESTOutputResponse\n{\n    public string HtmlContent { get; set; }\n}<\/pre>\n<p>Next, right-click the <code>Controllers<\/code> folder and select <strong>Add \u2026 Controller<\/strong>. Pick &#8220;API Controller \u2013 Empty&#8221; and click <strong>Add<\/strong>. Name the controller <code>DocuViewareRESTController<\/code>.<\/p>\n<p>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:<\/p>\n<pre>using System.IO;\nusing System.Net;\nusing System.Net.Http;\nusing BlazorDocuVieware.Shared;\nusing GdPicture14.WEB;<\/pre>\n<p>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\u2019s state on the server.<\/p>\n<pre>[HttpPost]\n[Route(\"GetDocuViewareControl\")]\npublic IActionResult GetDocuViewareControl([FromBody] DocuViewareConfiguration controlConfiguration)\n{\n    if (!DocuViewareManager.IsSessionAlive(controlConfiguration.SessionId))\n    {\n        if (!string.IsNullOrEmpty(controlConfiguration.SessionId) &amp;&amp; !string.IsNullOrEmpty(controlConfiguration.ControlId))\n        {\n            DocuViewareManager.CreateDocuViewareSession(controlConfiguration.SessionId,\n                controlConfiguration.ControlId, 20);\n        }\n        else\n        {\n            throw new Exception(\"Invalid session identifier and\/or invalid control identifier.\");\n        }\n    }\n    using var docuVieware = new DocuViewareControl(controlConfiguration.SessionId)\n    {\n        AllowPrint = controlConfiguration.AllowPrint,\n        EnablePrintButton = controlConfiguration.EnablePrintButton,\n        AllowUpload = controlConfiguration.AllowUpload,\n        EnableFileUploadButton = controlConfiguration.EnableFileUploadButton,\n        CollapsedSnapIn = controlConfiguration.CollapsedSnapIn,\n        ShowAnnotationsSnapIn = controlConfiguration.ShowAnnotationsSnapIn,\n        EnableRotateButtons = controlConfiguration.EnableRotateButtons,\n        EnableZoomButtons = controlConfiguration.EnableZoomButtons,\n        EnablePageViewButtons = controlConfiguration.EnablePageViewButtons,\n        EnableMultipleThumbnailSelection = controlConfiguration.EnableMultipleThumbnailSelection,\n        EnableMouseModeButtons = controlConfiguration.EnableMouseModeButtons,\n        EnableFormFieldsEdition = controlConfiguration.EnableFormFieldsEdition,\n        EnableTwainAcquisitionButton = controlConfiguration.EnableTwainAcquisitionButton,\n        MaxUploadSize = 36700160 \/\/ 35MB\n    };\n    using StringWriter controlOutput = new StringWriter();\n    docuVieware.RenderControl(controlOutput);\n    return new OkObjectResult(new DocuViewareRESTOutputResponse\n    {\n        HtmlContent = controlOutput.ToString()\n    });\n}<\/pre>\n<p>Next, copy the DocuVieware integration methods from the <a href=\"https:\/\/www.docuvieware.com\/guides\/aspnet\/DocuVieware%20integration%20in%20.NET%20Core%203.0%20web%20application.html#i-heading-docuvieware-integration\">ASP.NET Core tutorial<\/a> and paste them into your file. Do not copy the entire controller code, just the methods starting with <code>[HttpGet(\u201cping\u201d)]<\/code> and ending with the <code>[HttpPost(\u201cdigisign\u201d)]<\/code> method.<\/p>\n<p>The server setup is now complete!<\/p>\n<h2 class=\"fw-bold\" data-fontsize=\"18\" data-lineheight=\"27\">Prepare the Blazor WebAssembly Client<\/h2>\n<p>Right-click the client project and add a class named SessionService. This will track 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.<\/p>\n<pre>public class SessionService\n{\n    public SessionService()\n    {\n        SessionId = Guid.NewGuid().ToString();\n        Key = SessionId.Split(\"-\")[^1];           \n    }\n    public string SessionId { get; }\n    public string Key { get; }\n}<\/pre>\n<p>Register the service in <code>Program.cs<\/code> after the existing <code>builder.Services.AddTransient<\/code> line of code:<\/p>\n<p><code>builder.Services.AddSingleton&lt;SessionService&gt;();<\/code><\/p>\n<p>Next, open the <code>Index.razor<\/code> page. Delete everything that was generated from the template and replace it with the following:<\/p>\n<pre>@page \"\/\"\n@inject HttpClient Client\n@inject IJSRuntime Runtime\n@inject SessionService Service\n \n@using BlazorDocuVieware.Shared\n@using System.Net.Http;<\/pre>\n<p>The <code>inject<\/code> 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 <code>&lt;div&gt;<\/code> element to host the control. The @ref statement allows you to reference the element from code.<\/p>\n<pre>&lt;div<code> <strong>@ref<\/strong>=\"docuDiv\" style=\"width:1200px;height:1000px;\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>Finally, add the @code block that loads the control from the server when the component is initialized.<\/p>\n<pre>@code {\n        ElementReference docuDiv;\n     \n        protected override async Task OnInitializedAsync()\n        {\n            var docuViewareConfig = new DocuViewareConfiguration\n            {\n                SessionId = Service.SessionId,\n                ControlId = $\"DocuVieware{Service.Key}\",\n                AllowPrint = true,\n                EnablePrintButton = true,\n                AllowUpload = true,\n                EnableFileUploadButton = true,\n                CollapsedSnapIn = true,\n                ShowAnnotationsSnapIn = true,\n                EnableRotateButtons = true,\n                EnableZoomButtons = true,\n                EnablePageViewButtons = true,\n                EnableMultipleThumbnailSelection = true,\n                EnableMouseModeButtons = true,\n                EnableFormFieldsEdition = true,\n                EnableTwainAcquisitionButton = true\n            };\n            var response = await Client.PostAsJsonAsync(\"api\/DocuViewareREST\/GetDocuViewareControl\", docuViewareConfig);\n            var responseContent = await response.Content.ReadFromJsonAsync();\n            await Runtime.InvokeVoidAsync(\"docuViewareShim.loadControl\",\n                new[]\n                {\n                    (object)docuDiv, (object)responseContent.HtmlContent\n                        });\n        }\n    }<\/pre>\n<p>After the control is fetched from the server, the HTML content must be inserted into the DOM. This is done via JavaScript. Under <code>wwwroot<\/code> in the client project, add a new folder named <code>DocuVieware<\/code>. Copy the stylesheet and JavaScript file from the resources folder <code>(C:GdPicture.NET 14RedistDocuVieware (Resources))<\/code> and paste them into the new folder. There should be two files.<\/p>\n<p><strong><img decoding=\"async\" src=\"https:\/\/www.docuvieware.com\/blog\/wp-content\/uploads\/2020\/07\/docuvieware-folder.png\"><\/strong><\/p>\n<p>Right-click the DocuVieware folder and add a new JavaScript file. Name it <code>shim.js<\/code> and populate it with the following code:<\/p>\n<pre>window.docuViewareShim = {\n        loadControl: (target, html) =&gt; {\n            $(target).html(html);\n        }\n    };<\/pre>\n<p>This code retrieves the HTML content from the Web API call and injects it into the <code>&lt;div&gt;<\/code> element.<\/p>\n<p>Open the <code>index.html<\/code> file under <code>wwwroot<\/code>. After the <code>app.css<\/code> stylesheet, add the DocuVieware stylesheet:<\/p>\n<pre>&lt;link href=\"DocuVieware\/docuvieware-min.css\" rel=\"stylesheet\"\/&gt;\n<\/pre>\n<p>After the <code>&lt;script&gt;<\/code> tag that references <code>blazor.webassembly.js<\/code>, add the following script tags:<\/p>\n<pre>&lt;script<code> src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\"&gt;&lt;\/script&gt;<\/code> &lt;script<code> src=\"DocuVieware\/docuvieware-min.js\"&gt;&lt;\/script&gt;<\/code> &lt;script src=\"DocuVieware\/shim.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>Due to security concerns, by default, plain JavaScript does not allow injecting dynamic content with script tags into existing elements. Fortunately, <code>jQuery<\/code> provides an <code>html()<\/code> method that works around this restriction. This is what the <code>loadControl<\/code> JavaScript method uses.<\/p>\n<h2 class=\"fw-bold\" data-fontsize=\"18\" data-lineheight=\"27\">Start Manipulating Documents<\/h2>\n<p>You are now ready to hit <strong>F5 <\/strong>and start working with documents. I tested the app by loading a picture of a beautiful sunset. I used the annotation tools to write &#8220;Wow&#8221; and have the annotation highlighted.<\/p>\n<p><strong><img decoding=\"async\" src=\"https:\/\/www.docuvieware.com\/blog\/wp-content\/uploads\/2020\/07\/manipulating-documents.png\"><\/strong><\/p>\n<p>Because the server keeps track of the control, you can click the <strong>Counter<\/strong> and <strong>Fetch data<\/strong> options, and then return to the <strong>Home<\/strong> view to pick up where you left off.<\/p>\n<p>With DocuVieware successfully integrated into your Blazor app, you can move on to advanced features, such as:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.docuvieware.com\/guides\/aspnet\/REST%20Client-Server%20coming%20and%20going%20with%20Custom%20Actions.html\">Add a custom action<\/a> to draw a QR Code on a document.<\/li>\n<li><a href=\"https:\/\/www.docuvieware.com\/guides\/aspnet\/REST%20Use%20and%20handling%20of%20the%20Selection%20Area.html\">Manipulate the current selection<\/a> to show coordinates, clear selection, or apply a negative filter.<\/li>\n<li><a href=\"https:\/\/www.docuvieware.com\/guides\/aspnet\/REST%20Custom%20Snap-In%20implementation.html\">Build a custom snap-in that creates<\/a> a button to trigger a custom action, which returns a message from the server.<\/li>\n<\/ul>\n<h2 class=\"cfw-bold\" data-fontsize=\"18\" data-lineheight=\"27\">Wrapping Up<\/h2>\n<p>This article introduced you to the DocuVieware control. You learned about the new Blazor web platform and its hosting models. You then integrated DocuVieware with a Blazor WebAssembly app. This integration allowed you to load documents of virtually any format, annotate them, manipulate them, and so on. Finally, you had a peek into the various ways of extending and customizing the control\u2019s functionality.<\/p>\n<p><a href=\"https:\/\/www.docuvieware.com\/download\/\">Download the DocuVieware trial version<\/a>, get your trial product key, and get busy building the next generation of web apps.<\/p>\n<p><em>This article was originally posted on <a href=\"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/\">DocueVieware&#8217;s blog<\/a>.<\/em><\/p>\n<p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\n<p><em>&nbsp;<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article introduces you to the DocuVieware control. You learn about the new Blazor web platform and its hosting models, and integrate DocuVieware with a Blazor WebAssembly app.<\/p>\n","protected":false},"author":3,"featured_media":4858,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[290,282,288,289],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>DocuVieware Tutorial for Blazor &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DocuVieware Tutorial for Blazor &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"This article introduces you to the DocuVieware control. You learn about the new Blazor web platform and its hosting models, and integrate DocuVieware with a Blazor WebAssembly app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-05T00:50:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-11T04:41:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/docuvieware-tutorial-for-blazor\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"DocuVieware Tutorial for Blazor\",\"datePublished\":\"2021-10-05T00:50:33+00:00\",\"dateModified\":\"2021-11-11T04:41:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/docuvieware-tutorial-for-blazor\/\"},\"wordCount\":1634,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature4.png\",\"keywords\":[\"ASP.NET\",\"ASP.NET-Core\",\"Blazor\",\"HTML5\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/docuvieware-tutorial-for-blazor\/\",\"url\":\"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/\",\"name\":\"DocuVieware Tutorial for Blazor &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature4.png\",\"datePublished\":\"2021-10-05T00:50:33+00:00\",\"dateModified\":\"2021-11-11T04:41:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature4.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature4.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DocuVieware Tutorial for Blazor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"DocuVieware Tutorial for Blazor &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/","og_locale":"en_US","og_type":"article","og_title":"DocuVieware Tutorial for Blazor &#183; Technical Content Marketing | ContentLab","og_description":"This article introduces you to the DocuVieware control. You learn about the new Blazor web platform and its hosting models, and integrate DocuVieware with a Blazor WebAssembly app.","og_url":"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2021-10-05T00:50:33+00:00","article_modified_time":"2021-11-11T04:41:22+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature4.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#article","isPartOf":{"@id":"https:\/\/contentlab.com\/docuvieware-tutorial-for-blazor\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"DocuVieware Tutorial for Blazor","datePublished":"2021-10-05T00:50:33+00:00","dateModified":"2021-11-11T04:41:22+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/docuvieware-tutorial-for-blazor\/"},"wordCount":1634,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature4.png","keywords":["ASP.NET","ASP.NET-Core","Blazor","HTML5"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/docuvieware-tutorial-for-blazor\/","url":"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/","name":"DocuVieware Tutorial for Blazor &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#primaryimage"},"image":{"@id":"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature4.png","datePublished":"2021-10-05T00:50:33+00:00","dateModified":"2021-11-11T04:41:22+00:00","breadcrumb":{"@id":"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature4.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature4.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/www.docuvieware.com\/blog\/docuvieware-tutorial-blazor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"DocuVieware Tutorial for Blazor"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature4.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3333"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=3333"}],"version-history":[{"count":3,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3333\/revisions"}],"predecessor-version":[{"id":4862,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3333\/revisions\/4862"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/4858"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=3333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=3333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=3333"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=3333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}