Integrating DocuVieware in your ASP.NET Core MVC Razor client application

This guide focuses on integrating the DocuVieware control into a client application. Follow the serving DocuVieware through a REST API guide.

Find the source code for both the REST service and integration examples in your [INSTALL FOLDER]\Samples\ASP.NET\DocuVieware folder.

Legacy guide notice

This guide uses ASP.NET Core MVC Razor on .NET Framework 4.6 with jQuery.

.NET Framework 4.6 and this REST API integration approach are no longer recommended for new applications.

This guide is intended for maintaining existing applications or environments with fixed legacy constraints.

Prerequisite

DocuVieware only requires the jQuery JavaScript library as a prerequisite in your client page. It’s mandatory to load it before the DocuVieware JavaScript resource, as it depends on it. In the following code sample, the latest stable version is loaded from a CDN.

Add references to the DocuVieware JavaScript and CSS files from your [SDK INSTALL DIR]\Redist\DocuVieware (Resources) folder. In the following examples, it’s assumed that they’re available locally:

HTML
<script src="docuvieware-min.js"></script>
<link rel="stylesheet" type="text/css" href="docuvieware-min.css">

The last thing required is the complete and accurate URL your REST service is reachable at.

For this guide, it’s assumed that the service is locally running on the machine using port 62968. The complete URL to the method is:

http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl

Your own implementation will mostly differ — especially the port that’s usually randomly selected upon project creation by Visual Studio. Adapt the URL to your configuration.

Integration using ASP.NET Core MVC Razor

There are a couple of things needed before proceeding with the integration itself. The first is the definition of the input and output parameters the application uses to talk to the REST service. These are the same as those defined in the serving DocuVieware through a REST API guide.

  1. Add two new classes to your application Models folder and name them DocuViewareConfiguration.cs and DocuViewareRESTOutputResponse.cs. Then, add the definitions as follows:

    C#
    public class DocuViewareConfiguration
    {
     public string SessionId;
     public string ControlId;
     public bool AllowPrint;
     public bool EnablePrintButton;
     public bool AllowUpload;
     public bool EnableFileUploadButton;
     public bool CollapsedSnapIn;
     public bool ShowAnnotationsSnapIn;
     public bool EnableRotateButtons;
     public bool EnableZoomButtons;
     public bool EnablePageViewButtons;
     public bool EnableMultipleThumbnailSelection;
     public bool EnableMouseModeButtons;
     public bool EnableFormFieldsEdition;
     public bool EnableTwainAcquisitionButton;
    }
    public class DocuViewareRESTOutputResponse
    {
     public string HtmlContent;
    }

  2. Take care of the controller. In this example, integrate DocuVieware in the index.cshtml view with the following structure:

    HTML
    <!DOCTYPE html>
    <html>
    <head>
     <title>DocuVieware ASP.NET Core Web App</title>
     <link rel="stylesheet" type="text/css" href="~/docuvieware-min.css">
     <script src="~/docuvieware-min.js"></script>
    </head>
    <body>
     <div id="dvContainer" style="width:1200px;height:1000px;">
     @Html.Raw(ViewBag.docuViewareControlHtml)
     </div>
    </body>
    </html>

  3. The final step is to implement the REST service call and send the result to the view using the ViewBag:

    C#
    public IActionResult Index()
    {
     DocuViewareConfiguration config = new DocuViewareConfiguration()
     {
     SessionId = "mySessionId", // Arbitrary value that should be replaced by the session identifier from your session mechanism
     ControlId = "DocuVieware1",
     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
     };
     HttpClient client = new HttpClient()
     {
     BaseAddress = new Uri(@"http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl")
     };
     client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
     HttpResponseMessage result = client.PostAsync("", new StringContent(JsonConvert.SerializeObject(config).ToString(), Encoding.UTF8, "application/json")).Result;
     DocuViewareRESTOutputResponse outputResponse = JsonConvert.DeserializeObject<DocuViewareRESTOutputResponse>(result.Content.ReadAsStringAsync().Result);
     ViewBag.docuViewareControlHtml = outputResponse.HtmlContent;
     return View();
    }