Question

在ASP.NET，c＃和Javascript中为学校开发一个小型签名捕获应用程序。

我有一个.ASPX页面，其中包含一个持有SignaturePad的div（来自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();

并查看警报，并看到签名板已被清除。

根据用户评论，我添加了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和回发方法，但我对此经验很少，并且无法使这种方法有效。

先谢谢你。

从.JS文件将DataURL发送回.ASPX页面

0 个答案: