2009-11-18 22 views
22

Ho una casella di testo che modifica il contenuto di un menu a discesa nell'evento OnTextChanged. Questo evento sembra sparare quando la casella di testo perde lo stato attivo. Come posso fare in modo che questo accada sulla pressione del tasto o sull'evento keyup?Come posso creare un postback di Textbox su KeyUp?

Ecco un esempio del mio codice

<asp:TextBox ID="Code" runat="server" AutoPostBack="true" OnTextChanged="Code_TextChanged">     

<asp:UpdatePanel ID="Update" runat="server"> 
    <ContentTemplate> 
     <asp:DropDownList runat="server" ID="DateList" />    
    </ContentTemplate> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="Code" /> 
    </Triggers> 
</asp:UpdatePanel> 

Così nel codebehind, mi legano l'elenco a discesa al caricamento della pagina. L'evento Code_TextChanged si collega nuovamente al menu a discesa. Mi piacerebbe che succedesse su ogni pressione di un tasto piuttosto che quando la casella di testo perde lo stato attivo.

Ho ereditato questo codice di recente e questo non è il metodo ideale per farlo per me, ma i limiti di tempo mi impediscono di riscriverlo in un metodo di web service.

Ho provato a utilizzare jQuery per associare l'evento "keyup" in modo che corrisponda all'evento "change" per la casella di testo, ma funziona solo sul primo tasto premuto.

risposta

39

questo risolverà il vostro problema. La logica è uguale alla soluzione suggerita da Kyle.

Dai un'occhiata a questo.

<head runat="server"> 
<title></title> 
<script type="text/javascript"> 
    function RefreshUpdatePanel() { 
     __doPostBack('<%= Code.ClientID %>', ''); 
    }; 
</script> 

    <asp:TextBox ID="Code" runat="server" onkeyup="RefreshUpdatePanel();" AutoPostBack="true" OnTextChanged="Code_TextChanged"></asp:TextBox> 
    <asp:UpdatePanel ID="Update" runat="server"> 
     <ContentTemplate> 
      <asp:DropDownList runat="server" ID="DateList" /> 
      <asp:TextBox runat="server" ID="CurrentTime" ></asp:TextBox> 
     </ContentTemplate> 
     <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="Code" /> 
     </Triggers> 
    </asp:UpdatePanel> 

codice va dietro come questo ...

protected void Code_TextChanged(object sender, EventArgs e) 
    { 
     //Adding current time (minutes and seconds) into dropdownlist 
     DateList.Items.Insert(0, new ListItem(DateTime.Now.ToString("mm:ss"))); 

     //Setting current time (minutes and seconds) into textbox 
     CurrentTime.Text = DateTime.Now.ToString("mm:ss"); 
    } 

ho aggiunto ulteriore casella di testo per vedere il cambiamento in atto, non rimuovere la casella di testo.

+1

lo stesso succede con questo.Quando il pannello di aggiornamento si aggiorna la casella di testo perde lo stato attivo –

+3

Basta rimuovere AutoPostBack = "true" con questa soluzione e dovrebbe funzionare. –

+0

Il commento di Rick è corretto, rimuovere AutoPostBack e funzionerà senza problemi –

0
+0

Ho provato questo, ma funziona solo sul primo tasto premuto. dopodiché la casella di testo perde lo stato attivo e ogni successiva pressione di un tasto non attiva l'evento. come puoi vedere, contrariamente al post che hai consigliato, la mia casella di testo non si trova all'interno del mio pannello di aggiornamento e tuttavia perde ancora lo stato attivo. –

4

Ecco un semplice modo per farlo con javascript, un pannello di aggiornamento, gridview, sqldatasource e una casella di testo. Mentre lo digiti, cerca la tabella e visualizza i risultati. Breve e dolce, nessun codice dietro.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test3.aspx.vb" Inherits="test3" %> 

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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 type="text/javascript"> 
    function runPostback() { 
     document.forms["form1"].submit(); 
     document.getElementById("TextBox1").focus(); 
    } 
    function getFocus(){ 
     var text = document.getElementById("TextBox1"); 
     if (text != null && text.value.length > 0) { 
      if (text.createTextRange) { 
       var FieldRange = text.createTextRange(); 
       FieldRange.moveStart('character', text.value.length); 
       FieldRange.collapse(); 
      FieldRange.select(); } } 
} 

function SetDelay() { 
    setTimeout("runPostback()", 200); 
} 




</script> 
</head> 
<body onload="getFocus()"> 
<form id="form1" runat="server"> 
<div> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="TextBox1" /> 
     </Triggers> 
     <ContentTemplate> 
      <asp:TextBox ID="TextBox1" onkeyup="SetDelay();" runat="server"></asp:TextBox> 
      <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"> 
      </asp:GridView> 
      <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:purchasing2ConnectionString %>" 
       SelectCommand="SELECT [name] FROM [vendors] WHERE ([name] LIKE @name + '%')"> 
       <SelectParameters> 
        <asp:ControlParameter ControlID="TextBox1" Name="name" PropertyName="Text" Type="String" /> 
       </SelectParameters> 
      </asp:SqlDataSource> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
</div> 
</form> 

0

Io uso un trucco javascript per innescare un evento OnTextChanged, io chiamo una funzione sfocatura e che ri-focalizzare il testo di input (o, se si dispone di molti testo di input, messa a fuoco interruttore da due testi di input)

L'ho provato in IE e Firefox.

codice javascript:

function reFocus(id) 
    { 
     document.getElementById(id).blur(); 
     document.getElementById(id).focus(); 
    } 

codice aspx

<asp:TextBox ID="txtProdottoLike" runat="server" 
       ontextchanged="txtProdottoLike_TextChanged" 
       onKeyUp="reFocus(this.id);" 
       AutoPostBack="True"> 
</asp:TextBox> 

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>     
<asp:UpdatePanel ID="Update" runat="server"> 
    <ContentTemplate> 
     <asp:GridView ID="GridProdotto" runat="server" AllowPaging="False" 
       AllowSorting="False" ForeColor="#333333" GridLines="None" 
      OnSelectedIndexChanging="GridProdotto_SelectedIndexChanging" 
      Visible="True" Width="100%" Height="100%" AutoGenerateColumns="False"> 
      <RowStyle BackColor="WhiteSmoke" Font-Size="11px" /> 
      <AlternatingRowStyle BackColor="White" /> 
      <Columns> 
       <asp:BoundField DataField="Prodotto"> 
        <ItemStyle Width="80px" HorizontalAlign="Left" /> 
        <HeaderStyle HorizontalAlign="Left" /> 
       </asp:BoundField> 
       <asp:BoundField DataField="Descrizione"> 
        <ItemStyle HorizontalAlign="Left" /> 
        <HeaderStyle HorizontalAlign="Left" /> 
       </asp:BoundField> 
       <asp:CommandField SelectText="Seleziona" ShowSelectButton="True" ItemStyle-HorizontalAlign="Right"></asp:CommandField> 
      </Columns> 
     </asp:GridView> 
    </ContentTemplate> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="txtProdottoLike" /> 
    </Triggers> 
</asp:UpdatePanel> 

La C# funzione "GridProdotto_SelectedIndexChanging" retrive i dati dal database e costruire la griglia.

Problemi correlati