我试图在ASP.NET WebForm中创建一个应用程序来调用javascript代码,以显示“签名面板”。 现在我得到了这个错误:
NewTopazForm.aspx:19 Uncaught TypeError: Cannot read property 'sigStringData' of undefined
at StartSign (NewTopazForm.aspx:19)
at HTMLInputElement.onclick (NewTopazForm.aspx:186)
我的代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NewTopazForm.aspx.cs" Inherits="TopazSignWeb2.NewTopazForm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
var imgWidth;
var imgHeight;
function StartSign()
{
var isInstalled = document.documentElement.getAttribute('SigPlusExtLiteExtension-installed');
if (!isInstalled) {
alert("SigPlusExtLite extension is either not installed or disabled. Please install or enable extension.");
return;
}
var canvasObj = document.getElementById('cnv');
canvasObj.getContext('2d').clearRect(0, 0, canvasObj.width, canvasObj.height);
document.FORM1.sigStringData.value = "SigString: ";
document.FORM1.sigRawData.value = "Base64 String: ";
imgWidth = canvasObj.width;
imgHeight = canvasObj.height;
var message = { "firstName": "", "lastName": "", "eMail": "", "location": "", "imageFormat": 1, "imageX": imgWidth, "imageY": imgHeight, "imageTransparency": false, "imageScaling": false, "maxUpScalePercent": 0.0, "rawDataFormat": "ENC", "minSigPoints": 25 };
top.document.addEventListener('SignResponse', SignResponse, false);
var messageData = JSON.stringify(message);
var element = document.createElement("MyExtensionDataElement");
element.setAttribute("messageAttribute", messageData);
document.documentElement.appendChild(element);
var evt = document.createEvent("Events");
evt.initEvent("SignStartEvent", true, false);
element.dispatchEvent(evt);
}
function SignResponse(event)
{
var str = event.target.getAttribute("msgAttribute");
var obj = JSON.parse(str);
SetValues(obj, imgWidth, imgHeight);
}
function SetValues(objResponse, imageWidth, imageHeight)
{
var obj = null;
if(typeof(objResponse) === 'string'){
obj = JSON.parse(objResponse);
} else{
obj = JSON.parse(JSON.stringify(objResponse));
}
var ctx = document.getElementById('cnv').getContext('2d');
if (obj.errorMsg != null && obj.errorMsg!="" && obj.errorMsg!="undefined")
{
alert(obj.errorMsg);
}
else
{
if (obj.isSigned)
{
document.FORM1.sigRawData.value += obj.imageData;
document.FORM1.sigStringData.value += obj.sigString;
var img = new Image();
img.onload = function ()
{
ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
}
img.src = "data:image/png;base64," + obj.imageData;
}
}
}
function ClearFormData()
{
document.FORM1.sigStringData.value = "SigString: ";
document.FORM1.sigRawData.value = "Base64 String: ";
document.getElementById('SignBtn').disabled = false;
}
</script>
<title></title>
<style type="text/css">
.auto-style1 {
width: 401px;
}
.auto-style2 {
width: 7px;
}
.auto-style3 {
width: 278px;
}
.auto-style4 {
width: 401px;
height: 26px;
text-align: right;
}
.auto-style5 {
width: 7px;
height: 26px;
}
.auto-style6 {
height: 26px;
width: 409px;
}
.auto-style7 {
width: 276px;
}
.auto-style8 {
width: 401px;
text-align: right;
}
.auto-style10 {
width: 273px;
height: 61px;
}
.auto-style11 {
width: 87px;
}
.auto-style12 {
width: 91%;
}
.auto-style13 {
width: 409px;
}
.auto-style14 {
width: 278px;
height: 101px;
}
</style>
</head>
<body>
<form id="FORM1" name="FORM1" runat="server" action="NewTopazForm.aspx">
<div>
<table class="auto-style12">
<tr>
<td class="auto-style1"> </td>
<td class="auto-style2"> </td>
<td class="auto-style13"> </td>
</tr>
<tr>
<td class="auto-style4">First Name : </td>
<td class="auto-style5"></td>
<td class="auto-style6">
<input id="Text1" class="auto-style3" type="text" /></td>
</tr>
<tr>
<td class="auto-style8">Last Name : </td>
<td class="auto-style2"> </td>
<td class="auto-style13">
<input id="Text2" class="auto-style3" type="text" /></td>
</tr>
<tr>
<td class="auto-style8">Email : </td>
<td class="auto-style2"> </td>
<td class="auto-style13">
<input id="Text3" class="auto-style7" type="text" /></td>
</tr>
<tr>
<td class="auto-style8"> </td>
<td class="auto-style2"> </td>
<td class="auto-style13"> </td>
</tr>
<tr>
<td class="auto-style8">Signature: </td>
<td class="auto-style2"> </td>
<td class="auto-style13">
<canvas id="cnv" name="cnv" runat="server" class="auto-style14"></canvas></td>
</tr>
<tr>
<td class="auto-style8"> </td>
<td class="auto-style2"> </td>
<td class="auto-style13"> </td>
</tr>
<tr>
<td class="auto-style8"> </td>
<td class="auto-style2"> </td>
<td class="auto-style13">
<input id="Button1" class="auto-style11" type="button" value="Sign" OnClick="StartSign();" /> </td>
</tr>
<tr>
<td class="auto-style8"> </td>
<INPUT TYPE=HIDDEN NAME="bioSigData" runat="server">
<INPUT TYPE=HIDDEN NAME="sigImgData" runat="server">
<td class="auto-style2"> </td>
<td class="auto-style13"> </td>
</tr>
<tr>
<td class="auto-style8"> </td>
<td class="auto-style2"> </td>
<td class="auto-style13"> </td>
</tr>
<tr>
<td class="auto-style8"> </td>
<td class="auto-style2"> </td>
<td class="auto-style13">
<textarea id="sigStringData" class="auto-style10" name="S1">SigString: </textarea></td>
</tr>
<tr>
<td class="auto-style8"> </td>
<td class="auto-style2"> </td>
<td class="auto-style13">
<textarea id="sigRawData" class="auto-style10" cols="20" name="S2" rows="1">Base64 String: </textarea></td>
</tr>
</table>
</div>
</form>
</body>
</html>
有没有可能我没有定义对象,就像我在这里看到的那样,所有控件都已经定义好了,难道我错过了一行吗?
答案 0 :(得分:0)
当asp.net呈现页面时,将自动使控件与后面的代码不同
因此-要获取sigStringData
id作为页面上的呈现,请使用:
<%=sigStringData.ClientID%>
例如:
document.FORM1.<%=sigStringData.ClientID%>.value = "SigString: ";