使用Javascript訪問asp：Datalist控件內的asp：Textbox值

Question

我在訪問位於asp：Datalist控件內的asp：textbox控件的文本值時遇到很大的困難。 這是代碼：

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

我從SQL查詢的結果中為Textbox分配了一個值。 然后，我需要使用Javascript獲得該Texbox的價值。 我的JavaScript代碼如下：

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

我不斷收到編譯錯誤：名稱“ tbUserIP”在當前上下文中不存在

任何幫助將不勝感激。

Answer 1

代碼的問題在於，當您調用UserIP.FindControl("tbUserIP").ClientID ， tbUserIP不可用。

請注意，要訪問此類控件，您將必須首先在UserIP DataList上調用DataBind，只有在此之后，也許您會有一些結果，這些結果將導致帶有名為tbUserIP文本框的行。

為了解決這個問題，並且由於有很多解決方法，建議您看一下： ASP.NET頁面事件生命周期，這樣您就可以清楚地了解到您可能缺少的步驟完成您想要的。

另外，也可以不使用ASP.NET頁面處理，而是使用JavaScript處理最終結果。

這是：

如果您的數據列表中有結果，您將在結果HTML中添加類似<input type="text" id="$somecontainerid$1$tpUserIP" value="192.168.0.1"/>嗎？
因此，假設您可以使用jQuery，就可以在JavaScript上進行抓取，您可以執行以下操作：

//獲取（多行）id為tpUserIP的所有輸入字段。

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

//提醒其中的每一個（如果有的話）以表明其有效。

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

Answer 2

不使用JQuery的情況下，這就是使用JavaScript的方式。 我不確定從哪里調用JavaScript函數。 所以，我舉兩個例子。 即，一個是文本框的onclick，另一個是按鈕的onclick。

這是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>

這是我使用過的代碼。 您可以使用自己的代碼來綁定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();

    }
}

希望這會有所幫助。

干杯!

使用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