如何使用<%= Control.ClientId%>访问javascript中的用户控件中的控件

时间:2013-11-15 05:58:07

标签: javascript asp.net

我创建了一个用户控件,如下所示:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Add.ascx.vb" Inherits="Add" %>
<asp:Label ID="Label1" runat="server" Text="Num1"></asp:Label>
<asp:TextBox ID="tbNum1" runat="server" onblur="sum(document.getElementById('<%=tbNum1.ClientId %>').value,document.getElementById('<%=tbNum2.ClientId %>').value,'<%=tbSum.ClientId %>');"></asp:TextBox>
<br />
<asp:Label ID="Label2" runat="server" Text="Num2"></asp:Label>
<asp:TextBox ID="tbNum2" runat="server"></asp:TextBox>
<br />
<asp:Label ID="Label3" runat="server" Text="Sum:"></asp:Label>
<asp:TextBox ID="tbSum" runat="server"></asp:TextBox>

<script type="text/javascript">
    function sum(a, b, controlId) {
        if (a != '' && b != '') {
            document.getElementById(controlId).value = parseInt(a) + parseInt(b);
        }
    }
</script>

我在网页中有多个上述用户控件的实例。以下是代码:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<%@ Register Src="~/Add.ascx" TagPrefix="uc" TagName="Add" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc:Add runat="server" ID="ucAdd1" />
        <uc:Add runat="server" ID="ucAdd2" />
    </div>
    </form>
</body>
</html>

当我看到视图来源时,&lt; = control.ClientId%&gt;不呈现控件的客户端ID。 我的问题是为什么&lt; = control.ClientId%&gt;是不是内联工作javascript语法有什么错误?还有什么办法可以分别访问每个用户控件中的文本框?

请告知。

1 个答案:

答案 0 :(得分:0)

试试这个

<script type="text/javascript">
document.getElementById('<%= tbNum2.ClientID %>').onblur = function (){sum(document.getElementById('<%= tbNum1.ClientID %>').value,document.getElementById('<%=tbNum2.ClientID %>').value,'<%=tbSum.ClientID %>'); }
function sum(a, b, controlId) {
if (a != '' && b != '') {
   document.getElementById(controlId).value = parseInt(a) + parseInt(b);
   }
}
</script>