What is Signature .Net Core With Example Code

This code is a simple web page for capturing and displaying a signature using HTML, JavaScript, and ASP.NET Core Razor Pages.Here's how it works:

The HTML section defines a canvas element for drawing the signature, along with buttons for clearing the signature, saving it, and submitting it.

The JavaScript section initializes a SignaturePad object on the canvas element, allowing users to draw their signatures.It also handles clearing the signature, saving it as an image data URL, and submitting the form with the signature data.

@page
@model SignatureModel
@{
    ViewData["Title"] = "Signature";
}
 
<h1>@ViewData["Title"]</h1>
 
<canvas id="signatureCanvas" width="400" height="200" style="border: 1px solid black"></canvas>
<button id="clearButton">Clear Signature</button>
<button id="saveButton">Save Signature</button>
 
<form id="signatureForm" method="post">
    <input type="hidden" id="signatureData" name="signatureData" />
    <button type="submit">Submit Signature</button>
</form>
 
@if (!string.IsNullOrEmpty(TempData["SignatureData"] as string))
{
    <h3>Signature Preview:</h3>
    <img src="@TempData["SignatureData"]" alt="Signature" />
}
 
@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
    <script>
        var canvas = document.getElementById('signatureCanvas');
        var signaturePad = new SignaturePad(canvas);
 
        document.getElementById('clearButton').addEventListener('click', function () {
            signaturePad.clear();
        });
 
        document.getElementById('saveButton').addEventListener('click', function () {
            if (signaturePad.isEmpty()) {
                alert('Please provide a signature first.');
            } else {
                document.getElementById('signatureData').value = signaturePad.toDataURL();
                alert('Signature saved.');
            }
        });
    </script>
}
 
 
 
 
using FreeWebApplication.Models;
using Microsoft.AspNetCore.Mvc;
using System.Diagnostics;
 
namespace FreeWebApplication.Controllers {
    public class SignatureController : Controller
    {
        public IActionResult Index()
        {
            return View("Signature.cshtml");
        }
        [HttpPost]
        public IActionResult SaveSignature(string signatureData)
        {
            // Handle signature data here (save it to database, file, etc.)
            // For demo purposes, we'll just pass it back to the view
            ViewData["SignatureData"] = signatureData;
            return RedirectToAction("Index");
        }
 
    }
}
 
 
 
 
 
@page
@model SignatureModel
@{
    ViewData["Title"] = "Signature";
}
 
<h1>@ViewData["Title"]</h1>
 
<canvas id="signatureCanvas" width="400" height="200" style="border: 1px solid black"></canvas>
<button id="clearButton">Clear Signature</button>
<button id="saveButton">Save Signature</button>
 
<form id="signatureForm" method="post">
    <input type="hidden" id="signatureData" name="signatureData" />
    <button type="button" id="submitButton">Submit Signature</button>
</form>
 
@if (!string.IsNullOrEmpty(TempData["SignatureData"] as string))
{
    <h3>Signature Preview:</h3>
    <img src="@TempData["SignatureData"]" alt="Signature" />
}
 
@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
    <script>
        var canvas = document.getElementById('signatureCanvas');
        var signaturePad = new SignaturePad(canvas);
 
        document.getElementById('clearButton').addEventListener('click', function () {
            signaturePad.clear();
        });
 
        document.getElementById('saveButton').addEventListener('click', function () {
            if (signaturePad.isEmpty()) {
                alert('Please provide a signature first.');
            } else {
                document.getElementById('signatureData').value = signaturePad.toDataURL();
                alert('Signature saved.');
            }
        });
 
        document.getElementById('submitButton').addEventListener('click', function () {
            if (signaturePad.isEmpty()) {
                alert('Please provide a signature first.');
            } else {
                document.getElementById('signatureData').value = signaturePad.toDataURL();
                document.getElementById('signatureForm').submit();
            }
        });
    </script>
}
 
 
 
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
 
namespace Web.Pages {
    public class SignatureModel : PageModel
    {
        public void OnGet()
        {
            // Nothing needed here for a simple GET request
        }
 
        public IActionResult OnPost(string signatureData)
        {
            // Handle signature data here (save it to database, file, etc.)
            // For demo purposes, we'll just display it
            TempData["SignatureData"] = signatureData;
            return RedirectToPage("Signature");
        }
    }
}