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

Pass an ASP.Net control into JavaScript function

提问by user1131661

I've written a javascript function which I want to take in a textbox, dropdownlist and a integer. Within the function I need to check the length of the text string and the value of the DDL. The function is below:

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

}

}

I think the function is OK but I can't seem to call it from a Button control in ASP.NET.

我认为该功能还可以，但我似乎无法从 ASP.NET 中的 Button 控件调用它。

Here is my button tag:

这是我的按钮标签：

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

When I click the button I receive an Object Expected error.

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

The code break on the following line:

代码在以下行中断：

<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" /> 

The error message is: Microsoft JScript runtime error: Object expected

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

Please help.

请帮忙。

I'm using ASP.NET4.0

我正在使用 ASP.NET4.0

Thanks

谢谢

回答by Mike Christensen

At the bottom of your page, I would add references to your various client IDs. For example:

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

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

You could then refer to those DOM objects in your client click:

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

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

Now your handler doesn't have to change, since you passed in the correct DOM objects:

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

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

Another way you could do it is to set the ClientIDModeto static on each control:

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

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

Now, you can access the value of this text box with:

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

document.getElementById('textBoxSearch').value;

回答by Kamran Pervaiz

The reason for this error is that you are not passing the objects rather you are passing the IDs of the objects. Solution could be.

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

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

replace it with your OnClientClick and check if it works or not.

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

回答by MilkyWayJoe

You might want to change your CheckSearchfunction to something like this:

您可能希望将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;
    }
}

You're currently passing just a string on your markup and your function is expecting an object.

您目前只在标记上传递一个字符串，而您的函数需要一个对象。

Edit: Alternatively, you can leave the function as it is and change your markup like so:

编辑：或者，您可以保留函数原样并更改标记，如下所示：

Edit 2: Changed the string on document.getElementById

编辑 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);" />

This way you're passing a reference to the combo and textbox and not just the id string.

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

Hopefully the lastedit:

希望最后一次编辑：

I didn't look too much into it, but when I ran that code, I noticed that just like yours, some chars are not being escaped, so it was rendering it like this:

我没有过多研究它，但是当我运行该代码时，我注意到就像你的一样，一些字符没有被转义，所以它是这样呈现的：

document.getElementById('textBoxSearch')

(this can be dealt with, but I don't have the time to do it right now)

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

so the function would receive nullobjects since it couldn't find it through that parameter, so I ended up doing this:

因此该函数将接收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>

Notethat this is not ideal as your function will not be generic enough to handle other controls since I'm getting the reference of the control in the function itself. That being said, I would recommend doing something along the lines of Mike Christensen example (+1) as you'd have the reference to the controls when calling and wouldn't have issues with char escaping, but I haven't tested his code tho.

请注意，这并不理想，因为您的函数的通用性不足以处理其他控件，因为我正在函数本身中获取控件的引用。话虽如此，我建议您按照 Mike Christensen 示例 (+1) 的方式做一些事情，因为您在调用时可以参考控件并且不会遇到字符转义问题，但我还没有测试他的代码寿。

Hope this helps

希望这可以帮助

回答by Alejandro B.

The problem is that you are sending harcoded text: 'textBoxSearch','comboCodes'. You should be sending the ClientId:

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

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