使用Javascript访问asp：Datalist控件内的asp：Textbox值

Question

I am having major difficulty in accessing the text value of an asp:textbox control that is inside an asp:Datalist control. 我在访问位于asp：Datalist控件内的asp：textbox控件的文本值时遇到很大的困难。 Here is the code: 这是代码：

<asp:DataList id="UserIP" DataSourceID="dsGetData" runat="server" CssClass="lblText">
 <ItemTemplate>                 
<span class="lblText">IP Address:</span><br />
     <asp:TextBox ID="tbUserIP" class="textbox_medium" runat="server" AutoPostBack="false" Text='<%# Eval("[IPAddress]") %>' /></asp:TextBox>
 </ItemTemplate></asp:DataList>

I am assigning the Textbox a value from the results of a SQL query. 我从SQL查询的结果中为Textbox分配了一个值。 Then I need to get that value of that Texbox using Javascript. 然后，我需要使用Javascript获得该Texbox的价值。 My JavaScript code is below: 我的JavaScript代码如下：

var temp =  document.getElementById("<%= UserIP.FindControl("tbUserIP").ClientID %>");

I keep getting compilation error: The name 'tbUserIP' does not exist in the current context 我不断收到编译错误：名称“ tbUserIP”在当前上下文中不存在

Any help would be appreciated tremendously. 任何帮助将不胜感激。

Answer 1

The problem with your code is that, when you call UserIP.FindControl("tbUserIP").ClientID the tbUserIP is not available. 代码的问题在于，当您调用UserIP.FindControl("tbUserIP").ClientID ， tbUserIP不可用。

Notice that, to have access to such control, you will have to invoke DataBind over UserIP DataList first and only after that, maybe you will have some results that will result in rows with text boxes called tbUserIP . 请注意，要访问此类控件，您将必须首先在UserIP DataList上调用DataBind，只有在此之后，也许您会有一些结果，这些结果将导致带有名为tbUserIP文本框的行。

To solve that, and because there are so many ways to solve it, I suggest you give a look to this: ASP.NET Page Event Life Cycle , so you can get a clear notion of what step are you probably missing in your way to accomplish what you want. 为了解决这个问题，并且由于有很多解决方法，建议您看一下： ASP.NET页面事件生命周期，这样您就可以清楚地了解到您可能缺少的步骤完成您想要的。

Alternatively, and not relying so much on the ASP.NET page processing, you can work your javascript to deal with what you know that will be the end result. 另外，也可以不使用ASP.NET页面处理，而是使用JavaScript处理最终结果。

Which is: 这是：

If your DataList has results, you will have something like this <input type="text" id="$somecontainerid$1$tpUserIP" value="192.168.0.1"/> in your resulting HTML right?! 如果您的数据列表中有结果，您将在结果HTML中添加类似<input type="text" id="$somecontainerid$1$tpUserIP" value="192.168.0.1"/>吗？
So, to grab that on your javascript, assuming you can use jQuery, you can do something like this: 因此，假设您可以使用jQuery，就可以在JavaScript上进行抓取，您可以执行以下操作：

// grabs all the input fields with id tpUserIP (of the multiple rows). //获取（多行）id为tpUserIP的所有输入字段。

$ipaddressFields = $("input[id*=tpUserIP]"); $ ipaddressFields = $（“ input [id * = tpUserIP]”）;

// alerts each one of them, if any, to show that it works. //提醒其中的每一个（如果有的话）以表明其有效。

if($ipaddressFields.length > 0){ if（$ ipaddressFields.length> 0）{
 $ipaddressFields.each(function(){ alert($(this).val()); }); 
} }

Answer 2

Here's how you'd do it in JavaScript without using JQuery. 不使用JQuery的情况下，这就是使用JavaScript的方式。 I'm not sure from where you'd call the JavaScript function. 我不确定从哪里调用JavaScript函数。 So, I'm giving you two examples. 所以，我举两个例子。 Ie one is onclick of a TextBox and the other is onclick of a button. 即，一个是文本框的onclick，另一个是按钮的onclick。

Here's the HTML markup 这是HTML标记

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!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>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
    function Test(obj) {
        alert(obj.id); // This is the ID of the textbox clicked on
        alert(obj.value); // This is the value of the textbox clicked on
    }

    function Test2() {
        var dataListid = '<%= UserIP.ClientID %>';
        var obj = document.getElementById(dataListid);
        if (obj != 'undefined' || obj != null) {
            for (var i = 0; i < obj.getElementsByTagName('input').length; i++) { // Loop through all TextBoxes (input elements if we talk in markup language)
                alert(obj.getElementsByTagName('input')[i].value); // Here are the values of each textbox
            }
        }
    }

</script>
    <form id="form1" runat="server">
    <div>
        <asp:DataList id="UserIP"  runat="server" CssClass="lblText" >
            <ItemTemplate>                 
            <span class="lblText">IP Address:</span><br />
                <asp:TextBox ID="tbUserIP" class="textbox_medium" runat="server" AutoPostBack="false" Text='<%# String.Concat("Test", (Convert.ToInt32(Container.ItemIndex)+1))%>' onclick="Test(this);" /></asp:TextBox>
            </ItemTemplate>
        </asp:DataList>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Test2();" />
    </div>
    </form>
</body>
</html>

And here's the code behind I used. 这是我使用过的代码。 You may use your own code to bind the DataList. 您可以使用自己的代码来绑定DataList。

using System;
using System.Collections.Generic;

public partial class Test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        List<string> ips = new List<string>() {"1", "2", "3"};
        UserIP.DataSource = ips;
        UserIP.DataBind();

    }
}

Hope this helped. 希望这会有所帮助。

Cheers! 干杯!

使用Javascript访问asp：Datalist控件内的asp：Textbox值

问题描述

2 个解决方案

解决方案1
1 2014-04-15 22:43:28

解决方案2
1 2014-04-15 23:54:56

使用Javascript访问asp：Datalist控件内的asp：Textbox值

问题描述

2 个解决方案

解决方案1 1 2014-04-15 22:43:28

解决方案2 1 2014-04-15 23:54:56

解决方案1
1 2014-04-15 22:43:28

解决方案2
1 2014-04-15 23:54:56