multinerd/Using Signature Pad with ASP.NET MVC.md

## Using Signature Pad with ASP.NET MVC.md

      
    Raw
  

              Using Signature Pad with ASP.NET MVC.md
            
          
    Using Signature Pad with ASP.NET MVC

By Hendy Tarnando · October 23, 2016 · Updated April 5, 2018ASP.NET
Signature Pad is a JavaScript library that allows you to capture user signatures in desktop and mobile browsers. It's HTML5 canvas based and uses variable width Bézier curve interpolation for smooth signature drawing. The other good thing about the library is it doesn't depend on jQuery.
In this tutorial, you will learn how to use the Signature Pad library in an ASP.NET MVC web application. Additionally, you will learn how to work with ASP.NET MVC display templates and editor templates.
Data Types for Signature Images

For storing signature images in SQL Server, we can make use of the varbinary(max) data type for the column. In your model, use byte[] for the property:
public class MyDummyModel
{
    public byte[] MySignature { get; set; }
}
Creating Templates for Displaying and Editing Signatures

In the Views\Shared folder, create folders named DisplayTemplates and EditorTemplates. Then add these two files to their respective folders.
Views\Shared\DisplayTemplates\SignaturePad.cshtml
@model byte[]

<div class="signature-pad">
    <canvas class="panel panel-default"></canvas>
    @Html.HiddenFor(model => model, new { @disabled = "disabled" })
</div>

Views\Shared\EditorTemplates\SignaturePad.cshtml
@model byte[]

<div class="signature-pad">
    <canvas class="panel panel-default"></canvas>
    <button type="button" class="btn btn-default btn-sm btn-clear-canvas">Clear</button>
    @Html.HiddenFor(model => model, ViewData["htmlAttributes"])
</div>

Please note that the above templates use some Bootstrap 3 classes (.panel, .panel-default, .btn, .btn-default, .btn-sm). If you are not using Bootstrap, you can remove the classes and apply your own CSS later.
Using UIHint to Specify the Template to Render Data

Decorate your model property with UIHint attribute in order to specify that the SignaturePad.cshtml templates should be used to display the model property.
public class MyDummyModel
{
    [UIHint("SignaturePad")]
    public byte[] MySignature { get; set; }
}

Installing Signature Pad Using NuGet

You can install Signature Pad library to your project using the NuGet Package Manager. From the Tools menu, select NuGet Package Manager, then click Manage NuGet Packages for Solution. Click the Browse tab, search for 'signaturepad', select that package in the list and select which project will be affected, then click the Install button.
Adding Custom CSS for Signature Pad

Open the Content\Site.css file and add the following CSS rules to the bottom of the file:
.signature-pad > canvas {
    display: block;
    width: 300px;
    height: 150px;
    margin-bottom: 5px;
}

Adding Script for Initializing Signature Pad

In the Scripts folder, add a new JavaScript file named SignaturePadInit.js. Replace the contents of the SignaturePadInit.js file with the following:
var signaturePadWrappers = document.querySelectorAll('.signature-pad');

Array.prototype.forEach.call(signaturePadWrappers, function (wrapper) {
    var canvas = wrapper.querySelector('canvas');
    var clearButton = wrapper.querySelector('.btn-clear-canvas');
    var hiddenInput = wrapper.querySelector('input[type="hidden"]');

    var signaturePad = new SignaturePad(canvas);

    // Read base64 string from hidden input
    var base64str = hiddenInput.value;

    if (base64str) {
        // Draws signature image from data URL
        signaturePad.fromDataURL('data:image/png;base64,' + base64str);
    }

    if (hiddenInput.disabled) {
        signaturePad.off();
    } else {
        signaturePad.onEnd = function () {
            // Returns signature image as data URL and set it to hidden input
            base64str = signaturePad.toDataURL().split(',')[1];
            hiddenInput.value = base64str;
        };

        clearButton.addEventListener('click', function () {
            // Clear the canvas and hidden input
            signaturePad.clear();
            hiddenInput.value = '';
        });
    }
});

Including the Required Scripts to a View

Add the following code to the bottom of your View.
@section Scripts {
    <script src="~/Scripts/signature_pad.min.js"></script>
    <script src="~/Scripts/SignaturePadInit.js"></script>
}

All Set!

Signature Pad is now ready to be used in Views.
@Html.DisplayFor(model => model.MySignature)

@Html.EditorFor(model => model.MySignature)

Share
Tags: asp.net mvcdisplay templateseditor templatessignature pad