This tutorial shows how to create a blank ASP.NET Core Web application in Visual Studio .NET 2019 and add image viewer to ASP.NET Core application with React.js and Redux.
Here are steps, which must be done:
using Microsoft.AspNetCore.Hosting; namespace WebApplication1.Controllers { public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController { public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment) : base(hostingEnvironment) { } } }
using Microsoft.AspNetCore.Hosting; namespace WebApplication1.Controllers { public class MyVintasoftImageCollectionApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController { public MyVintasoftImageCollectionApiController(IWebHostEnvironment hostingEnvironment) : base(hostingEnvironment) { } } }
using Microsoft.AspNetCore.Hosting; namespace WebApplication1.Controllers { public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController { public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment) : base(hostingEnvironment) { } } }
import * as React from 'react'; import { Route } from 'react-router'; import Layout from './components/Layout'; import './custom.css' export default () => ( <Layout> </Layout> );
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <base href="%PUBLIC_URL%/" /> <!-- manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <script src="jquery-3.4.1.min.js" type="text/javascript"></script> <script src="Vintasoft.Shared.js" type="text/javascript"></script> <script src="Vintasoft.Imaging.Html5.js" type="text/javascript"></script> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>VintaSoft Document Viewer Demo (React.js + Redux)</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html>
/* Provide sufficient contrast against white background */ a { color: #0366d6; } code { color: #E01A76; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .thumbnailViewerContainer { width: 240px; height: 650px; float: left; } .imageViewerContainer { width: 650px; height: 650px; float: left; }
import React, { Component } from 'react'; import { connect } from 'react-redux'; export class ImageViewerDemo extends Component { render() { return ( <div> <h1>VintaSoft Image Viewer Demo (React.js + Redux)</h1> <div id="WebThumbnailViewer1Div" className="thumbnailViewerContainer"></div> <div id="WebImageViewer1Div" className="imageViewerContainer"></div> </div> ); } componentDidMount() { // set the session identifier Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID"); // specify web services, which should be used by Vintasoft Web Document Viewer Vintasoft.Shared.WebServiceJS.defaultFileService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftFileApi"); Vintasoft.Shared.WebServiceJS.defaultImageCollectionService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftImageCollectionApi"); Vintasoft.Shared.WebServiceJS.defaultImageService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftImageApi"); // create thumbnail viewer let thumbnailViewer: Vintasoft.Imaging.UI.WebThumbnailViewerJS = new Vintasoft.Imaging.UI.WebThumbnailViewerJS("WebThumbnailViewer1Div"); // create image viewer let imageViewer: Vintasoft.Imaging.UI.WebImageViewerJS = new Vintasoft.Imaging.UI.WebImageViewerJS("WebImageViewer1Div"); // specify that image viewer depends from thumbnail viewer imageViewer.set_MasterViewer(thumbnailViewer); // open file from session folder and add images from file to the image viewer imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf"); } } export default connect()(ImageViewerDemo);
import * as React from 'react'; import { Route } from 'react-router'; import Layout from './components/Layout'; import ImageViewerDemo from './components/ImageViewerDemo'; import './custom.css' export default () => ( <Layout> <Route exact path='/' component={ImageViewerDemo} /> </Layout> );