如何使用ListView和InsertTamplate或EditTemplate在javascript函數中獲取TextBox ClientID

Question

我有一個帶有ItemTemplate，EditTemplate和InsertTemplate的ListView。 在Edit和InsertTemplate中有幾個TextBoxes。 我需要計算Javascript中的某些值，但是我不知道如何在我的JS函數中獲取ClientID或將其作為參數傳遞。

JavaScript函數：

<script type="text/javascript">
    function calculate() {
        var length = document.getElementById('???').value;
        var quantity = document.getElementById('???').value;
        var fullLength = document.getElementById('???');
        fullLength.value = length*quantity;
    }
</script>

我的ListView的ASP.NET片段：

<InsertItemTemplate>
    <asp:TextBox ID="Weight" runat="server" Text='<%#Bind("Weight") %>' />
    <asp:TextBox ID="Quantity" runat="server" Text='<%#Bind("Quantity") %>' />
    <asp:TextBox ID="FullLength" runat="server" Text='<%#Bind("FullLength") %>' />
    <asp:Button runat="server" ID="Insert" Text="AddNewEntry" CommandName="Insert" OnClientClick="calculate()" />
</InsertItemTemplate>

什么會代替“ ???”？ 或者，可以在OnClientClick =“ calculate（???，???，???）”“參數中以某種方式傳遞它嗎？

在此先感謝，JiKra

Answer 1

現在，asp.net支持ClientIDMode“ predictable”，您可以通過在EditItemTemplate中為更新按鈕添加OnClientClick處理程序來實現。

• 將ListView的ClientIDMode設置為可預測。
• 將ListView的ClientIDRowSuffix設置為該行的主鍵（例如Northwind的Products表的ProductID）
• 將產品ID傳遞給OnClientClick處理程序
• 使用document.getElementById獲取字段的當前值。

例如，假設您已將ListView1綁定到Northwind的Products表。 產品的主鍵是ProductID。 ListView的聲明性語法為：

<asp:ListView ID="ListView1" runat="server" DataKeyNames="ProductID" 
        DataSourceID="SqlDataSource1" ClientIDMode="Predictable" 
        ClientIDRowSuffix="ProductID">

EditItemTemplate的“更新”按鈕的聲明性語法為：

<asp:Button ID="UpdateButton" runat="server" CommandName="Update" 
                        Text="Update" OnClientClick=<%# string.Format("ShowProductName('{0}');", Eval("ProductID")) %> />

並且OnClientClick處理程序javascript是：

    <script type="text/javascript">
    function ShowProductName(prodId) {
        var prodNameTextBox = document.getElementById('ListView1_ProductNameTextBox_' + prodId);

        alert('product name is ' + prodNameTextBox.value);

        return false;
    }
</script>

注意：假定產品名稱存儲在名為ProductNameTextBox的文本框中。 進行更改以使文本框的名稱與所需字段匹配。 可預測的模式將產生一個與ListView1_YOURFIELDNAMEHERE_PRODUCTIDHERE相似的ID。

有關詳細信息，請參見http://msdn.microsoft.com/zh-cn/library/dd410598(v=vs.100).aspx