Refreshing an ASP.Net GridView if an ASP.Net button and the GridView are in different asp:Content blocks

Question

We would like to refresh an ASP.Net GridView if an ASP.Net button and a GridView are in different asp:Content blocks

In a working ASP.Net web form we had a DataSource, GridView, DetailsView, various other controls, an asp:TextBox and a asp:Button for searching data based on what the user enters into the textbox. All of these were in a single asp:Content block and it also had an asp:UpdatePanel.

We decided to change the layout of the form and separate the GridView and the DetailsView and place them into another asp:Content block. When the form was run, everything showed up in the correct locations on the screen and also showed data from the database as expected.

We discovered if the user entered search criteria and clicked the search button, the code in the code-behind file did execute but the GridView did not refresh.

I'm going to assume some extra coding needs to be added in the code-behind file to do that.

Here is the markup for the search button from one of the asp:Content blocks:

<asp:Content 
ID="ContentBody" 
ContentPlaceHolderID="BodyPlaceholder" 
runat="server">

<% '-- Ajax enable this area so flicker us cut down to a minumum. -- %>
<% '---------------------------------------------------------------- %>
<asp:UpdatePanel 
    ID="UpdatePanelSummary" 
    runat="server" 
    UpdateMode="Conditional">

    <ContentTemplate> 

        <h1>Classes / Subjects Maintenance</h1>

        Class Search:
        <asp:TextBox 
            ID="TextBoxSearch" 
            runat="server" 
            Width="207px" 
            Text="ALL">
        </asp:TextBox>

        <asp:Button 
            ID="ButtonSearch" 
            runat="server" 
            Text="Search"
            OnClick="ButtonSearch_Click" />

        <asp:Button 
            ID="ButtonSearchAll" 
            runat="server" 
            Text="Show ALL Classes" 
            OnClick="ButtonSearchAll_Click"/>

        <br />

        <asp:Button 
            ID="ButtonAddNewClass" 
            runat="server" 
            Text="Add a New Class to this List" />
        <br />

        <strong><span class="auto-style1">
        <br />
        To send an email of this list, enter the email address of whom you wish to send it to then click the envelope.</span></strong>        
        <br />
        <br />

        Recipient:
        <asp:TextBox ID="TextBoxEmailRecipient" runat="server" Width="203px"></asp:TextBox>
        <strong><span class="auto-style1">&nbsp;</span></strong>

        <asp:ImageButton 
            ID="ImageButtonEmailThisList" 
            runat="server" 
            BorderStyle="None" 
            ImageUrl="~/Images/email1.png" 
            OnClick="ImageButtonEmailThisList_Click" 
            ToolTip="Email this List as a report." Height="50px" Width="50px" 
        />

        <br />
        <asp:Label ID="LabelEmailMessage" runat="server" style="font-weight: 700; color: black"></asp:Label>
        <br />

    </ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

This is the markup of the asp:Content block that has the GridView:

<asp:Content
ID="DetailsBody" 
ContentPlaceHolderID="DetailsPlaceholder" 
runat="server">

<asp:UpdatePanel 
    ID="UpdatePanelDetails" 
    runat="server" 
    UpdateMode="Conditional">

    <ContentTemplate>


        <% '-- GridView (Grid) for summary.                                                -- %>
        <% '-- The user chooses a Class from here and details are shown in a DetailsView.  -- %>
        <% '--------------------------------------------------------------------------------- %>

        <asp:GridView
            ID="GridViewSummary" 
            runat="server" 
            AllowSorting="True" 
            AutoGenerateColumns="False" 
            DataKeyNames="ID" 
            Width="401px" 
            AllowPaging="True" 
            PageSize="3">

            <Columns>
                <asp:BoundField DataField="ClassName" HeaderText="Class / Subject" 
                    SortExpression="ClassName" >

                    <HeaderStyle HorizontalAlign="Left" />
                    <ItemStyle HorizontalAlign="Left" />
                </asp:BoundField>

                <asp:BoundField DataField="Grade" HeaderText="Grade" 
                    SortExpression="Grade" >

                    <HeaderStyle HorizontalAlign="Left" />
                    <ItemStyle HorizontalAlign="Left" />
                </asp:BoundField>

                <asp:CommandField ButtonType="Button" SelectText="Select Class Details" 
                    ShowSelectButton="True"/>
            </Columns>
            <PagerSettings FirstPageText="First" LastPageText="Last" Mode="NextPreviousFirstLast" NextPageText="Next" PreviousPageText="Previous"/>
        </asp:GridView>


    </ContentTemplate>
</asp:UpdatePanel>    

</asp:Content>

A lot of the controls have been taken out so this code will be easier to follow.

This is the coding from the code-behind file that loads data into the GridView after the user clicks the search button:

Protected Sub ButtonSearch_Click(sender As Object, e As EventArgs)

    ' Show the schedules the user wants.
    '-----------------------------------
    GridViewSummary.DataSource = theTableAdapter.GetDataByAllClasses(TextBoxSearch.Text)
    GridViewSummary.DataBind()
End Sub

Answer 1

you can call UpdatePanelDetails.Update() after bind data on ButtonSearch_Click

Protected Sub ButtonSearch_Click(sender As Object, e As EventArgs)

    ' Show the schedules the user wants.
    '-----------------------------------
    GridViewSummary.DataSource = theTableAdapter.GetDataByAllClasses(TextBoxSearch.Text)
    GridViewSummary.DataBind()
    UpdatePanelDetails.Update()
End Sub