MVC Razor DocuVieware Lite integration

This tutorial will show you how to integrate DocuVieware Lite™ in a newly created C# MVC project with Razor view engine.

Start with the File > New > Project... menu, then choose Web > ASP.NET Web Application. In this tutorial you will be working on DocuViewareRazor which is new ASP.NET 4.6 MVC project.

Here is the structure obtained:

Now that the project structure is ready, the next step will be to add project references.

Now that the references are properly set, you need to go to the Global.asax.cs file of the project to add a mandatory import and handle the licensing part and the configuration part of DocuVieware Lite™ as well.

Here is the mandatory import you need to add. 

using GdPicture14.WEB;

To properly unlock DocuVieware Lite™ you are going to add a call to the RegisterKEY() method in the Application_Start event. Then please enter your license key in the method, you can ask your free DocuVieware Lite license key here: http://www.docuvieware.com/docuvieware-lite/

DocuViewareLicensing.RegisterKEY("XXXX"); //Unlocking DocuVieware
//You need to replace "XXXX" by your actual license key.

To set up the configuration of the DocuVieware Lite™ you are going to add a call to the DocuViewareManager.SetupConfiguration() method in the Application_Start event. At this point you need to create a new folder in the project that will be used for cache, for the sake of clarity simply name it Cache.

DocuViewareManager.SetupConfiguration(true, DocuViewareSessionStateMode.InProc, HttpRuntime.AppDomainAppPath + "\\Cache");

You are going to integrate a DocuVieware Lite™ instance in the index page, but of course the exact same applies to any other page or content.

Step 1 : Open the page that is located in Views > Home and it is called Index.cshtml. As it already have content in it, remove it all (except the title code) to start clean.

Inject the JavaScript and CSS resources (that were added in a bundle earlier) in the page so you have them ready for the main control integration, this is done using this code:

@Styles.Render("~/Content/docuvieware")
@Scripts.Render("~/bundles/docuvieware")

Step 2 : In the Views > Shared > _Layout.cshtml you need to move the jQuery injection from the bottom to the top, this is because you need jQuery to be loaded before loading the DocuVieware Lite™ JavaScript, otherwise the control won't be rendered properly and it simply won't work.

You are injecting DocuVieware Lite™ JavaScript in the Index.cshtml page, so the @Scripts.Render("~/bundles/jquery") line needs to me moved before the @RenderBody() line, it is recommended to move jQuery injection to the top, just after the @Styles.Render("~/Content/css") line, this way it is injected before any other JavaScript script.

Step 3 : Create a div and insert the DocuVieware™ control in Index.cshtml.

Using the object initializer, set the ID and finally, both Height and Width are set to 100% for the control to fit the div.

<div style="height: 1000px; margin-top: 15px;">
    @{
       GdPicture14.WEB.DocuVieware docuVieware = new GdPicture12.WEB.DocuVieware
       {
          ID = "DocuVieware1",                             
          Height = new System.Web.UI.WebControls.Unit("100%"),
          Width = new System.Web.UI.WebControls.Unit("100%")
       };
       docuVieware.RenderControl(Output);
       docuVieware.Dispose();
    }
 </div>

That’s it! You can start the project and load documents in your brand new DocuVieware Lite™.

Loading a document into your newly created DocuVieware Lite™ page is easy, you simply need to load your document into a Stream object and call the LoadFromStream method from the DocuVieware class.

To do this, simply this line to the previous Razor source code, like this:

<div style="height: 1000px; margin-top: 15px;">
    @{
       GdPicture14.WEB.DocuVieware docuVieware = new GdPicture12.WEB.DocuVieware
       {
          ID = "DocuVieware1",
          Height = new System.Web.UI.WebControls.Unit("100%"),
          Width = new System.Web.UI.WebControls.Unit("100%")
       };
       docuVieware.LoadFromStream(new FileStream(@"D:\input_document.pdf", FileMode.Open, FileAccess.Read), true, "input_document.pdf");
       docuVieware.RenderControl(Output);
       docuVieware.Dispose();
    }
 </div>