Integrating DocuVieware in your ASP.NET 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.

Prerequisite

DocuVieware only requires its own 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 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 MVC 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 ActionResult Index()
     {
     HttpWebRequest request = (HttpWebRequest)WebRequest.Create(@"http://localhost:62968/api/DocuViewareREST/GetDocuViewareControl");
     request.Method = "POST";
     request.ContentType = "application/json";
     JavaScriptSerializer serializer = new JavaScriptSerializer();
     using (var sw = new StreamWriter(request.GetRequestStream()))
     {
     string json = serializer.Serialize(new DocuViewareConfiguration
     {
     SessionId = "mySessionId", //Set to an arbitrary value, 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
     });
     sw.Write(json);
     sw.Flush();
     }
     HttpWebResponse response = (HttpWebResponse)request.GetResponse();
     DocuViewareRESTOutputResponse output;
     using (StreamReader sr = new StreamReader(response.GetResponseStream()))
     {
     output = serializer.Deserialize<DocuViewareRESTOutputResponse>(sr.ReadToEnd());
     }
     ViewBag.docuViewareControlHtml = output.HtmlContent;
     return View();
     }