Guide to capture signature data from Syncfusion Signature control in ASP.NET Core

This article provides a guide on how to capture signature data as base64 from the Syncfusion Signature control and submit it through a form in an ASP.NET Core application.

Prerequisites

• Syncfusion Essential JS 2
• ASP.NET Core MVC Application

Implementation

Step 1: Create the Form in the View

In your Index.cshtml file, create a form with the Syncfusion Signature control and a hidden input field to store the signature data.

<form id="signatureForm" method="post" action="/Home/OnPost">
    <ejs-signature id="signature" name="signaturecanvas"></ejs-signature>
    <input type="hidden" id="signatureData" name="signatureData" />
    <ejs-button id="submit-btn" cssClass="e-primary" onclick="submitForm()" content="Submit"></ejs-button>
</form>

Step 2: Add JavaScript to Handle Form Submission

Include a script to capture the signature data and update the hidden input field before submitting the form.

<script>
    function submitForm() {
        var signatureControl = document.getElementById('signature').ej2_instances[0];
        var hiddenInput = document.getElementById('signatureData');
        hiddenInput.value = signatureControl.getSignature();
        document.getElementById('signatureForm').submit();
    }
</script>

Step 3: Process the Form Data in the Controller

In your HomeController.cs, create an OnPost method to handle the form submission and process the signature data.

public void OnPost(string signatureData)
{
    var data = signatureData;
    // Your logic here, such as saving the signature data to a database
}

Additional Notes

• Ensure that the Syncfusion Essential JS 2 library is properly referenced in your project.
• Customize the form action URL and method names as per your application’s routing structure.

References

• Syncfusion Signature Control Documentation
• Syncfusion Essential JS 2

Please note that the code snippets provided are for guidance and should be adapted to fit the specific needs of your application.