什麼是異步加載小部件的最佳方式？

我試圖模仿我公司內部網站的iGoogle窗口小部件，並在回發郵件時遇到問題。我收到的錯誤是什麼是異步加載小部件的最佳方式？

Sys.WebForms.PageRequestManagerServerErrorException：Sys.WebForms.PageRequestManagerServerErrorException：狀態信息對於此頁無效，可能已損壞。

單擊LayoutButton1按鈕時收到此錯誤。奇怪的是，這個錯誤發生在IE 9和Chrome 16上，但不在Firefox 9中。

如何使用我的方法加載ASPX頁面或用戶控件？我錯過了什麼嗎？有沒有更好的方法來做到這一點？

這裏所期望的行爲我想有：

1）用戶點擊頁面的第一時間和頁面完全加載。每個小部件都顯示一個ajax加載器gif。 2）頁面完全加載後，我會爲每個小部件加載其內容進行異步調用。每個小部件的內容包含ASP.NET服務器控件，如網格視圖控件和樹視圖控件，因此小部件內容需要是用戶控件或ASPX頁面。在我的概念驗證項目中，我使用了ASPX頁面。 3）在檢索到小部件的內容之後，將ajax加載器gif替換爲從異步調用接收到的標記。

這是我正在使用的代碼。請注意我正在爲小部件使用Telerik ASP.NET服務器控件（這不應該對我的問題有任何影響）。

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     // Wires a client-side click event to the layout buttons. 
     $('.layouts').find('input').live('click', function() 
     { 
      if ($(this).attr('class') == 'layoutSelected') 
      { 
       return false; 
      } 
      else 
      { 
       return true; 
      } 
     }); 
    }); 

    // Load content of all widgets. 
    function loadAllWidgets() 
    { 
     loadWidget1(); 
    } 

    // Loads widget #1. 
    function loadWidget1() 
    { 
     $(document).ready(function() 
     { 
      PageMethods.LoadWidgetContent1(onWidgetContentLoadSucceeded, onWidgetContentLoadFailed); 
     }); 
    } 

    // Widget content load success. 
    function onWidgetContentLoadSucceeded(result, userContext, methodName) 
    { 
     switch (methodName) 
     { 
      case "LoadWidgetContent1": 
       $('#Widget1').find('.widgetContent').html(result); 
       break; 
     } 
    } 

    // Widget content load fail. 
    function onWidgetContentLoadFailed(error, userContext, methodName) 
    { 
     alert(error); 
    } 
</script> 

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" /> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate> 
     <div style="padding-bottom: 10px;"> 
      <table class="layouts"> 
       <tr> 
        <td>Layout:</td> 
        <td><asp:Button ID="LayoutButton1" CommandArgument="1" OnClick="LayoutButton_Click" runat="server" /></td> 
       </tr> 
      </table> 
     </div> 
     <div> 
      <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> 
       <telerik:RadDockZone ID="RadDockZone1" CssClass="dockZone dockZoneWide" runat="server" /> 
      </telerik:RadDockLayout> 
     </div> 
    </ContentTemplate> 
</asp:UpdatePanel> 

protected void LayoutButton_Click(object sender, EventArgs e) 
{ 
    var layoutNumber = Convert.ToInt32(((Button)sender).CommandArgument); 

    switch (layoutNumber) 
    { 
     case 1: 
      LayoutButton1.CssClass = "layoutSelected"; 
      LayoutButton2.CssClass = string.Empty; 
      LayoutButton3.CssClass = string.Empty; 
      LayoutButton4.CssClass = string.Empty; 

      RadDockZone1.CssClass = "dockZone dockZoneWide"; 
      RadDockZone2.CssClass = "dockZone dockZoneNormal"; 
      RadDockZone3.CssClass = "dockZone dockZoneNormal"; 
      RadDockZone4.CssClass = "dockZone dockZoneNormal"; 
      RadDockZone5.CssClass = "dockZone dockZoneNormal"; 

      RadDockZone4.Visible = true; 
      RadDockZone5.Visible = false; 
      CreateWidgets(); 

      break; 
    } 
} 

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!IsPostBack) 
    { 
     CreateWidgets(); 
    } 
} 

private void CreateWidgets() 
{ 

    var radDock = new RadDock 
    { 
     Closed = false, 
     DefaultCommands = DefaultCommands.All, 
     ID = "Widget 1", 
     Resizable = false, 
     Skin = "Sitefinity", 
     Title = "Widget 1", 
    }; 

    var divTag = new HtmlGenericControl("div"); 
    divTag.Attributes.Add("class", "widgetContent"); 

    var image = new Image 
    { 
     CssClass = "ajaxLoader", 
     ImageUrl = "~/images/transparent.gif", 
     ToolTip = "loading..." 
    }; 

    divTag.Controls.Add(image); 
    radDock.ContentContainer.Controls.Add(divTag); 
    RadDockLayout1.Controls.Add(radDock); 
    radDock.Dock(RadDockZone1); 


    ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "LoadAllWidgets", "loadAllWidgets();", true); 
} 

[WebMethod] 
public static string LoadWidgetContent1() 
{ 
    var stringWriter = new StringWriter(); 
    HttpContext.Current.Server.Execute("~/WidgetContent/WidgetContent1.aspx", stringWriter); 
    return stringWriter.ToString(); 
}

來源

2012-01-09 Halcyon

updatepanel無法同時處理1個以上的更新，而且您可能會做到這一點，在上次更新完成之前更新面板並且視圖狀態已損壞 - 同時更新面板還有其已準備好的功能，但是你使用jQuery準備好了，這也造成了問題。 – Aristos 2012-01-09 21:02:09

我刪除了更新面板，我得到的錯誤是「狀態信息對此頁無效，可能已損壞。」 – Halcyon 2012-01-09 21:45:11

好的 - 經過幾個小時和多種方法，我想我找到了一個很好的解決方案。我發現的解決方案是使用用戶控件而不是ASPX頁面。這將允許服務器標籤，並防止我有無效的視圖狀態問題。我需要在代碼隱藏做出的唯一改變是更新，像這樣的Web方法：

[WebMethod] 
public static string LoadWidgetContent() 
{ 
    Page pageHolder = new Page(); 
    UserControl viewControl = (UserControl)pageHolder.LoadControl("~/WidgetContent/WidgetContent.ascx"); 
    pageHolder.Controls.Add(viewControl); 

    StringWriter output = new StringWriter(); 
    HttpContext.Current.Server.Execute(pageHolder, output, false); 

    return output.ToString(); 
}

這種做法讓我繼續使用更新面板和加載的小部件的頁面完全加載。 I ended up using Scott Gu's blog as a reference。這有些過時，但使用web方法的基本原理仍然成立。

來源

2012-01-09 23:35:19 Halcyon

您使用的方法是正確的，可以工作。如果您需要專業小部件的示例 - 請查看Telerik Sitefinity。該產品是商業版，但您可以下載試用版並進行測試。

來源

2012-01-09 20:47:39 Veronica

什麼是異步加載小部件的最佳方式？

回答

相關問題