web-dev-qa-db-ja.com

KeyUpでテキストボックスポストバックを作成するにはどうすればよいですか？

OnTextChangedイベントのドロップダウンの内容を変更するTextboxがあります。このイベントは、テキストボックスがフォーカスを失ったときに発生するようです。キープレスまたはキーアップイベントでこれを行うにはどうすればよいですか？

これが私のコードの例です

<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>

コードビハインドでは、ページの読み込み時にドロップダウンをバインドします。 Code_TextChangedイベントは、ドロップダウンを再バインドするだけです。これは、テキストボックスがフォーカスを失ったときではなく、キーを押すたびに発生します。

私は最近このコードを継承しましたが、これは私にとってこれを行うための理想的な方法ではありませんが、時間の制限により、これをWebサービスメソッドで書き換えることができません。

JQueryを使用して「keyup」イベントをバインドし、テキストボックスの「change」イベントに一致するように試みましたが、これは最初に押されたキーでのみ機能します。

asp.netajaxasp.net-ajaxupdatepanelpostback
24
Russ Bradberry

これはあなたの問題を解決します。ロジックはカイルによって提案されたソリューションと同じです。

これを見てください。

<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>

後ろのコードはこのようになります...

 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");
    }

テキストボックスを追加して、動作の変化を確認しました。テキストボックスを削除してください。

43
CoderHawk

これは、javascript、更新パネル、gridview、sqldatasource、およびテキストボックスでそれを行う簡単な方法です。入力すると、テーブルが検索され、結果が表示されます。短くて甘い、後ろにコードはありません。

<%@ 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>
4
B Morgan

OnTextChangedイベントをトリガーするためにJavaScriptトリックを使用し、ぼかし関数を呼び出して、入力テキストに再度フォーカスします（または、多くの入力テキストがある場合は、2つの入力テキストからフォーカスを切り替えます）。

IEおよびFirefoxでテストしました。

javaScriptコード：

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

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>

C＃関数「GridProdotto_SelectedIndexChanging」は、データベースからデータを取得してグリッドを構築します。

0
Albicocco

これは役に立ちますか？

ASP.NET TextBoxを起動する方法は、AJAX UpdatePanel？

0
Kyle B.