Получить элемент управления ярлыком asp.net с помощью JavaScript

Question

У меня есть элемент управления меткой в ​​виде формы, который отображает сумму нескольких текстовых полей.Я не могу получить идентификатор метки tb_TA_2_6 в java-скрипте.

Я пытался

<script type ="text/jscript" language= "javascript" >
 function autosum(t1, t2) {
var sum;
var a = document.getElementById('tb_TA_2_6'); // does not work
var b = FindControl(FormView1, t2); // does not work
var c = <%= 'tb_TA_2_6'.ClientID%>; // unknown component tb_TA_2_6
var c = <%= tb_TA_2_6.ClientID%>; //The name 'tb_TA_2_6' does not exist in the current context

var num2 = $(t2);
    if (num2.textContent)
        sum = num2.textContent;
    else if (num2.innerText)
        sum = num2.innerText;
    else
        sum = num2.innerHTML;
 }

function FindControl(parentControl, strId)
    {
        var returnObject;
        for(i=0;i < parentControl.elements.length; i++)
        {
            if(parentControl.elements[i].id.indexOf(strId) >= 0)
                returnObject = parentControl.elements[i];
            else if(parentControl.elements[i].hasChildNodes())
                returnObject = FindControl(parentControl.elements[i],strId);

            if(returnObject != null) 
            {   //if object is found return
                return returnObject;
            }
        }
        return returnObject;
    }
 </script>        

, но, похоже, ничего из этого не работает, у кого-нибудь есть идея, что происходит сметка с идентификатором tb_TA_2_6.

Вид формы выглядит так:

<asp:FormView ID="FormView1" runat="server" ClientIDMode="Static">
<ItemTemplate>
    <asp:Label ID="labelID" runat="server" Text='<%#Bind("ID") %>' Visible="false"></asp:Label>
    <table id="table1">
        <tr>
            <td>
                <span > Textbox1 </span>
            </td>
            <td>
                <asp:TextBox ID="tb_TA_2_4" onBlur="Javascript:autosum(this, '<%= tb_TA_2_6.ClientID%>');"  runat="server"  Text='<%#Bind("question6i","{0:$#,#0.00}") %>'></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <span>6. (iii) Total Value  </span>
            </td>
            <td>
                <asp:Label ID="tb_TA_2_6" runat="server" ReadOnly="true" Text='<%#Bind("question6iii", "{0:$#,#0.00}") %>'  OnPreRender="FormView1_PreRender" ></asp:Label>
            </td>
        </tr>
    </table>
</ItemTemplate>

HTML-код выглядит следующим образом, я удалил информацию о стиле в своем вопросе.

<tr>

                    <td style="vertical-align: middle; width: 697px; height: 15px; border-style: solid;

                        border-color: #6699cc; border-width: 1px; border-top: 1px solid #fff;">

                        <span style="font-family: MS Sans Serif; font-size: 14px; color: #000000">6. (iii) Total

                            Value of All Benefits For Payment of Utilities </span>

                    </td>

                    <td class="alignright" style="vertical-align: top; width: 157px; height: 15px; border-style: solid;

                        border-color: #6699cc; border-width: 1px; border-left: 1px solid #fff; border-top: 1px solid #fff;">

                        <span id="ctl00_cph_Main_FormView1_tb_TA_2_6" ReadOnly="true" style="font-size:12pt;">$60.00</span>

                    </td>

                </tr>

Answer 1

Label элементы управления отображаются в HTML как span.

Чтобы получить к нему доступ, необходимо получить ClientID.

Вы можете изменить свой JavaScript на:

var a = document.getElementById('<%= tb_TA_2_6.ClientID %>');

В вашем примере var c имя элемента управления Label заключено в кавычки, поэтому оно терпело неудачу.

Вы также можете установить ClientIDMode на static для своей страницы, если хотите, чтобы элементы управления отображали свои идентификаторы в точности так, как вы их указали. Тогда ваш исходный getElementById будет работать так, как ожидалось, без необходимости получать обработанный ClientID.

См. MSDN для ClientIDMode info.

РЕДАКТИРОВАТЬ: Если ваши элементы управления являются частью шаблона контейнера, вам необходимо получить доступ к элементу управления по-другому, получив элемент управления контейнера и затем FindControl из него.

var a = document.getElementById('<%= FormView1.FindControl("tb_TA_2_6").ClientID %>');

Answer 2

Как мы видим, метка ASP.NET с идентификатором "tb_TA_2_6" отображается как элемент span с идентификатором "ctl00_cph_Main_FormView1_tb_TA_2_6".

document.getElementById('ctl00_cph_Main_FormView1_tb_TA_2_6') выберет элемент.

Вы также должны знать, что ваш ярлык создан в пределах ItemTemplate в вашем FormView и что он, скорее всего, отображает несколько элементов. Вот почему вы не можете получить доступ к tb_TA_2_6.ClientID.

Теперь, какой элемент вы хотите, чтобы ваш Javascipt выбрал элемент span из?

UPDATE

Похоже, вы пытаетесь создать таблицу и суммировать некоторые значения из каждой строки. Вот и мы;

ASP.NET UserControl

<table id="myTable">
<asp:FormView ID="FormView1" runat="server">
<ItemTemplate>
    <tr>
        <td><span>Textbox1</span></td>
        <td><asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("question6i", "{0:$#,#0.00}") %>' class="myValue" /></td>
    </tr>
</ItemTemplate>
</asp:FormView>

    <tr>
        <td><span>6. (iii) Total Value</span></td>
        <td><asp:Label ID="TextBox1SumLabel" runat="server" Text='<%# Bind("question6iii", "{0:$#,#0.00}") class="sum" %>' /></td>
    </tr>
</table>

HTML , пример ожидаемого выхода

<table id="myTable" class="styledTable">
    <tr>
        <td><span>Textbox1</span></td>
        <td><input type="text" id="SomeGeneratedClientID_00" class="myValue" Value='60.00' /></td>
    </tr>
    <tr>
        <td><span>Textbox1</span></td>
        <td><input type="text" id="SomeGeneratedClientID_01" class="myValue" Value='40.00' /></td>
    </tr>

    <tr>
        <td><span>6. (iii) Total Value</span></td>
        <td><span ID="ctl00_cph_Main_TextBox1SumLabel" class="sum">100.00</span></td>
    </tr>
</table>

Javascript , jQuery

$(document).ready(function() {

    // Bind the change event to all ".myValue" elements
    $('#myTable .myValue').change(function() {
        // Find parent table element
        var $table = $(this).closest('table');

        // Update summary
        sumTableValues($table);
    });

});

var sumTableValues = function($table) {
    var sum = 0;

    // Iterate through all .myValue elements
    $table.find('.myValue').each(function(index) {
        console.log(index, $(this).val()); // DEBUG
        // NOTE: Need to make sure the value is a number

        // Add the value to the sum
        sum += Number($(this).val());
    });

    console.log('sum', sum); // DEBUG

    // Update the sum
    $table.find('tr:last .sum').text(sum);
    //$('<%= TextBox1SumLabel.ClientID %>').text(sum);  
};

Создано демо для вас, чтобы поиграться, очень надеюсь, что это поможет вам в любом случае.