在没有回发的情况下在文本框keyup事件上显示gridview

Question

can someone plz tell me how to show data in gridview without postback when i enter some text in textbox .... i mean onkeyup event without postback 当我在文本框中输入一些文本时，有人可以告诉我如何在不回发的情况下在gridview中显示数据吗？。

with postback i am able to do the same in asp.net using C#... 使用回发，我可以使用C＃在asp.net中执行相同的操作...

    <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 SetDelay() {
            setTimeout("runPostback()", 100);
        }
 </script>

 <style type="text/css">
        .style1
        {
            width: 100%;
        }
        FixedHeader {
            position: absolute;
            font-weight: bold;
        }     
        </style>


</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <%--<asp:TextBox ID="TextBox1" runat="server" 
            onkeyup="javascript:_doPostBack('TextBob1',' ')" onfocus="this.value = this.value;" 
        AutoPostBack="true" ontextchanged="TextBox1_TextChanged" ></asp:TextBox>
        <br />
--%>

        <asp:UpdatePanel ID="gridsearchUpdatePanel" runat="server">

         <Triggers>
            <asp:AsyncPostBackTrigger ControlID="TextBox1" />
        </Triggers>
        <ContentTemplate>

        <asp:TextBox ID="TextBox1" onkeyup="SetDelay();" runat="server" Width="490px"></asp:TextBox>

        <div id="gridDiv" style="max-height:190px; overflow:auto; max-width:495px; ">
       <asp:GridView ID="SearchGridView" runat="server"  AutoGenerateColumns="False" 
                HeaderStyle-CssClass="FixedHeader" HeaderStyle-BackColor="YellowGreen"
            DataSourceID="SearchMembersSqlDataSource" Width="476px" CellPadding="3" 
                GridLines="Horizontal" BackColor="White" BorderColor="#E7E7FF" 
                   BorderStyle="None" BorderWidth="1px" ShowHeader="False" >
            <AlternatingRowStyle BackColor="#F7F7F7" />

            <Columns>
                <asp:BoundField DataField="id" HeaderText="id" SortExpression="id" />
                <asp:BoundField DataField="vname" HeaderText="vname" SortExpression="vname" />
                <asp:BoundField DataField="vemail" HeaderText="vemail" 
                    SortExpression="vemail" />
                <asp:BoundField DataField="vpassword" HeaderText="vpassword" 
                    SortExpression="vpassword" />
            </Columns>
            <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
            <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" 
                Wrap="True" />
            <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
            <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
            <SortedAscendingCellStyle BackColor="#F4F4FD" />
            <SortedAscendingHeaderStyle BackColor="#5A4C9D" />
            <SortedDescendingCellStyle BackColor="#D8D8F0" />
            <SortedDescendingHeaderStyle BackColor="#3E3277" />
        </asp:GridView>
        </div>
        <asp:SqlDataSource ID="SearchMembersSqlDataSource" runat="server" 
            ConnectionString="<%$ ConnectionStrings:DemoDBConnectionString %>" 
            SelectCommand="prcAdvanceSearchUser" SelectCommandType="StoredProcedure">
            <SelectParameters>
                <asp:ControlParameter ControlID="TextBox1" Name="username" PropertyName="Text" Type="String" />
            </SelectParameters>
        </asp:SqlDataSource>
        </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Is there any way of doing it without postback ??? 有什么办法可以做到没有回发？

Answer 1

You can try changing the display style of the DIV layer which is holding the GridView. 您可以尝试更改保存GridView的DIV图层的显示样式。

Modify the TextBox 修改文本框

<asp:TextBox ID="TextBox1" onkeyup="OnKeyUp_TextBox();" runat="server" Width="490px"></asp:TextBox>

Also the script function to be called 也是要调用的脚本函数

function OnKeyUp_TextBox() {
    var oGridDIV = document.getElementById("gridDiv");

    if(oGridDIV != null) {
        oGridDIV.display = "block";      // display the DIV layer with gridview
        // oGridDIV.display = "none";    // hide the DIV layer with gridview
    }
}

ANd finally the style of the DIV layer holding the GridView 最后，还有拥有GridView的DIV图层的样式

<div id="gridDiv" style="max-height:190px; overflow:auto; max-width:495px; display:none;">

在没有回发的情况下在文本框keyup事件上显示gridview

问题描述

1 个解决方案

解决方案1
0 2014-05-20 14:29:34

在没有回发的情况下在文本框keyup事件上显示gridview

问题描述

1 个解决方案

解决方案1 0 2014-05-20 14:29:34

解决方案1
0 2014-05-20 14:29:34