Отправка DataURL обратно на страницу.ASPX из файла.JS
Разработка небольшого приложения для захвата подписи для школы в ASP.NET, C# и Javascript.
У меня есть страница.ASPX, которая содержит div, содержащий SignaturePad (от Szimeks SignaturePad).
Я хотел бы, чтобы javascript создал DataURL, а затем сохранил его в скрытом поле и вызвал метод в файле aspx.cs, который извлечет значение из скрытого поля и вставит его в базу данных sql для хранения.
SigCapture.aspx -
<body>
<form id="form1" runat="server">
<div hidden="hidden" runat="server">
<input type="hidden" id="hiddenImgValue" runat="server" value="" />
<asp:Button ID="hiddenDownloadBtn" runat="server" OnClick="hiddenDownloadBtn_Click" />
</div>
</form>
<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas id="canvas"></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
</div>
<div>
<button type="button" class="button save" data-action="save-jpg">Submit</button>
</div>
</div>
</div>
</div>
<script src="JS/signature_pad.js"></script>
<script src="JS/app.js"></script>
<div>
<asp:Label ID="Label1" runat="server" Text="LABEL TEST"></asp:Label>
</div>
</body>
</html>
И сопровождающий Javascript
app.js -
saveJPGButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Please provide a signature first.");
} else {
var dataURL = signaturePad.toDataURL("image/jpeg");
var hdnfldVariable = document.getElementById("<%= hiddenImgValue %>");
hdnfldVariable.value = dataURL;
var hdnBtnVariable = document.getElementById("<%= hiddenDownloadBtn %>");
hdBtnVariable.click();
alert("Test Alert Finish save click");
signaturePad.clear();
}
});
Всякий раз, когда я нажимаю кнопку сохранения. Функция savejpg вызывается. Я могу подтвердить это, закомментировав эту часть кода:
var hdnfldVariable = document.getElementById("<%= hiddenImgValue %>");
hdnfldVariable.value = dataURL;
var hdnBtnVariable = document.getElementById("<%= hiddenDownloadBtn %>");
hdBtnVariable.click();
и просмотр Alert, и просмотр signaturePad был очищен.
согласно пользовательским комментариям, я добавляю файл SignatureCapture.aspx.cs:
public partial class SignatureCapture : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//ClientScript.GetPostBackEventReference(hiddenDownloadBtn);
try
{
}
catch(Exception ex)
{
Session["ErrorCode"] = ex.ToString();
}
}
protected void hiddenDownloadBtn_Click(object sender, EventArgs e)
{
Label1.Text = "TEST COMPLETE BUTTON CLICKED FROM JS";
}
}
В основном эта страница будет вызываться, когда пользователь завершит заполнение формы, которую он отправит на эту страницу и попросит подписать. После подписания они должны нажать кнопку отправки, и она должна "за кадром" захватить DataURL и сохранить его в базе данных SQL. У меня есть методы для SQL, которые будут иметь дело с данными, я просто не могу вернуть данные в SigCapture.aspx.cs для обработки SQL.
Это, возможно, не лучший подход, но, кажется, самый простой для моей ситуации. Я пытался найти другие варианты, и мне кажется, что я столкнулся с AJAX и методами обратной передачи для этого, но у меня очень мало опыта с этим и я не смог заставить этот подход работать.
Заранее благодарю.