asp.net - outside - updatepanel triggers
¿Cómo hago una devolución de un cuadro de texto en KeyUp? (4)
¿Te ayudaría esto?
Tengo un cuadro de texto que cambia el contenido de un menú desplegable en el evento OnTextChanged. Este evento parece dispararse cuando el cuadro de texto pierde el foco. ¿Cómo puedo hacer que esto suceda en el evento keypress o keyup?
Aquí hay un ejemplo de mi código.
<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>
Así que en el código de enlace, enlace el menú desplegable en la carga de la página. El evento Code_TextChanged simplemente vuelve a enlazar el menú desplegable. Me gustaría que esto sucediera con cada pulsación de tecla en lugar de cuando el cuadro de texto pierde el foco.
Heredé este código recientemente y este no es el método ideal para hacerlo, pero las limitaciones de tiempo me impiden volver a escribir esto en un método de servicio web.
He intentado usar jQuery para vincular el evento "keyup" para que coincida con el evento "cambio" para el cuadro de texto, pero esto solo funciona con la primera tecla presionada.
Aquí hay una forma sencilla de hacerlo con javascript, un panel de actualización, gridview, sqldatasource y un cuadro de texto. A medida que escribe, busca en la tabla y muestra los resultados. Corto y dulce, sin código detrás.
<%@ 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>
Esto resolverá tu problema. La lógica es igual a la solución sugerida por Kyle.
Echa un vistazo a esto.
<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>
Código detrás va así ...
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");
}
He agregado un cuadro de texto adicional para ver el cambio en acción, elimine el cuadro de texto.
Utilizo un truco de javascript para desencadenar un evento OnTextChanged, llamo una función de desenfoque y para volver a enfocar el texto de entrada (o, si tiene muchos textos de entrada, cambie el enfoque de dos textos de entrada)
Lo he probado en IE y Firefox.
código javascript:
function reFocus(id)
{
document.getElementById(id).blur();
document.getElementById(id).focus();
}
código 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 función c # "GridProdotto_SelectedIndexChanging" recupera datos de la base de datos y construye la cuadrícula.