裏面的ListView

Question

TextBox控件設置焦點我有文本框更改事件列表視圖i循環通ListView和繁殖文本框值1到文本框2和秀textbox3它的工作原理確定內部ListView控件和文本框，我想在文本框，當用戶按tab 1所以它去了文本框2，但它沒有發生。

這裏是我的代碼的html和頁面背後

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" 
     DataKeyNames="CategoryId"> 

    <ItemTemplate> 

    <%-- //ajax update panel to have asyn call--%> 
     <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate> 
     <table style="width: 100%;"> 
      <tr> 
       <td> 
        Item: <asp:Label ID="Label4" runat="server" Text='<%# Eval("CategoryName") %>'></asp:Label> &nbsp; &nbsp; 
       </td> 
       <td> 
        &nbsp; 
        QTY: <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" CssClass="qty" ontextchanged="TextBox1_TextChanged" Text="0" ></asp:TextBox> 
       </td> 
       <td> 
        &nbsp; 
        Item Price: <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="true" ontextchanged="TextBox2_TextChanged" Text="0" ></asp:TextBox> 
       </td> 

       <td> 
        &nbsp; 
       Total:(QTY X Item Price) <asp:TextBox ID="TextBox3" runat="server" Enabled='false'></asp:TextBox> 
       </td> 
      </tr> 
      </table> 
      </ContentTemplate> 
      <%--// trigger to call textbox change event on asyn call--%> 
      <Triggers > 
     <asp:AsyncPostBackTrigger ControlID ="TextBox1" EventName ="TextChanged" /> 
     <asp:AsyncPostBackTrigger ControlID ="TextBox2" EventName ="TextChanged" /> 
     </Triggers> 
    </asp:UpdatePanel> 
    </ItemTemplate> 

    </asp:ListView> 

頁背後

public void cal() 
    { 
     //loop thru listview 
     foreach (ListViewItem item in ListView1.Items) 
     { 

      //make vairables and get control value inside listview in variable to be call for calculation 
      TextBox QTY = (TextBox)item.FindControl("TextBox1"); 
      TextBox ItemPrice = (TextBox)item.FindControl("TextBox2"); 

      TextBox TotalPrice = (TextBox)item.FindControl("TextBox3"); 

      if (QTY.Text != "0" && ItemPrice.Text != "0" && QTY.Text != string.Empty && ItemPrice.Text != string.Empty) 
      { 
       // make int or decimal variable to multiply QTY and Item Price textbox value == i conver both QTY and Item Price textbox to int using int.parse method 
       int totalprice = int.Parse(QTY.Text) * int.Parse(ItemPrice.Text); 

       TotalPrice.Text = totalprice.ToString(); 


      } 




     } 



    } 

Answer 1

與您的代碼，TextBox1的或TextBox2中的每一次用戶的變化值，然後按選項卡中，頁面將被提交併且頁面的內容將被更新。所以TextBox2中不能獲得焦點的時候TextBox1的和壓片用戶的變化值。

你可以轉換計算jQuery函數和約束它來改變你的文本框的事件是這樣

$(document).ready(function() { 
    $(".quantity,.price").change(function(e) { 
     var container = $(e.currentTarget).closest("table"); 
     var quantity = $(".quantity", container).val(); 
     var price = $(".price", container).val(); 
     if ($.isNumeric(quantity) && $.isNumeric(price) 
      && parseInt(quantity) != 0 && parseInt(price) != 0) { 
      var total = parseInt(quantity) * parseInt(price); 
      $(".total", container).val(total); 
     } 
    }); 
}); 

不要忘記刪除AsyncPostBackTrigger時，文本框的值改爲禁用回發。

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" 
     DataKeyNames="CategoryId"> 
    <ItemTemplate> 
     <ContentTemplate> 
      <table style="width: 100%;"> 
       <tr> 
        <td> 
         Item: <asp:Label ID="Label4" runat="server" Text='<%# Eval("CategoryName") %>'></asp:Label> &nbsp; &nbsp; 
        </td> 
        <td> 
         &nbsp; 
         QTY: <asp:TextBox ID="TextBox1" runat="server" CssClass="quantity" Text="0" ></asp:TextBox> 
        </td> 
        <td> 
         &nbsp; 
         Item Price: <asp:TextBox ID="TextBox2" runat="server" CssClass="price" Text="0" ></asp:TextBox> 
        </td> 

        <td> 
         &nbsp; 
        Total:(QTY X Item Price) <asp:TextBox ID="TextBox3" runat="server" CssClass="total" Enabled='false'></asp:TextBox> 
        </td> 
       </tr> 
      </table> 
     </ContentTemplate> 
    </ItemTemplate> 
</asp:ListView> 

我在這個鏈接https://jsfiddle.net/oomsvgk0/1/創建了樣本，你可以檢查它。