Programmeren in ASP.NET/WebParts

Inleiding

Een onderdeel dat gebruik maakt van de personalisatiemogelijkheden van ASP.NET 2.0 zijn WebParts. WebParts zijn ook al bekend uit Sharepoint (een portal-applicatie van Microsoft), waar de gebruiker de mogelijkheid wordt gegeven een pagina naar smaak in te delen.

Een WebPart is een soort control met bepaalde inhoud. Denk bijvoorbeeld aan een verzameling links, een agenda, het laatste nieuws, enzovoort. De gebruiker kan één of meer WebParts in daarvoor gedefinieerde WebPartZones plaatsen. Als er meer zones op een pagina staan, kan een WebPart in elk van die zones geplaatst worden.

Wanneer de gebruiker klaar is met het indelen van de pagina, worden de instellingen opgeslagen in het profiel van de gebruiker, en zal de indeling de volgende keer dat de gebruiker op de site komt weer zo zijn. ASP.NET 2.0 biedt alle controls die nodig zijn voor deze functionaliteit.

Zones aanmaken

1. Maak eerst een nieuwe pagina, webparts.aspx. Gebruik de master-pagina login.master, zodat je kan inloggen.
2. Open de WebParts-sectie in de Toolbox, en sleep een WebPartManager-control op je pagina. De WebPartManager zorgt voor het beheer van alle WebPart-controls op de pagina. Zelf is hij niet zichtbaar op de pagina.
3. Een pagina die Web Parts gebruikt is verdeeld in verschillende zones: gebieden op de pagina waarop inhoud staat. Typisch gebruiken we tabellen voor deze zones (maar het hoeft niet). Voeg een tabel toe met 2 rijen en 3 kolommen. Wijzig de breedte van de kolommen zodat ze niet alle 3 even breed zijn. Stel een border in zodat je de tabel goed kan zien op de pagina.
4. Sleep een WebPartZone in elk van de zes cellen. Elke WebPartZone krijgt een standaard naam (bv. WebPartZone1) en een standaard heading(HeaderText). Deze instellingen kan je wijzigen in het property-paneel. Verander de grootte van de WebPartZone controls naargelang de cel het toelaat.

Controls toevoegen aan zones

Verander nu de heading van de eerste WebPart-control in Nieuws en sleep een Label op de zone. Het Label wordt automatisch verpakt in een WebPart-control, en de titel ervan wordt ingesteld op Untitled.

Schakel om van design- naar source-view en verander de titel van het label in "Nieuws vandaag" en de tekst in "Elvis treedt op in Vegas".

De markup-code van deze zone ziet er nu zo uit:

<asp:WebPartZone HeaderText="Nieuws" ID="WebPartZone1" runat="server" Width="100%">
   <ZoneTemplate>
      <asp:Label Title="Nieuws vandaag" ID="Label1" runat="server" 
                Text="Elvis treedt op in Vegas" />
   </ZoneTemplate>
</asp:WebPartZone>

Schakel weer naar design-view en sleep een keuzelijst in WebPartZone3. Stel de headertext voor deze WebPartZone in op "Sponsors." Klik op de listbox, en daarna op de smart tag om de ListItemCollection Editor te openen. Voeg een paar items toe aan de lijst. Opnieuw in source-view zet je de Title-property op "Onze sponsors" en start de applicatie. Eerst zul je moeten inloggen. Je ziet nu twee WebParts:

Webparts

Als je op het kleine pijltje klikt, krijg je de opties "Minimize" en "Close".

Minimaliseren en herstellen

Klik op Minimize. De inhoud van de Web Part verdwijnt, en de link verandert van "Minimize" naar "Restore":.

Minimize en Restore

Sluit de browser. Start de toepassing opnieuw op, en log opnieuw in. De geminimaliseerde zone is nog altijd geminimaliseerd! WebParts zijn nauw verbonden met personalisatie, en de instellingen van elke gebruiker worden bewaard in de personalisatie-database.

WebParts laten verplaatsen door de gebruiker

Je kan ervoor zorgen dat elke gebruiker ook de WebParts zelf kan herschikken, bijvoorbeeld "Nieuws" rechts en "Sponsors" links.

Om dit te bekomen, moet je een manier voorzien om de pagina in "Design"-mode te schakelen. Voeg een dropdownlijst toe aan de pagina, zet AutoPostback=True, en gebruik deze SelectedIndexChanged-handler:

    Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
        AddHandler Page.InitComplete, AddressOf InitComplete
    End Sub

    Shadows Sub InitComplete(ByVal sender As Object, ByVal e As System.EventArgs)    
        ' Vul de dropdownlijst met een lijst van display modes.
        Dim mode As WebPartDisplayMode
        For Each mode In WebPartManager1.SupportedDisplayModes
            If mode.IsEnabled(WebPartManager1) Then
                Dim item As New ListItem(mode.Name, mode.Name)
                DisplayModeDropdown.Items.Add(item)
            End If
        Next mode
    End Sub

    ' Selecteer het juiste item in de lijst.
    Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs)
        Dim items As ListItemCollection = DisplayModeDropdown.Items
        Dim selectedIndex As Integer = 
             items.IndexOf(items.FindByText(WebPartManager1.DisplayMode.Name))
        DisplayModeDropdown.SelectedIndex = selectedIndex
    End Sub

    ' Schakel naar de juiste display mode.
    Sub DisplayModeDropdown_SelectedIndexChanged(ByVal sender As Object, _
             ByVal e As EventArgs)
        Dim selectedMode As String = DisplayModeDropdown.SelectedValue
        Dim mode As WebPartDisplayMode = 
            WebPartManager1.SupportedDisplayModes(selectedMode)
        If Not (mode Is Nothing) Then WebPartManager1.DisplayMode = mode
    End Sub

Dit is alles. Start de toepassing. Log in. Kies "Design" in de lijst. Alle WebPartZones worden zichtbaar, en je kan WebParts van de ene naar de andere zone slepen door hun titel te verslepen.

WebParts verplaatsen

Als je het vak weer afkruist, worden de veranderingen behouden. Je kan controleren dat elke gebruiker weer zijn eigen instellingen kan maken.

Personalisatie resetten

Voeg een knop toe aan de pagina, en gebruik deze code:

       WebPartManager1.Personalization.ResetPersonalizationState()

Zelf WebPart-controls aanmaken

In elke WebPart kan je maar één control plaatsen, een tweede control gaat er niet meer bij. Als je meerdere controls op een WebPartZone zet, werken ze dus allemaal als aparte WebParts.

Als je dit wil omzeilen, dan kan dit door een user-control te maken, en op die user-control de controls te zetten die je wil. De user-control vormt dan als geheel een aparte WebPart.

Meer mogelijkheden

Met WebParts zijn nog veel meer mogelijkheden:

• Je kan een CatalogZone op de pagina zetten, waardoor gebruikers extra WebParts kunnen toevoegen aan de pagina
• Je kan een EditorZone op de pagina zetten, waardoor gebruikers van WebParts die het ondersteunen extra eigenschappen kunnen instellen.
• WebParts kunnen met mekaar verbonden worden
• Je kan opties toevoegen aan het WebPart-menu, zogenaamde verbs.
• enz...

Voor gevorderde mogelijkheden, zie: http://www.asp.net/quickstart/aspnet/doc/webparts.aspx