Блог

Главная - Вопросы по программированию - Как мне создать Asp.Net Основной элемент управления страницей Razor, позволяющий пользователям подписывать свои имена?

Как мне создать Asp.Net Основной элемент управления страницей Razor, позволяющий пользователям подписывать свои имена?

#asp.net-core

Вопрос:

Я строю Asp.Net Основное веб — приложение с использованием Razor. Целевая аудитория этого приложения будет использовать его на планшетах. Часть приложения состоит из нескольких страниц/форм, для которых потребуются подписи пользователей. Мы могли бы получить изображение подписи пользователя и отобразить его по запросу на веб-странице.

Можно ли быть более интерактивным и позволить пользователям «подписывать» форму/страницу в браузере? Существуют ли какие-либо сторонние библиотеки управления, которые поддерживали бы эту функциональность? Я почти уверен, что это можно сделать в собственных приложениях, но могу ли я добиться этого с помощью Asp.Net Ядро?

Комментарии:

1. Создает ли эта статья серверные службы для собственных мобильных приложений с помощью ASP.NET Ядро полезно для вас ?

2. @JasonPan — Если я чего-то не упускаю, это не ответ на вопрос. Я знаю, как сделать backend Asp.Net Основная услуга. Я не создаю собственное приложение. Я строю Asp.Net Основное приложение с использованием бритвы. Вопрос в том, как включить контроль на веб-странице для подписей пользователей. Является ли <Холст> чем-то, что я могу использовать?

3. Если мой ответ полезен, пожалуйста, примите его как ответ(нажмите на опцию пометить рядом с ответом, чтобы переключить его с серого на заполнение.), см. meta.stackexchange.com/questions/5234/…

Ответ №1:

Я нашел signature_pad в github, и он работает для меня.

Сначала вы можете взглянуть на скриншоты моих тестовых шагов, и я добавлю тестовый код внизу.

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

Тестовый код

1. подпись.cshtml

 @*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

<form method="POST">
    <p>
        <canvas width="500" height="400" id="signature"
            style="border:1px solid black"></canvas><br>
        <button type="button" id="accept"
            class="btn btn-primary">
            Accept signature
        </button>
        <button type="submit" id="save"
            class="btn btn-primary">
            Save
        </button><br>
        <img width="500" height="400" id="savetarget"
         style="border:1px solid black"><br>
        <input id="SignatureDataUrl" type="text">
    </p>
</form>
<script>
    $(function () {
        var canvas = document.querySelector('#signature');
        var pad = new SignaturePad(canvas);
        $('#accept').click(function () {
            var data = pad.toDataURL();
            $('#savetarget').attr('src', data);
            $('#SignatureDataUrl').val(data);
            pad.off();
        });
        $('#save').click(function () {
            $.ajax({
                url: "/ForTest/get_signature",
                type: "POST",
                data: { base64png:$('#SignatureDataUrl').val()},
                success: function (data) {
                    console.log("success");
                },
                error: function (hata, ajaxoptions, throwerror) {
                    alert("failed");
                }
            });
        });
    });
</script>

2. Код на C# 

 [HttpPost]
public string get_signature(string base64png) {
    var dataUri = base64png;//"data:image/png;base64,iVBORw0K...";
    var encodedImage = dataUri.Split(',')[1];
    var decodedImage = Convert.FromBase64String(encodedImage);
    System.IO.File.WriteAllBytes("signature_pic/" DateTime.Now.ToString("yyyyMMddHHmmss") "signature.png", decodedImage);
    return "ok";
}

Советы

Если вы хотите протестировать мой код, вам нужно создать папку signature_pic, как и мне.

Метки: ,