Update panel gridview asp.net C#

Question

Can you help me with this. When I click on ID 1,2.... take the ID from query string and display those names where id from query string is equal on id_proba in the other table. This is ok and show me. Now i like when i click on ID 1,2.. in GridView1 to refresh only gridview 2 not all page. Need gridview to put in Ajax Update Panel. I put gridview2 in Update panel but don't know what to write in code?

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="id" DataSourceID="SqlDataSource1" CellPadding="4" 
    ForeColor="#333333" GridLines="None" 
    onselectedindexchanged="GridView1_SelectedIndexChanged">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />

        <asp:HyperLinkField 
  DataTextField="id" 
  DataTextFormatString=" {0}" 
  DataNavigateUrlFields="id" HeaderText="id"
  DataNavigateUrlFormatString="WebForm1.aspx?ID={0}"   />
    </Columns>
    <EditRowStyle BackColor="#2461BF" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#EFF3FB" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#F5F7FB" />
    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
    <SortedDescendingCellStyle BackColor="#E9EBEF" />
    <SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:ProbaConnectionString %>" 
    DeleteCommand="DELETE FROM [Proba1] WHERE [id] = @id" 
    InsertCommand="INSERT INTO [Proba1] ([name]) VALUES (@name)" 
    SelectCommand="SELECT [name], [id] FROM [Proba1]" 
    UpdateCommand="UPDATE [Proba1] SET [name] = @name WHERE [id] = @id">
    <DeleteParameters>
        <asp:Parameter Name="id" Type="Int32" />
    </DeleteParameters>
    <InsertParameters>
        <asp:Parameter Name="name" Type="String" />
    </InsertParameters>
    <UpdateParameters>
        <asp:Parameter Name="name" Type="String" />
        <asp:Parameter Name="id" Type="Int32" />
    </UpdateParameters>
</asp:SqlDataSource>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
            DataSourceID="SqlDataSource2">
            <Columns>
                <asp:BoundField DataField="id_proba" HeaderText="id_proba" 
                    SortExpression="id_proba" />
                <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
            </Columns>
        </asp:GridView>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ProbaConnectionString %>" 
            SelectCommand="SELECT [id_proba], [name] FROM [proba3] WHERE ([id_proba] = @id_proba)">
            <SelectParameters>
                <asp:QueryStringParameter Name="id_proba" QueryStringField="ID" Type="Int32" />
            </SelectParameters>
        </asp:SqlDataSource>
    </ContentTemplate>
</asp:UpdatePanel>

Answer 1

To refresh the update panel by clicking in GridView1 you could add a javascript onclick handler to the links in GirdView1 .
In this event handler you could refresh the update panel by calling __doPostBack . You could use jQuery to add the eventhandler to all a tags in the grid as follows:

<script>
   $(function() {
         $("#<%=GridView1.ClientID%> a").bind('click', function() {
             refreshUpdatePanel();
          });
   });

  function refreshUpdatePanel()
  {
    __doPostBack('UpdatePanel1', '');
  }
</script>

Answer 2

If your grids are not too big, put them both in the same update panel.
That way you will not have to write any code to get GridView2 update on clicks in GridView1 .

Like this:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
       <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="id" DataSourceID="SqlDataSource1" CellPadding="4" 
            ForeColor="#333333" GridLines="None" 
            onselectedindexchanged="GridView1_SelectedIndexChanged">
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:CommandField ShowSelectButton="True" />
                <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />

                <asp:HyperLinkField 
          DataTextField="id" 
          DataTextFormatString=" {0}" 
          DataNavigateUrlFields="id" HeaderText="id"
          DataNavigateUrlFormatString="WebForm1.aspx?ID={0}"   />
            </Columns>
            <EditRowStyle BackColor="#2461BF" />
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#EFF3FB" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#F5F7FB" />
            <SortedAscendingHeaderStyle BackColor="#6D95E1" />
            <SortedDescendingCellStyle BackColor="#E9EBEF" />
            <SortedDescendingHeaderStyle BackColor="#4870BE" />
        </asp:GridView>

        <br />
        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
            DataSourceID="SqlDataSource2">
            <Columns>
                <asp:BoundField DataField="id_proba" HeaderText="id_proba" 
                    SortExpression="id_proba" />
                <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
            </Columns>
        </asp:GridView>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ProbaConnectionString %>" 
            SelectCommand="SELECT [id_proba], [name] FROM [proba3] WHERE ([id_proba] = @id_proba)">
            <SelectParameters>
                <asp:QueryStringParameter Name="id_proba" QueryStringField="ID" Type="Int32" />
            </SelectParameters>
        </asp:SqlDataSource>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:ProbaConnectionString %>" 
    DeleteCommand="DELETE FROM [Proba1] WHERE [id] = @id" 
    InsertCommand="INSERT INTO [Proba1] ([name]) VALUES (@name)" 
    SelectCommand="SELECT [name], [id] FROM [Proba1]" 
    UpdateCommand="UPDATE [Proba1] SET [name] = @name WHERE [id] = @id">
    <DeleteParameters>
        <asp:Parameter Name="id" Type="Int32" />
    </DeleteParameters>
    <InsertParameters>
        <asp:Parameter Name="name" Type="String" />
    </InsertParameters>
    <UpdateParameters>
        <asp:Parameter Name="name" Type="String" />
        <asp:Parameter Name="id" Type="Int32" />
    </UpdateParameters>
</asp:SqlDataSource>

Answer 3

看看这种嵌套网格的解决方案http://www.codeproject.com/Articles/38046/Nested-GridView-No-JavaScripts