Async renderen van sharepoint webparts

 
02 februari 2009

In een sharepoint omgeving worden vaak verschillende webparts weergegeven op 1 pagina. Als je zo’n pagina opvraagt, wordt deze pas getoond op het moment dat alle webparts op de server klaar zijn met renderen. Dit kan best lang duren, omdat achter iedere webpart een hele applicatie schuil kan gaan, inclusief web service calls, database calls, berekeningen etc… Zou het niet geweldig zijn als we onze sharepoint pagina direct al in beeld hadden, en op de plek van de webparts een mooie “loading…” animatie totdat deze klaar is met renderen? In deze post een relatief makkelijke manier om dit voor elkaar te krijgen.

Het idee
We gaan een “normale” asp.net user control maken, welke we later als smartpart in sharepoint gaan hangen. Hierop plaatsen we een update-panel met daarbinnen 2 views: 1 voor de “loading…” animatie en 1 voor de inhoud van de webpart zelf. Het plan is om de “loading…” view default te laten zien, totdat er een postback komt. Na de postback kan de normale inhoud van de part getoond worden. Nu hebben we alleen nog een mechanisme nodig voor het automatisch postbacken. Dit doen we met een timer object, tevens uit de ajax library, welke we na de postback verwijderen. Hieronder volgen de gedetailleerde stappen:

De usercontrol
Omdat op dit moment sharepoint en de smartpart werken met asp.net 2.0 en ajax 1.0, gaan we eerst de templates voor visual studio installeren die dit ondersteunen. Deze zijn hier te downloaden:
http://www.microsoft.com/downloads/details.aspx?familyid=5C7DF430-1C34-40D2-B6EC-81353B5FCF2E&displaylang=en
Maak nu een nieuw project aan met behulp van het nieuwe template (zie figuur 1).

ajax1project
Figuur 1: ASP.NET 2.0 AJAX 1.0 template

Daarna kan een usercontrol toegevoegd worden. Voeg hier een updatepanel aan toe, met daarbinnen een timer en een multiview met 2 views (zie codevoorbeeld A). De timer krijgt als interval “1”, zodat hij direct een postback veroorzaakt binnen het updatepanel.

<%@ Control Language=”C#” AutoEventWireup=”true” CodeBehind=”AjaxWebpart.ascx.cs” Inherits=”AjaxWebpart.AjaxWebpart” %>
<asp:UpdatePanel ID=”UpdatePanel” runat=”server”>
    <ContentTemplate>
        <asp:Timer ID=”Timer” Interval=”1″ runat=”server”></asp:Timer>
        <asp:MultiView ID=”MultiView” runat=”server” ActiveViewIndex=”0″>
            <asp:View ID=”ViewLoading” runat=”server”>
                Loading…
            </asp:View>
            <asp:View ID=”ViewControl” runat=”server”>
                My control finished loading!!
            </asp:View>
        </asp:MultiView>
    </ContentTemplate>
</
asp:UpdatePanel>
(Code-voorbeeld A: Ajaxwebpart.ascx)

Vervolgens hebben we een klein stukje code-behind nodig die reageert op onze postback (Zie codevoorbeeld B)

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        MultiView.SetActiveView(ViewControl);
        this.UpdatePanel.ContentTemplateContainer.Controls.Remove(Timer);
        Thread.Sleep(3000);
    }
}
(Code-voorbeeld B: Ajaxwebpart.ascx.cs)
 
We zetten hier de view actief die de control waar het om gaat laat zien. Vergeet niet de timer te verwijderen, anders blijven we postbacks houden, en wel iedere milliseconde! De Thread.Sleep(3000) is toegevoegd om een webpart te simuleren die bijvoorbeeld een webservicecall of berekening van 3 seconden doet. Bedenk wel dat je voor het parallel processen van je webpart een webservice asynchroon moet aanroepen, of een nieuwe thread moet maken voor langzame code.

Deze usercontrol kan vervolgens in een smartpart met ajaxondersteuning gehangen worden. Dit wordt uitgelegd in deze post:
http://weblogs.asp.net/jan/archive/2007/02/22/smartpart-for-sharepoint-asp-net-ajax-support.aspx

Op deze manier is haast elke usercontrol asynchroon te maken wat betreft het inladen, met een klein aantal regels code. De usercontrol is direct te testen wanneer je deze plaatst op een .aspx pagina waar zich een scriptmanager op bevindt. Ik ben benieuwd naar jullie reacties!


Werken met ?
Kijk dan bij onze mogelijkheden voor zowel starters als ervaren engineers.


Categorieën: Development


Reacties (2)

  • Stefan Bookholt schreef:

    Die zijn leuk, kan je je eigen custom donut maken!

    Geplaatst op 09 februari 2009 om 13:08 Permalink

  • Stefan, momenteel ben ik dit aan het uitwerken bij Sogyo. Trouwens nog een tip voor je. Je had het over een fancy loading-animatie en die kun je hier online maken : http://www.ajaxload.info/

    Geplaatst op 06 februari 2009 om 15:30 Permalink