ASP.net：刷新GridView而不刷新整個頁面嗎？ （AsyncPostBackTrigger確實很慢）

Question

我是ASP.net的新手，正在嘗試使一些超級慢的代碼更快地運行。

當前，該代碼在UpdatePanel中使用GridView。 UpdatePanel位於模式彈出窗口中。 每當打開該模式時，都必須刷新內容。 我們通過使用AsyncPostBackTrigger來做到這一點，據我了解，AsyncPostBackTrigger在返回並呈現表之前會經歷整個頁面生成周期。

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

這確實很慢（顯示結果需要5秒鍾），而不是因為有很多數據要返回！ 我的猜測是Page_Load（）正在做大量的計算，而不需要刷新特定的GridView。

還有其他方法可以異步刷新GridView嗎？ 我考慮過使用一個WebMethod來獲取數據，然后從客戶端手動重新填充表。 我想知道是否還有其他選擇？

謝謝

Answer 1

您可能要考慮使用客戶端網格，我已經使用Jquery datables相當一段時間了，主要是與ASPNET MVC一起使用，但您也可以將其與Web窗體一起使用。 真的很容易上手，這里有很多很好的例子，最好的部分是沒有回發。 該工具具有內置的分頁，排序，搜索等功能。

這是在Web表單上運行的Jquery數據表的一個很好的例子http://datatables.extrared.net/Sample/

這是您可以開始使用Jquery數據表https://datatables.net/的地方

Answer 2

您不一定需要PostBack才能打開彈出窗口。 這是一個使用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>

但是，如果必須使用PostBack打開Modal，則可以檢查它是否為Async PostBack，並跳過不需要的Page_Load中的項目。

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