DocuVieware Reference Guide
Integrating DocuVieware in your ASP.NET Core MVC Razor client application
Tutorials > Other Web Technologies using REST > ASP.NET Core > Integrating DocuVieware in your ASP.NET Core MVC Razor client application
The purpose of this tutorial is to highlight the integration of the DocuVieware control into a client application, so please first be sure to follow the Serving DocuVieware through a REST API tutorial.
The source code of both REST service implementation and integration are available in your [INSTALL FOLDER]\Samples\ASP.NET\DocuVieware\ folder.
 Prerequisite

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

Then, you need to add references to the DocuVieware™ resources, one JavaScript file and one CSS file, both can be found in your [SDK INSTALL DIR]\Redist\DocuVieware (Resources)\ folder. In the following examples, it will be assumed that they are available locally.

<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 tutorial it is assumed that the service is locally running on the machine using the port 62968. The complete URL to the method is http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl.
Be careful: your own implementation will most probably differ, especially the port that is usually randomly selected upon project creation by Visual Studio so be sure to adapt the URL to your configuration.

 Integration using ASP.NET Core MVC Razor

There are a couple of things you need before proceeding with the integration itself. The first thing is the definition of the input and output parameters the application willl be using to talk to the REST service. There are the exact same as the ones defined in the Serving DocuVieware through a REST API tutorial so if you need more information about these classes, simply refer to it.

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

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;
}

Step 2: Now you need to take care of the controller, in this example you are going to integrate the DocuVieware™ in the index.cshtml view with a very simple structure.

<!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>

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

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();
}
See Also