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 may want to consider using a client side grid, I've been using Jquery datables for quite some time now, mostly with ASPNET MVC but you can also use this with web forms. It is really easy to get going, there are plenty of good examples out there and the best part is there are no postbacks. This tool comes with built in paging, sorting, search etc.

Heres' a good example of Jquery datatables running on web forms http://datatables.extrared.net/Sample/

And here is where you can get started with Jquery datatables https://datatables.net/

Answer 2

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

<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
    }
}