Javascript 将看不到 ASP.NET Webform 控件答案

【问题标题】：Javascript will not see ASP.NET Webform ControlJavascript 将看不到 ASP.NET Webform 控件
【发布时间】：2019-01-15 10:43:45
【问题描述】：

我正在尝试在 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">&nbsp;</td>
                    <td class="auto-style2">&nbsp;</td>
                    <td class="auto-style13">&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style4">First Name :&nbsp;&nbsp;&nbsp; </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 :&nbsp;&nbsp;&nbsp; </td>
                    <td class="auto-style2">&nbsp;</td>
                    <td class="auto-style13">
                        <input id="Text2" class="auto-style3" type="text" /></td>
                </tr>
                <tr>
                    <td class="auto-style8">Email :&nbsp;&nbsp;&nbsp;&nbsp; </td>
                    <td class="auto-style2">&nbsp;</td>
                    <td class="auto-style13">
                        <input id="Text3" class="auto-style7" type="text" /></td>
                </tr>
                <tr>
                    <td class="auto-style8">&nbsp;</td>
                    <td class="auto-style2">&nbsp;</td>
                    <td class="auto-style13">&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style8">Signature:&nbsp;&nbsp;&nbsp; </td>
                    <td class="auto-style2">&nbsp;</td>
                    <td class="auto-style13">
                        <canvas id="cnv" name="cnv" runat="server" class="auto-style14"></canvas></td>
                </tr>
                <tr>
                    <td class="auto-style8">&nbsp;</td>
                    <td class="auto-style2">&nbsp;</td>
                    <td class="auto-style13">&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style8">&nbsp;</td>
                    <td class="auto-style2">&nbsp;</td>
                    <td class="auto-style13">
                        <input id="Button1" class="auto-style11" type="button" value="Sign"  OnClick="StartSign();" />&nbsp;&nbsp; </td>
                </tr>
                <tr>
                    <td class="auto-style8">&nbsp;</td>
                                    <INPUT TYPE=HIDDEN NAME="bioSigData" runat="server">
                                    <INPUT TYPE=HIDDEN NAME="sigImgData" runat="server">
                    <td class="auto-style2">&nbsp;</td>
                    <td class="auto-style13">&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style8">&nbsp;</td>
                    <td class="auto-style2">&nbsp;</td>
                    <td class="auto-style13">&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style8">&nbsp;</td>
                    <td class="auto-style2">&nbsp;</td>
                    <td class="auto-style13">
                        <textarea id="sigStringData" class="auto-style10" name="S1">SigString: </textarea></td>
                </tr>
                <tr>
                    <td class="auto-style8">&nbsp;</td>
                    <td class="auto-style2">&nbsp;</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>

有没有可能我没有定义对象，因为我在这里看到所有控件都已经定义了，是否有一行我错过了什么？

【问题讨论】：

看起来您从未将元素 sigStringData 分配给变量
嗨 Trevor，使用 document.forms["FORM1"].sigStringData.value 来获取值

标签： javascript c# html asp.net

【解决方案1】：

asp.net在渲染页面时会自动做与后面代码不一样的控件所以 - 获取 sigStringData id 作为页面使用的渲染：

<%=sigStringData.ClientID%>

例如：

document.FORM1.<%=sigStringData.ClientID%>.value = "SigString: ";

【讨论】：