How to pass parameters from client to server-side of the PdfViewerControl?

Essential JS 2 PDF Viewer

The Syncfusion® PDF Viewer is a modern enterprise UI toolkit that has been built from the ground up to be lightweight, responsive, modular, and touch-friendly. It is available in other frameworks such as ASP.NET MVC, ASP.NET Core, JavaScript, Angular, and React.

Refer to the following UG link for getting started with the PdfViewerControl:

https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started/

Passing parameters from client to server

PDF Viewer provides support to pass an ID from the client to the server using the serviceUrl property. The custom serviceUrl should be used while passing parameters from the client to the server. A web service application in ASP.NET Core should be created, and that URL should be provided to the serviceUrl with the parameter that you need to pass to the server-side.

Refer to the following code:

export class AppComponent implements OnInit {
    public service = 'http://localhost:58767/pdfviewer/xyz';
    public document = 'PDF_Succinctly.pdf';
    ngOnInit(): void {
    }
}

Refer to the following KB link for creating a web service application in ASP.NET Core:

https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core

In the ASP.NET Core web service application, you should configure the route and template of Configure(IApplicationBuilder app, IHostingEnvironment env) in Startup.cs for passing the parameters from the client to the server. The ID should be mentioned before the action in a template like "{controller}/{id?}/{action}", because the ID will be added in the serviceUrl before appending the web action method. Refer to the following code:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseResponseCompression();
    app.UseMvc(routes =>
    {
        routes.MapRoute("default", "{controller}/{id?}/{action}");
    });
}

public IActionResult Load(string id, [FromBody] Dictionary<string, string> jsonObject){ 
} 

Angular Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/my-app-2093376304

Web API Service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-pdfviewer-web-service_with_parameter146930884

Run the Web API service first, then that URL should be provided to the serviceUrl property of the PdfViewerControl in the TypeScript file.

Conclusion:

I hope you enjoyed learning about how to pass parameters from client to server-side of the PdfViewerControl.