How to get data from signature-pad?

See more:

C#

ASP.NET

MVC

signature

0


I am trying to access the data of the signature_pad from the view, but I am having difficulty, and don't know what steps I should take next. I was following a tutorial on youtube on how this plugin works, which is - https://www.youtube.com/watch?v=NUrpve7hXuM&ab_channel=LearningProgramming Although I couldn't find the exact version of the signature_pad code (it was 2013).

The following is my code for the model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace RegisterAccountWithSignature.Models
{
    public class Account
    {

        public string Username { get; set; }
        public string Password { get; set; }
        public string Address { get; set; }
        public string Signature { get; set; }
    }
}

This is the Controller from which I would like to access the signature and save it.

using RegisterAccountWithSignature.Models;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace RegisterAccountWithSignature.Controllers
{
    public class AccountController : Controller
    {
       
        // GET: Account
        public ActionResult Index()
        {
            return View("Index", new Account());
        }

        // GET: Account/Details/5
        public ActionResult Details(int id)
        {
            return View();
        }

        // GET: Account/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: Account/Create
        [HttpPost]
        public ActionResult Create(Account account)
        {
            string fileName = account.Username + ".png";
            var filePath = Path.Combine("./Images/"+fileName);
            System.IO.File.WriteAllBytes(filePath, Convert.FromBase64String(account.Signature));

            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

This is the view:

@model RegisterAccountWithSignature.Models.Account

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Account</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Username, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Username, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Signature, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="wrapper">
                    <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
                </div>
                <div>
                    <button id="save">Save</button>
                    <button id="clear">Clear</button>
                </div>
            </div>
            
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" id="save" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}


<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">
    var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
        backgroundColor: 'rgba(255, 255, 255, 0)',
        penColor: 'rgb(0, 0, 0)'
    });
    var saveButton = document.getElementById('save');
    var cancelButton = document.getElementById('clear');

    saveButton.addEventListener('click', function (event) {
        var data = signaturePad.toDataURL('image/png');

        // Send data to server instead...
        window.open(data);
    });

    cancelButton.addEventListener('click', function (event) {
        signaturePad.clear();
    });
</script>

What I have tried:

I haven't been able to go any further. Can someone please help me, as I am clueless at this point?