将ASP.Net控件传递给JavaScript函数

Question

我写了一个javascript函数，我想在一个文本框，下拉列表和一个整数。 在函数中我需要检查文本字符串的长度和DDL的值。 功能如下：

function CheckSearch(name, code, iMinSize) {
if (name.value.length < iMinSize && code.value === '') {
    alert('You must enter ' + iMinSize + ' letters or more when searching.');
    name.focus();
    return false;
}
else {
    return true;
}

}

我认为该函数没问题，但我似乎无法从ASP.NET中的Button控件调用它。

这是我的按钮标签：

<asp:Button ID="buttonSearch" runat="server" Text="Search" OnClick="buttonSearch_Click"
                OnClientClick="javascript:return CheckSearch('textBoxSearch','comboCodes', 3);" />

当我单击按钮时，我收到一个Object Expected错误。

代码中断在以下行：

<input type="submit" name="ctl00$contentBody$buttonSearch" value="Search" onclick="return CheckSearch(document.getElementById(&#39;textBoxSearch&#39;),document.getElementById(&#39;comboCodes&#39;), 3);" id="contentBody_buttonSearch" />

错误消息是：Microsoft JScript运行时错误：预期的对象

请帮忙。

我正在使用ASP.NET4.0

谢谢

Answer 1

在页面底部，我将添加对您的各种客户端ID的引用。 例如：

<script type="text/javascript">
  var buttonSearch  = document.getElementById('<%= buttonSearch.ClientID %>');
  var textBoxSearch = document.getElementById('<%= textBoxSearch.ClientID %>');
  var comboCodes    = document.getElementById('<%= comboCodes.ClientID %>');
</script>

然后，您可以在客户端中引用这些DOM对象：

<asp:Button ID="buttonSearch" runat="server" Text="Search" OnClick="buttonSearch_Click"
                OnClientClick="return CheckSearch(textBoxSearch, comboCodes, 3);" />

现在您的处理程序不必更改，因为您传入了正确的DOM对象：

if (name.value.length < iMinSize && code.value === '') {
    alert('You must enter ' + iMinSize + ' letters or more when searching.');
    name.focus();
    return false;
}

另一种方法是在每个控件上将ClientIDMode设置为static：

<asp:TextBox ID="textBoxSearch" runat="server" ClientIDMode="Static" />

现在，您可以使用以下命令访问此文本框的值：

document.getElementById('textBoxSearch').value;

Answer 2

出现此错误的原因是您没有传递对象而是传递对象的ID。 解决方案可能是。

OnClientClick="return CheckSearch('<%= textBoxSearch %>','<%= comboCodes %>', 3);

用OnClientClick替换它并检查它是否有效。

Answer 3

您可能希望将CheckSearch功能更改为以下内容：

function CheckSearch(name, code, iMinSize) {
    var textBox, comboBox; // use these variables
    textBox = document.getElementById(name);
    comboBox = document.getElementById(code);
    if (textBox.value.length < iMinSize && comboBox.value === '') {
        alert('You must enter ' + iMinSize + ' letters or more when searching.');
        textBox.focus();
       return false;
    }
    else {
        return true;
    }
}

您当前正在标记上传递一个字符串，而您的函数正在期待一个对象。

编辑：或者，您可以按原样保留该功能并更改您的标记，如下所示：

编辑2 ：更改了document.getElementById上的字符串

<asp:Button ID="buttonSearch" runat="server" Text="Search" OnClick="buttonSearch_Click"
                OnClientClick="return CheckSearch(document.getElementById('<%= textBoxSearch.ClientID %>'),document.getElementById('<%= comboCodes.ClientID %>'), 3);" />

这样您就可以传递对组合和文本框的引用，而不仅仅是id字符串。

希望最后编辑 ：

我没有太多关注它，但当我运行该代码时，我注意到就像你的一样，一些字符没有被转义，所以它呈现如下：

document.getElementById(&#39;textBoxSearch&#39;)

（这可以处理，但我现在没时间做）

所以该函数将接收null对象，因为它无法通过该参数找到它，所以我最终这样做：

<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="textBoxSearch" runat="server" />
            <asp:DropDownList ID="comboCodes" runat="server" >
            <asp:ListItem Text=""></asp:ListItem>
            <asp:ListItem Value="1" Text="One"></asp:ListItem>
            <asp:ListItem Value="2" Text="Two"></asp:ListItem>
            <asp:ListItem Value="3" Text="Drei"></asp:ListItem>
            <asp:ListItem Value="4" Text="Four"></asp:ListItem>
            </asp:DropDownList>

            <asp:Button ID="buttonSearch" runat="server" Text="Search" OnClick="buttonSearch_Click"
                OnClientClick="return CheckSearch(3);" />
        </div>
    </form>
    <script type="text/javascript">

        function CheckSearch(iMinSize) {
            var textBox, comboBox; 
            textBox = document.getElementById('<%= textBoxSearch.ClientID %>');
            comboBox = document.getElementById('<%= comboCodes.ClientID %>');
            if (textBox.value.length < iMinSize && comboBox.value === '') {
                alert('You must enter ' + iMinSize + ' letters or more when searching.');
                textBox.focus();
                return false;
            }
            else {
                return true;
            }
        }
    </script>
</body>

请注意 ，这并不理想，因为您的函数本身不足以处理其他控件，因为我在函数本身中获得了控件的引用。话虽这么说，我建议按照Mike Christensen示例（+1）的方式做一些事情，因为你在调用时会有对控件的引用，并且不会出现char转义的问题，但我还没有测试过他的代码寿。

希望这可以帮助

Answer 4

问题是您正在发送带编码的文本： 'textBoxSearch','comboCodes' 。 您应该发送ClientId：

OnClientClick="javascript:return CheckSearch('<%= textBoxSearch.ClientId %>','<%= comboCodes.ClientId %>', 3);"

将ASP.Net控件传递给JavaScript函数

问题描述

4 个解决方案

解决方案1
2 2012-05-01 15:43:22

解决方案2
0 2012-05-01 15:38:10

解决方案3
0 2012-05-01 15:41:35

解决方案4
0 2012-05-01 15:42:27

将ASP.Net控件传递给JavaScript函数

问题描述

4 个解决方案

解决方案1 2 2012-05-01 15:43:22

解决方案2 0 2012-05-01 15:38:10

解决方案3 0 2012-05-01 15:41:35

解决方案4 0 2012-05-01 15:42:27

解决方案1
2 2012-05-01 15:43:22

解决方案2
0 2012-05-01 15:38:10

解决方案3
0 2012-05-01 15:41:35

解决方案4
0 2012-05-01 15:42:27