Integrate a Signature into a modal dialog in ASP.NET Core application.

3 mins read

Incorporating a signature pad into a web application can be a valuable feature, especially when you need to collect users’ signatures for agreements, forms, or verification purposes. Below is a guide on how to integrate a signature pad into a modal dialog in ASP.NET Core application.

Step-by-Step Implementation

Create the modal popup with Signature Pad

Define the structure of the modal popup and include the signature pad component within it.

<div id="target" class="col-lg-12 control-section" style="height:100%">
    <ejs-button id="targetButton" e-ripple="true" content="OPEN DIALOG"></ejs-button>
    <ejs-dialog id="dialog" open="dialogOpen" height="500px" width="435px" target="#target" close="dialogClose" header="<span>Signature</span>" showCloseIcon="true" visible="false">
        <e-content-template>
            <div class="col-md-12" style="width:100%;max-width:350px;height:200px">
                    <ejs-signature id="clsRiderSignature" width="350px" height="200px" style="width:100%;max-width:350px; height:200px;" maxStrokeWidth="2"></ejs-signature>
            </div>
        </e-content-template>
        <e-dialog-buttons>
             <e-dialog-dialogbutton buttonModel="clear" click="clearButton"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>
</div>

Define clear button model to clear the Signature Pad

Define clear button model which is rendered inside dialog component to clear the Signature Pad.
```
@using Syncfusion.EJ2

@{
    var clear = new { content = "Clear", isPrimary = false, cssClass = "e-custom-btn" };
}
```

Add JavaScript to handle Dialog actions

Implement the JavaScript functions to handle the opening and closing of the dialog.

<script>
    var targetBtn = document.getElementById('targetButton');
    function dialogClose() {
        targetBtn.style.display = 'block';
    }
    function dialogOpen() {
        targetBtn.style.display = 'none';
    }
    targetBtn.onclick = function () {
        var dialogObj = ej.base.getComponent(document.getElementById('dialog'), 'dialog');
        dialogObj.show();
    };
    function clearButton() {
        var signObj = ej.base.getComponent(document.getElementById('clsRiderSignature'), 'signature');
        signObj.clear();
    };
</script>

Style the Target Container

Apply custom styles to the target container to ensure the modal popup displays correctly.
```
<style>
    #target {
        height: 100%;
        min-height: 350px;
    }
</style>
```

Conclusion

By following the steps above, you can successfully integrate a signature pad within a modal popup in your web application using Syncfusion ASP.NET Core components. This feature enhances the user experience by providing a seamless way to capture signatures digitally.

Additional References

core-sample.zip

Did you find this information helpful?

Yes

Comments (0)

Integrate a Signature into a modal dialog in ASP.NET Core application.

Step-by-Step Implementation

Conclusion

Additional References

Access denied