In This Topic
Tutorials / Other Technologies / ASP.NET (Rest mode) / Integrating DocuVieware in your ASP.NET MVC Razor client application

Integrating DocuVieware in your ASP.NET MVC Razor client application

In This Topic
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 its own 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.

Prerequisite
Copy Code
<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 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:

Adding new classes.
Copy Code
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.

Integration in Razor.
Copy Code
<!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>

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

Implementing the REST service call.
Copy Code
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();
 }
See Also