[{"id":"fd3998bc-28a2-40ad-b1b9-31586ac96510","tags":[{"product":null,"links":null,"id":"c026ae17-6f87-496e-9a27-2d8a951d602a","name":"New","color":"red","productId":"3b9d5285-b2fc-4eaa-89ee-77cf9c41b869"}]},{"id":"196bb20e-587b-47b6-ba91-43c36e843aef","tags":[{"product":null,"links":null,"id":"c026ae17-6f87-496e-9a27-2d8a951d602a","name":"New","color":"red","productId":"3b9d5285-b2fc-4eaa-89ee-77cf9c41b869"}]},{"id":"50358b46-c4c2-4e88-9c00-f13d965c0fcb","tags":[{"product":null,"links":null,"id":"f182429a-ebd9-4613-b594-5e9760e18590","name":"Upd","color":"rgb(245, 168, 56)","productId":"3b9d5285-b2fc-4eaa-89ee-77cf9c41b869"}]},{"id":"d5afa978-f706-4794-a6db-9b3f8a800c0e","tags":[{"product":null,"links":null,"id":"c026ae17-6f87-496e-9a27-2d8a951d602a","name":"New","color":"red","productId":"3b9d5285-b2fc-4eaa-89ee-77cf9c41b869"}]},{"id":"71b2e54a-9376-403a-a457-f25fd5595101","tags":[{"product":null,"links":null,"id":"c026ae17-6f87-496e-9a27-2d8a951d602a","name":"New","color":"red","productId":"3b9d5285-b2fc-4eaa-89ee-77cf9c41b869"}]},{"id":"3f9fe56a-5660-4931-9ad2-83e6150e145e","tags":[{"product":null,"links":null,"id":"c026ae17-6f87-496e-9a27-2d8a951d602a","name":"New","color":"red","productId":"3b9d5285-b2fc-4eaa-89ee-77cf9c41b869"}]}]
        
(Showing Draft Content)

Getting Started with DsDataViewer in ASP.NET Core Application

Let us now look at the steps to configure the DsDataViewer in an ASP.NET Core Application.

Step 1 - Create a new ASP.NET Core Web App in Microsoft Visual Studio, provide a project name, choose .NET 6 Framework, and uncheck HTTPS.

Sample_1

sample_2

Step 2 - In the Solution explorer, select the wwwroot/lib folder, open the terminal to run the npm command, and download the dsdataviewer package.

sample_3

Step 3 - In the terminal run the command - npm install @mescius/dsdataviewer After downloading, you can find the files under lib/node_modules/@mescius/dsdataviewer folder

image

Alternatively, you can manually copy the ***dsdataviewer ***files available in the DsExcel .NET | Java package to the wwwroot folder.

Step 4 - In VS, add a new HTML page to the wwwroot folder and name it index.html.

sample_4

Step 5 - Paste the following code in the index.html file.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="description" content="Document Solutions Data Viewer">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
      <title>Document Solutions Data Viewer Sample</title>
      <script type="text/javascript" src="lib/node_modules/@mescius/dsdataviewer/dsdataviewer.js"></script>
      <script>function loadDataViewer(selector) {
         DsDataViewer.LicenseKey = 'your_license_key';
         
         var viewer = new DsDataViewer(selector, {});
         
         }
      </script>
   </head>
   <body onload="loadDataViewer('#root')">
      <div id="root" style="width:100%;height:100%"></div>
   </body>
</html>

Step 6 - Replace the content of the Program.cs with the following code

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
     app.UseDeveloperExceptionPage();
}
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseRouting();
app.Run();

Step 7 - Build and run the application. A page with the Document Solutions Data Viewer will show in the default browser.

sample_5

Step 8 - Click on the Open document button to load your favorite document. The viewer with a document appears as below:

sample6