--- title: "Your first DocuVieware MVC Razor page" canonical_url: "https://www.nutrient.io/guides/docuvieware/asp-dotnet-mvc-razor/your-first-docuvieware-mvc-razor-page/" md_url: "https://www.nutrient.io/guides/docuvieware/asp-dotnet-mvc-razor/your-first-docuvieware-mvc-razor-page.md" last_updated: "2026-05-18T15:55:45.954Z" description: "Integrate DocuVieware into your ASP.NET MVC 5 project with Razor views by following this guide on setup and configuration." --- # Your first DocuVieware MVC Razor page This guide shows how to integrate DocuVieware in a newly created C# MVC 5 project with Razor view engine. **Requirements** —.NET Framework 4.6 or above **Note** — Screenshots were taken using Visual Studio 2015 and GdPicture.NET 14. They may differ from the current release. ## Empty project creation Start with the **File** > **New** > **Project...** menu. Then choose **Web** > **ASP.NET Web Application**. This guide uses DocuViewareRazor, which is a new ASP.NET 4.6 MVC project.![New ASP.NET MVC 5 project dialog in Visual Studio](@/assets/guides/docuvieware/tutorial1_razor.png) The image below shows the created structure.![Project structure showing MVC folders and files](@/assets/guides/docuvieware/tutorial2_razor.png) Now that the project structure is ready, add project references. ## Adding mandatory references Add the following references to properly use DocuVieware. ### Prerequisite references Before adding DocuVieware, add **Microsoft ASP.NET Web API** and **Newtonsoft JSON**. Even though Newtonsoft JSON is already in the references, the version is outdated and will most likely cause an error at runtime. To do this, run the following commands one after the other in the `Package Manager Console` (from the `Tools` menu, select `NuGet Package Manager` and then click `Package Manager Console`): - `PM> Install-Package Microsoft.AspNet.WebApi` - `PM> Install-Package Newtonsoft.JSON` The installation automatically adds the correct references to the project, including `System.Web.Http`. ### DocuVieware references **Steps:** 1. Add **GdPicture.NET.14.WEB.DocuVieware.dll**, found in `[INSTALLATION FOLDER]\Redist\DocuVieware (.NET Framework 4.6)`. Once added, make sure it’s marked as `Copy Local : True` in its properties window. For more information, refer to the [MSDN documentation](https://msdn.microsoft.com/library/t1zz5y8c(v=vs.100).aspx).![Copy Local property set to True in Properties window](@/assets/guides/docuvieware/tutorial3_razor.png) 2. Add DocuVieware’s JavaScript and CSS to the project using **docuvieware-min.js** and **docuvieware-min.css**, both of which can be found in `[INSTALLATION FOLDER]\Redist\DocuVieware (Resources)`. You already have folders for these resources, so just add `docuvieware-min.js` to the `Scripts` folder and `docuvieware-min.css` to the `Content` folder, as shown in the following screenshot.![DocuVieware resources added to Scripts and Content folders](@/assets/guides/docuvieware/tutorial3b_razor.png) 3. Add them to the bundles so they’re available to the page later on. This is done in the `BundleConfig.cs` file in the `App_Start` folder of the project: ```csharp // Adding the DocuVieware resources we need in a new bundle bundles.Add(new ScriptBundle("~/bundles/docuvieware").Include("~/Scripts/docuvieware-min.js")); bundles.Add(new StyleBundle("~/Content/docuvieware").Include("~/Content/docuvieware-min.css")); ``` Once done, the source code looks as shown in the following screenshot.![BundleConfig.cs with DocuVieware bundles added](@/assets/guides/docuvieware/tutorial7_razor.png) 4. Add extra libraries that are mandatory for deployment. These files are found in `[INSTALLATION FOLDER]\Redist`. - `GdPicture.NET.14.filters.dll` (for a 32-bit execution) - `GdPicture.NET.14.filters.64.dll` (for a 64-bit execution) - `GdPicture.NET.14.image.gdimgplug.dll` (for a 32-bit execution) - `GdPicture.NET.14.image.gdimgplug.64.dll` (for a 64-bit execution) - `GdPicture.NET.14.Imaging.Rendering.Skia.dll` (for a 32-bit execution) - `GdPicture.NET.14.Imaging.Rendering.Skia.64.dll` (for a 64-bit execution) - `GdPicture.NET.14.jbig2.encoder.dll` (for a 32-bit execution) - `GdPicture.NET.14.jbig2.encoder.64.dll` (for a 64-bit execution) Add them to the project using the **Add** > **Existing item...** menu. Once done, the **Build Action** property should be set to **Content**, and the **Copy to Output Directory** property should be set to **Copy always** for each file.![Extra library files with Build Action and Copy settings](@/assets/guides/docuvieware/tutorial4_razor.png) ## Licensing and configuring Now that the references are properly set, open the `Global.asax.cs` file of the project to add some mandatory imports and handle the licensing and configuration of DocuVieware. > You can find the sample source code available here: `[INSTALLATION FOLDER]\Samples\ASP.NET\DocuVieware\aspnet-mvc\_razor\_app\Global.asax.cs`. Add the following mandatory import: ```csharp using GdPicture14.WEB; ``` To properly unlock DocuVieware, add a call to the `RegisterKEY()` method in the `Application_Start` event. Then enter your license key in the method: ```csharp DocuViewareLicensing.RegisterKEY("XXXX"); // Unlocking DocuVieware // Replace "XXXX" with your actual license key. ``` To set up the configuration of DocuVieware, add a call to the `DocuViewareManager.SetupConfiguration()` method in the `Application_Start` event. At this point, create a new folder in the project for cache. For clarity, name it `Cache`. ```csharp DocuViewareManager.SetupConfiguration(true, DocuViewareSessionStateMode.InProc, HttpRuntime.AppDomainAppPath + "\\Cache"); ``` The `Global.asax.cs` file looks like what’s shown in the following screenshot.![Global.asax.cs file with licensing and configuration code](@/assets/guides/docuvieware/tutorial5_razor.png) > You can find the sample source code available here: `[INSTALLATION FOLDER]\Samples\ASP.NET\DocuVieware\aspnet-mvc\_razor\_app\Global.asax.cs`. ## DocuVieware integration Integrate a DocuVieware instance in the index page. **Steps:** 1. Create a new folder in the project root called `Cache` to store session data when the service runs. 2. Open the page located in **Views** > **Home** called `Index.cshtml`. As it already has content, remove it all (except the title code) to start clean. Inject the JavaScript and CSS resources — which were added in a bundle earlier — to the page so you have them ready for the main control integration. This is done using the following code: ```csharp @Styles.Render("~/Content/docuvieware") @Scripts.Render("~/bundles/docuvieware") ``` 3. Create a `div` and insert the DocuVieware control in `Index.cshtml`. Using the object initializer, set the `ID`. Then set both `Height` and `Width` to 100 percent for the control to fit the `div`: ```html
@{ GdPicture14.WEB.DocuVieware docuVieware = new GdPicture14.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(); }
``` The following screenshot shows how `Index.cshtml` finally looks after integration is complete.![Index.cshtml file with DocuVieware integration code](@/assets/guides/docuvieware/tutorial8_razor.png) > You can find the mentioned code in the provided samples (`.cshtml` files) here: `[INSTALLATION FOLDER]\Samples\ASP.NET\DocuVieware\aspnet-mvc\_razor\_app\Views\Home`. That’s it! You can start the project and load documents in your brand-new DocuVieware. --- ## Related pages - [Client/server coming and going with custom actions](/guides/docuvieware/asp-dotnet-mvc-razor/mvc-client-server-coming-and-going-with-custom-actions.md) - [Custom snap-in implementation using an MVC PartialView](/guides/docuvieware/asp-dotnet-mvc-razor/mvc-custom-snap-in-implementation-using-a-partialview.md) - [ASP.NET MVC Razor integration](/guides/docuvieware/asp-dotnet-mvc-razor.md) - [Custom snap-in implementation](/guides/docuvieware/asp-dotnet-mvc-razor/mvc-custom-snap-in-implementation.md) - [Use and handling of the selection area](/guides/docuvieware/asp-dotnet-mvc-razor/mvc-use-and-handling-of-the-selection-area.md)