ASP.net: Refresh GridView without refreshing the whole page? (AsyncPostBackTrigger really slow)

Question

I am new to ASP.net and trying to make some super slow code run faster.

Currently, the code is using a GridView within an UpdatePanel. The UpdatePanel sits within a modal popup window. Whenever that modal is opened, the content must be refreshed. We are doing this by using AsyncPostBackTrigger, which as I understand goes through the whole page generation cycle before returning and rendering the table.

.aspx.cs

public void UpdateWatchListPopup(object sender, System.EventArgs e)
{
    grdWatchList.DataBind();
}

.aspx:

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

    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="UpdateWatchListPopupBtn" EventName="Click" /> 
    </Triggers>

    <ContentTemplate>

        <div style="display:none">
            <asp:Button ID="UpdateWatchListPopupBtn" runat="server" Text="" OnClick="UpdateWatchListPopup" />
        </div>

        <asp:GridView ID="grdWatchList" OnSorting="grdWatchList_Sorting" runat="server" OnRowCreated="grdWatchList_RowCreated" OnRowDataBound="grdWatchList_RowDataBound" AllowSorting="true" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField>

This is really slow (it takes 5 seconds to display the result), and it is not because there is a lot of data to return! My guess is that Page_Load() is doing doing a bunch of calculations unnecessary to refreshing that particular GridView.

Is there any other way to refresh the GridView asynchronously? I thought about using a WebMethod that fetches the data and then repopulate the table manually from client-side. I was wondering if there are other options?

Thank you

Answer 1

You don't necessarily need a PostBack to open a popup. Here is a snippet that uses the jQuery UI Dialog.

<div id="hiddenGrid" style="display: none">
    <asp:GridView ID="GridView1" runat="server"></asp:GridView>
</div>

<input type="button" value="Open Dialog" onclick="createPopup()" />

<script type="text/javascript">
    function createPopup() {
        var html = document.getElementById('hiddenGrid').innerHTML;
        $('<div />').html(html).dialog({
            resizable: false,
            draggable: true,
            modal: true,
            width: 600,
            height: 800,
            create: function (event, ui) {
                $(".ui-dialog-titlebar").html("<div onclick=\"closePopup()\" class=\"dialog-closeButton\"></div>");
            },
            open: function (event, ui) {
                $('.ui-widget-overlay').bind('click', function () {
                    closePopup();
                })
            }
        });
    }

    function closePopup() {
        $(".ui-dialog-content").dialog("destroy");
    }
</script>

But if you must open the Modal with a PostBack, you can check if it is an Async PostBack and skip the items in Page_Load you don't need.

protected void Page_Load(object sender, EventArgs e)
{
    if (ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack)
    {
        //updatepanel page load
    }
    else
    {
        //normal page load
    }
}