Entire Page is loading

Question

I have three menus. "Personal Info" "Mobile Info" "Documents" each buttons have their own link/page that displays a GridView. Now, when I click the other menu, the browser loads my entire page that causes so long to load the other page. I want to change that thing.

Now, what i want to do is. I just want only to load the area which the gridview located. Example: If i click the Personal Info button, the PersonalInfo_Gridview will appear in that area, then when I click the Mobile Info Button the PersonalInfo_Gridview will replace by MobileInfo_Gridview without loading the entire page.

here's my screenshot of my 3 menus:

How can i do that? I'm using Microsoft Expression Web, and ASP.NET please help.

Answer 1

You should use an UpdatePanel to update your data.

using the UpdatePanel control, you can enable a Web page to participate in partial-page updates without writing any client script. If you want, you can add custom client script to enhance the client user experience. When you use an UpdatePanel control, the page behavior is browser independent and can potentially reduce the amount of data that is transferred between client and server.

Look at how to set different triggers to use the menu buttons to trigger the udpate.

Refer: Understanding ASP.NET UpdatePanel Triggers

Answer 2

just like this:

<asp:UpdatePanel ID="updPnlTabs" runat="server" >
         <Triggers>
            <asp:PostBackTrigger ControlID="btnPersonalInfo" />
            <asp:PostBackTrigger ControlID="btnMobileInfo" />
            <asp:PostBackTrigger ControlID="btnDocuments" />
         </Triggers>
         <asp:GridView runat="server" ID="ucLAD"/>
         <asp:Button Text="Personal Info" ID="btnPersonalInfo"  runat="server" Onclick="btnPersonalInfo_Click" />
         <asp:Button Text="Mobile Info" ID="btnMobileInfo"  runat="server" Onclick="btnMobileInfo_Click" />
         <asp:Button Text="Documents" ID="btnDocuments"  runat="server" Onclick="btnDocuments_Click" />
</asp:UpdatePanel>  

Now, to update your GridView, place your scripts on the OnClick action or method like this:

    protected void btnPersonalInfo_Click(object sender, EventArgs e)
    {
         // your action here to update your GridView
    }
    protected void btnMobileInfo_Click(object sender, EventArgs e)
    {
         // your action here to update your GridView
    }
    protected void btnDocuments_Click(object sender, EventArgs e)
    {
         // your action here to update your GridView
    }