Programmeren in ASP.NET/WebParts

Programmeren in ASP.NET

  1. Wat is ASP.NET?
  2. Wat heb ik nodig voor ASP.NET?
  3. Een ASP.NET-server installeren
  4. Je eerste ASP.NET-pagina
  5. HTML-controls
  6. Foutzoeken
  7. Web-server-controls
  8. Webformulieren
  9. Veelgebruikte objecten
  10. Validering
  11. Master-pagina's
  12. Navigatie
  13. Gegevenstoegang
  14. Werken met databanken
  15. Databankgegevens wijzigen
  16. Werken met datacontrols
  17. GridView
  18. FormView en DetailsView
  19. User-controls
  20. Custom controls
  21. AJAX
  22. Viewstate
  23. Configuratiebestanden
  24. Webservices
  25. Beveiliging
  26. Personalisatie en profielen
  27. Thema's en skins
  28. WebParts
  29. Globalisering
  30. Caching
  31. Mail vanuit ASP.NET
  32. Reguliere expressies
  33. Server-side afbeeldingen
  34. Mobiele toepassingen
  35. Meer informatie
  36. Appendix: foutmeldingen

Inleiding

bewerken

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

bewerken
  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

bewerken

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

bewerken

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

bewerken

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

bewerken

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

       WebPartManager1.Personalization.ResetPersonalizationState()

Zelf WebPart-controls aanmaken

bewerken

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

bewerken

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

Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.