Want to update only gridView but whole page is being refreshed - asp.net

Question

Please Help me out.... I am new to ASP.net programming..
I have a a main page and on that page i have a button Button1 , now on clicking that button a panel is supposed to popup.
<ajaxToolkit:ModalPopupExtender ID="modelPopupExtender1"
CancelControlID="Btcancel"
PopupControlID="Panel1" TargetControlID="Button1"
Drag="true" BackgroundCssClass="ModelPopupBG"
runat="server" DropShadow="True"
>
Now in Panel1 i have 2 image buttons. 1) to search out the entered data(i am using a textbox for entry) and fill the data into the gridview1 and 2) to cancel the popup.
<asp:Panel ID="Panel1" runat="server" >
<div class="HelloWorldPopup">
<div class="PopupBody">
<div class="PopupHeader" id="PopupHeader"><b ><p style="margin-top: 10px"> Selection Panel</p></b></div><div id="UpperBody">
<table border="1" runat="server">
<tr>
<th >
<asp:TextBox ID="entry" runat="server"></asp:TextBox></th><th>
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="dropdowns">
<asp:ListItem Text="Name" >
</asp:ListItem><asp:ListItem Text="Address" >
</asp:ListItem><asp:ListItem Text="Telephone">
</asp:ListItem></asp:DropDownList></th><th>
<asp:ImageButton ID="Btok" runat="server" onclick="Btok_Click" ImageUrl="~/images/isearch.png"/>
</th>
<th >
<asp:ImageButton ID="Btcancel" runat="server" ImageUrl="~/images/cancel.gif" />
</th>
</tr>
</table>
</div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
style="margin-top: 11px" BackColor="White" BorderColor="White"
BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="1"
GridLines="None" Width="100%" onselectedindexchanged="GridView1_SelectedIndexChanged" >
<Columns>
<asp:BoundField DataField="id" HeaderText="ID" Visible="False" />
<asp:BoundField DataField="name" HeaderText="Name" />
<asp:BoundField DataField="address" HeaderText="Address" />
<asp:BoundField DataField="telephone" HeaderText="Telephone" />
<asp:CommandField HeaderText="Select" ShowSelectButton="True" />
</Columns>
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#DEDFDE" ForeColor="Black" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#594B9C" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#33276A" />
</asp:GridView>
</div>
everything is fine but only problem i am facing is that the whole page is being refreshed instead of just the gridview1 while i just want to refresh the gridview1 data when i click on BtOk
I guess using updatePanel for that gridView can sort things out for me.. but don't know how ...
What should I do??

Answer 1

I think you have the answer - UpdatePanel (that's one approach)
<asp:UpdatePanel runat="server" ID="GridUpdatePanel">
<ContentTemplate>
<asp:GridViewID="GridView1" runat="server">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Simply create an UpdatePanel tag, and put your GridView between the ContentTemplate