The TX Text Control Document Viewer can be used in a Blazor Web App in server-side rendering mode. .NET 8 allows you to control the rendering mode by component. The whole concept and how to create a new Blazor Web App using the TX Text Control Document Viewer can be found in the article below.

Learn More

This article shows how to use the Document Viewer in a Blazor Server application with .NET 8. The Document Viewer is a powerful, web-based document viewer that can be easily integrated into any Blazor application.

Using the Document Viewer in a Blazor Server App with .NET 8

SignatureSettings Object

This example is based on such a tutorial project, but it implements the workflow of an electronic signature acquisition process. The example uses the same structure to load documents, but this time with SignatureSettings to enable the signature mode.

The following implementation of LoadDocumentFromFile uses a SignatureSettings object to set the signature settings for the document being signed.

[JSInvokable("LoadDocumentFromFile")]
public void LoadDocumentFromFile(string filename)
{
        // check if the file exists
        if (!System.IO.File.Exists(filename))
        {
                return;
        }

        // load the file into a byte array
        byte[] bDocument = System.IO.File.ReadAllBytes(filename);

        SignatureSettings signatureSettings = new SignatureSettings()
        {
                OwnerName = "John Doe",
                RedirectUrlAfterSignature = this.BasePath + "Signature/SignDocument",
                UniqueId = Guid.NewGuid().ToString(),
                SignerName = "Jane Doe",
                SignatureBoxes = new SignatureBox[]
                {
                        new SignatureBox("txsign")
                        {
                                Style = SignatureBox.SignatureBoxStyle.Signature
                        }
                },
                ShowSignatureBar = true         
        };

        // invoke the JS function 'loadDocument' to load back to the modified document
        _txdocumentviewer?.InvokeVoidAsync("loadDocument", new object[] { Convert.ToBase64String(bDocument), filename, BasePath, signatureSettings });
}

The RedirectUrlAfterSignature property is set to a controller that is part of the implementation of the Razor Web App. A sample document with a signature field is loaded after clicking the Load Document button.

Controller Web API

After signing and submitting, the document is signed and forwarded to the specified controller method.

The controller method loads the signed document, which is returned in the internal TX Text Control format, signs the signature fields by applying a digital certificate, and exports the document as a PDF.

[ApiController]
[Route("signature")]
public class SignatureController : Controller
{
        [HttpPost("SignDocument")]
        public ActionResult SignDocument([FromBody] SignatureData signatureData)
        {
                byte[] bPDF;

                // create temporary ServerTextControl
                using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl())
                {
                        tx.Create();

                        // load the document
                        tx.Load(Convert.FromBase64String(signatureData.SignedDocument.Document),
                          TXTextControl.BinaryStreamType.InternalUnicodeFormat);

                        // create a certificate
                        X509Certificate2 cert = new X509Certificate2("App_Data/textcontrolself.pfx", "123");

                        // assign the certificate to the signature fields
                        TXTextControl.SaveSettings saveSettings = new TXTextControl.SaveSettings()
                        {
                                CreatorApplication = "TX Text Control Blazor Sample Application",
                                SignatureFields = new DigitalSignature[] {
                                        new TXTextControl.DigitalSignature(cert, null, "txsign")
                                }
                        };

                        // save the document as PDF
                        tx.Save("App_Data/results_" + signatureData.UniqueId + ".pdf", TXTextControl.StreamType.AdobePDF, saveSettings);
                }

                return Ok();
        }
}

PDF Creation

The PDF document is then stored on the server in the App_Data folder.

Visit our GitHub repository to download and review the full application.