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

【问题标题】：Pass an ASP.Net control into JavaScript function将 ASP.Net 控件传递给 JavaScript 函数
【发布时间】：2025-12-05 05:20:04
【问题描述】：

我编写了一个 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

谢谢

【问题讨论】：

OnClientClick 不需要 URL。删除javascript:。
真的，你应该提高你的接受率......这些答案对你有帮助吗？

标签： javascript asp.net controls

【解决方案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 设置为静态：

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

现在，您可以通过以下方式访问此文本框的值：

document.getElementById('textBoxSearch').value;

【讨论】：

就像我在回答中所说的，我没有测试过这个，但这似乎是最好的方法
ClientIDMode="Static" 是我的解决方案，谢谢！

【解决方案2】：

此错误的原因是您没有传递对象，而是传递了对象的 ID。解决办法可能是。

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

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

【讨论】：

你有正确的想法，但它也行不通。您只是传递控件的客户端 ID，而不是实际的 DOM 对象。例如，javascript 函数需要 DOM 对象才能调用 name.value。
我在看到我使用 ClientID 的那一刻进行了编辑，这毫无意义并且会产生同样的错误 :)

【解决方案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) 的方式做一些事情，因为您在调用时会引用控件并且不会遇到字符转义问题，但我还没有测试过他的代码呵呵。

希望对你有帮助

【讨论】：

我已尝试更改您的示例，但仍然收到错误消息。代码在以下行中断：错误信息是：Microsoft JScript runtime error: Object expected
我修复了上述错误。我现在收到以下错误：Microsoft JScript 运行时错误：'value.length' is null or not an object。
感谢您的回复。我已经更改了我的代码，使其类似于您的第二次编辑。但是我认为问题现在出在我的 JS 函数中。如果我尝试运行 'alert(name.length);'这不会运行，并且函数在此处停止，没有任何错误。有什么想法吗？

【解决方案4】：

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

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

【讨论】：

textBoxSearch.ClientClick ?什么？？
@MilkyWayJoe 哈哈抱歉，我是说 ClientId！
我想 :) 但我认为这可能会呈现 &#39; 而不是单引号