ASP.net: обновите GridView без обновления всей страницы? (AsyncPostBackTrigger очень медленный)

Question

Я новичок в ASP.net и стараюсь сделать сверхбыстрый медленный код быстрее.

В настоящее время код использует GridView в UpdatePanel. UpdatePanel находится в модальном всплывающем окне. Всякий раз, когда этот модаль открывается, содержимое должно быть обновлено. Мы делаем это, используя 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

Вам не обязательно нужно 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> 

Но если вы должны открыть Modal с PostBack, вы можете проверить, если это Асинхронный PostBack и пропустить пункты в Page_Load вам не нужны.

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

Answer 2

Вы можете рассмотреть возможность использования на стороне клиента сетки, я использую JQuery datables в течение достаточно долгого времени теперь, в основном, с ASPNET MVC, но вы также можете использовать этот веб-форм. Это действительно легко получить, есть много хороших примеров, и лучшая часть - никаких обратных передач. Этот инструмент поставляется со встроенной в пейджинга, сортировка, поиск и т.д.

Хереса хороший пример Jquery DataTables работает на веб-формы http://datatables.extrared.net/Sample/

А вот где вы можете начать работу с Jquery DataTables https://datatables.net/