Procédure pas à pas : modification des modes d'affichage sur une page WebPart

Article
10/22/2014

Mise à jour : novembre 2007

Cette procédure pas à pas illustre deux méthodes de modification des modes d'affichage d'une page WebPart ASP.NET et montre également comment un utilisateur navigue entre les modes d'affichage de la page. Au cours de cette procédure pas à pas, vous apprendrez à :

Créer un contrôle utilisateur personnalisé qui vous permet de modifier les modes d'affichage d'une page Web qui contient des contrôles WebPart.
Basculer entre les différents modes d'affichage d'une page WebPart.

Pour plus d'informations sur les modes d'affichage et leur utilisation, consultez Modes d'affichage des pages WebPart.

Composants requis

Pour exécuter cette procédure pas à pas, vous devrez utiliser :

installer et configurer Internet Information Services (IIS) sur l'ordinateur qui hébergera le site. Pour plus d'informations sur l'installation et la configuration d'IIS, consultez la documentation de l'aide IIS incluse avec l'installation ou la documentation IIS en ligne sur le site Microsoft TechNet (en anglais) (Ressources techniques d'Internet Information Services 6.0).
Site Web ASP.NET qui peut identifier les utilisateurs individuels. Si vous l'avez déjà configuré, vous pouvez l'utiliser comme point de départ de cette procédure pas à pas. Sinon, pour plus d'informations sur la création d'un répertoire ou d'un site virtuel, consultez Comment : créer et configurer des répertoires virtuels dans IIS 5.0 et 6.0.
Base de données et fournisseur de personnalisations configurés. La personnalisation des WebParts est activée par défaut et elle utilise le fournisseur de personnalisations SQL (SqlPersonalizationProvider) avec SQL Server Express (SSE) pour stocker des données de personnalisation. Cette procédure pas à pas utilise SSE et le fournisseur SQL par défaut. Si SSE est installé, aucune configuration n'est requise. SSE est disponible avec Microsoft Visual Studio 2005 en tant que partie facultative de l'installation ou en tant que téléchargement libre. Pour plus d'informations, consultez la page Web Microsoft SQL Server 2005 Express Edition. Pour utiliser l'une des versions complètes de SQL Server, vous devez installer et configurer une base de données des services d'application ASP.NET ainsi que le fournisseur de personnalisations SQL pour la connexion à cette base de données. Pour plus d'informations, consultez Création et configuration de la base de données des services d'application pour SQL Server. Vous pouvez également créer et configurer un fournisseur personnalisé à utiliser avec d'autres solutions de stockage ou bases de données non-SQL. Pour plus d'informations et pour obtenir un exemple de code, consultez Implémentation d'un fournisseur d'appartenances.
Contrôle WebPart personnalisé dérivé de la classe WebPart, afin que vous puissiez l'ajouter au catalogue de la page WebPart. Pour obtenir un exemple d'un contrôle WebPart personnalisé et comment le référencer dans une page, consultez l'exemple de code du contrôle TextDisplayWebPart dans la documentation de la classe WebPartDisplayMode.

Création d'un contrôle utilisateur pour modifier les modes d'affichage

Dans cette section, vous créez un contrôle utilisateur qui peut être ajouté à toute page contenant des contrôles WebPart, afin que les utilisateurs puissent basculer facilement entre les différents modes d'affichage de la page.

Pour créer un contrôle utilisateur pour modifier les modes d'affichage

Dans un éditeur de texte, créez un fichier.

En haut du fichier, ajoutez une déclaration de contrôle, décrite dans l'exemple de code suivant :

<%@ control language="vb" classname="DisplayModeMenuVB"%>

<%@ control language="C#" classname="DisplayModeMenuCS"%>

Sous la déclaration de contrôle, ajoutez le balisage suivant à la page.

Ce balisage crée l'interface utilisateur pour le contrôle qui est composé de trois parties principales :

Contrôle de liste déroulante (un élément <asp:dropdownlist>) qui permet aux utilisateurs de modifier les modes d'affichage.
Lien hypertexte (un élément <asp:linkbutton>) qui permet à un utilisateur de réinitialiser les données de personnalisation spécifiques à l'utilisateur sur la page, en retournant la page à son apparence et sa disposition par défaut avant les modifications apportées par l'utilisateur.
Paire de contrôles de case d'option (deux éléments <asp:radiobutton>) qui permettent aux utilisateurs de basculer entre une portée de personnalisation partagée et utilisateur (la portée utilisateur est la valeur par défaut). Lorsque l'utilisateur actuel personnalise la page, la portée de personnalisation détermine la plage d'utilisateurs qui pourra consulter les effets de la personnalisation.

Votre code doit ressembler au bloc de code suivant :

<div>
  <asp:Panel ID="Panel1"  
    Borderwidth="1" 
    Width="230" 
    BackColor="lightgray"
    Font-Names="Verdana, Arial, Sans Serif" >
    <asp:Label ID="Label1"  
      Text="&nbsp;Display Mode" 
      Font-Bold="true"
      Font-Size="8"
      Width="120" 
      AssociatedControlID="DisplayModeDropdown"/>
    <asp:DropDownList ID="DisplayModeDropdown"   
      AutoPostBack="true" 
      Width="120"
      OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
    <asp:LinkButton ID="LinkButton1" 
      Text="Reset User State" 
      ToolTip="Reset the current user's personalization data for the page."
      Font-Size="8" 
      OnClick="LinkButton1_Click" />
    <asp:Panel ID="Panel2"  
      GroupingText="Personalization Scope"
      Font-Bold="true"
      Font-Size="8" 
      Visible="false" >
      <asp:RadioButton ID="RadioButton1"  
        Text="User" 
        AutoPostBack="true"
        GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" />
      <asp:RadioButton ID="RadioButton2"  
        Text="Shared" 
        AutoPostBack="true"
        GroupName="Scope" 
        OnCheckedChanged="RadioButton2_CheckedChanged" />
    </asp:Panel>
  </asp:Panel>
</div>

<div>
  <asp:Panel ID="Panel1"  
    Borderwidth="1" 
    Width="230" 
    BackColor="lightgray"
    Font-Names="Verdana, Arial, Sans Serif" >
    <asp:Label ID="Label1"  
      Text="&nbsp;Display Mode" 
      Font-Bold="true"
      Font-Size="8"
      Width="120" 
      AssociatedControlID="DisplayModeDropdown"/>
    <asp:DropDownList ID="DisplayModeDropdown"   
      AutoPostBack="true" 
      Width="120"
      OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
    <asp:LinkButton ID="LinkButton1" 
      Text="Reset User State" 
      ToolTip="Reset the current user's personalization data for the page."
      Font-Size="8" 
      OnClick="LinkButton1_Click" />
    <asp:Panel ID="Panel2"  
      GroupingText="Personalization Scope"
      Font-Bold="true"
      Font-Size="8" 
      Visible="false" >
      <asp:RadioButton ID="RadioButton1"  
        Text="User" 
        AutoPostBack="true"
        GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" />
      <asp:RadioButton ID="RadioButton2"  
        Text="Shared" 
        AutoPostBack="true"
        GroupName="Scope" 
        OnCheckedChanged="RadioButton2_CheckedChanged" />
    </asp:Panel>
  </asp:Panel>
</div>

Nommez le fichier DisplaymodemenuCS.ascx ou DisplaymodemenuVB.ascx (selon le langage que vous utilisez pour l'exemple) et enregistrez-le dans le dossier du répertoire virtuel ou du site Web que vous utilisez pour cette procédure pas à pas.

Pour ajouter des fonctions de mode d'affichage au contrôle utilisateur

Dans le fichier source du contrôle utilisateur, ajoutez une paire de balises <script> au-dessus de la balise d'ouverture <div> dans la page et ajoutez un attribut dans la balise d'ouverture <script>.

Ajoutez le code suivant à la section <script> pour permettre aux utilisateurs de modifier les modes d'affichage de la page, de réinitialiser les données de personnalisation de la page et de basculer entre la portée de personnalisation partagée et utilisateur.

<script >
  ' Use a field to reference the current WebPartManager.
  Dim _manager As WebPartManager

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

  Sub InitComplete(ByVal sender As Object, ByVal e As System.EventArgs)
    _manager = WebPartManager.GetCurrentWebPartManager(Page)

    Dim browseModeName As String = WebPartManager.BrowseDisplayMode.Name

    ' Fill the dropdown with the names of supported display modes.
    Dim mode As WebPartDisplayMode
    For Each mode In _manager.SupportedDisplayModes
      Dim modeName As String = mode.Name
      ' Make sure a mode is enabled before adding it.
      If mode.IsEnabled(_manager) Then
        Dim item As New ListItem(modeName, modeName)
        DisplayModeDropdown.Items.Add(item)
      End If
    Next mode

    ' If shared scope is allowed for this user, display the scope-switching
    ' UI and select the appropriate radio button for the current user scope.
    If _manager.Personalization.CanEnterSharedScope Then
      Panel2.Visible = True
      If _manager.Personalization.Scope = PersonalizationScope.User Then
        RadioButton1.Checked = True
      Else
        RadioButton2.Checked = True
      End If
    End If

  End Sub

  ' Change the page to the selected display mode.
  Sub DisplayModeDropdown_SelectedIndexChanged(ByVal sender As Object, _
    ByVal e As EventArgs)

    Dim selectedMode As String = DisplayModeDropdown.SelectedValue   
    Dim mode As WebPartDisplayMode = _
      _manager.SupportedDisplayModes(selectedMode)
    If Not (mode Is Nothing) Then
      _manager.DisplayMode = mode
    End If

  End Sub

  ' Set the selected item equal to the current display mode.
  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(_manager.DisplayMode.Name))
    DisplayModeDropdown.SelectedIndex = selectedIndex

  End Sub

  ' Reset all of a user's personalization data for the page.
  Protected Sub LinkButton1_Click(ByVal sender As Object, _
    ByVal e As EventArgs)

    _manager.Personalization.ResetPersonalizationState()

  End Sub

  ' If not in User personalization scope, toggle into it.
  Protected Sub RadioButton1_CheckedChanged(ByVal sender As Object, _
    ByVal e As EventArgs)

    If _manager.Personalization.Scope = PersonalizationScope.Shared Then
      _manager.Personalization.ToggleScope()
    End If

  End Sub

  ' If not in Shared scope, and if user is allowed, toggle the scope.
  Protected Sub RadioButton2_CheckedChanged(ByVal sender As Object, _
    ByVal e As EventArgs)

    If _manager.Personalization.CanEnterSharedScope AndAlso _
      _manager.Personalization.Scope = PersonalizationScope.User Then
      _manager.Personalization.ToggleScope()
    End If

  End Sub

</script>

<script >

 // Use a field to reference the current WebPartManager.
  WebPartManager _manager;

  void Page_Init(object sender, EventArgs e)
  {
    Page.InitComplete += new EventHandler(InitComplete);
  }  

  void InitComplete(object sender, System.EventArgs e)
  {
    _manager = WebPartManager.GetCurrentWebPartManager(Page);

    String browseModeName = WebPartManager.BrowseDisplayMode.Name;

    // Fill the dropdown with the names of supported display modes.
    foreach (WebPartDisplayMode mode in _manager.SupportedDisplayModes)
    {
      String modeName = mode.Name;
      // Make sure a mode is enabled before adding it.
      if (mode.IsEnabled(_manager))
      {
        ListItem item = new ListItem(modeName, modeName);
        DisplayModeDropdown.Items.Add(item);
      }
    }

    // If shared scope is allowed for this user, display the scope-switching
    // UI and select the appropriate radio button for the current user scope.
    if (_manager.Personalization.CanEnterSharedScope)
    {
      Panel2.Visible = true;
      if (_manager.Personalization.Scope == PersonalizationScope.User)
        RadioButton1.Checked = true;
      else
        RadioButton2.Checked = true;
    }

  }

  // Change the page to the selected display mode.
  void DisplayModeDropdown_SelectedIndexChanged(object sender, EventArgs e)
  {
    String selectedMode = DisplayModeDropdown.SelectedValue;

    WebPartDisplayMode mode = _manager.SupportedDisplayModes[selectedMode];
    if (mode != null)
      _manager.DisplayMode = mode;
  }

  // Set the selected item equal to the current display mode.
  void Page_PreRender(object sender, EventArgs e)
  {
    ListItemCollection items = DisplayModeDropdown.Items;
    int selectedIndex = 
      items.IndexOf(items.FindByText(_manager.DisplayMode.Name));
    DisplayModeDropdown.SelectedIndex = selectedIndex;
  }

  // Reset all of a user's personalization data for the page.
  protected void LinkButton1_Click(object sender, EventArgs e)
  {
    _manager.Personalization.ResetPersonalizationState();
  }

  // If not in User personalization scope, toggle into it.
  protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
  {
    if (_manager.Personalization.Scope == PersonalizationScope.Shared)
      _manager.Personalization.ToggleScope();
  }

  // If not in Shared scope, and if user is allowed, toggle the scope.
  protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
  {
    if (_manager.Personalization.CanEnterSharedScope && 
        _manager.Personalization.Scope == PersonalizationScope.User)
      _manager.Personalization.ToggleScope();
  }
</script>

Plusieurs points sont à noter dans le code :

Dans la méthode InitComplete, le code détermine les modes d'affichage qui sont actuellement disponibles sur la page et remplit le contrôle de liste déroulante avec les modes d'affichage. Le code détermine également si l'utilisateur actuel peut entrer dans la portée de personnalisation partagée de la page et sélectionne le contrôle de case d'option approprié.
La méthode DisplayModeDropdown_SelectedIndexChanged modifie en fait le mode d'affichage de la page, à l'aide du contrôle WebPartManager et le mode sélectionné par l'utilisateur.
La méthode LinkButton1_Click réinitialise l'état de personnalisation de la page, ce qui signifie que toutes les données de personnalisation de l'utilisateur pour la page sont éliminées du magasin de données de personnalisation, puis l'état par défaut de la page est rétabli.
Les méthodes RadioButton1_CheckChanged et RadioButton2_CheckChanged basculent la portée de personnalisation vers la portée utilisateur ou vers la portée partagée.

Enregistrez et fermez le fichier.

Création d'une page Web pour héberger le contrôle de mode d'affichage

Maintenant que vous avez créé un contrôle utilisateur pour modifier les modes d'affichage, vous pouvez créer une page Web qui héberge le contrôle utilisateur et qui contient également des zones WebPart et d'autres contrôles serveur pour fournir les fonctionnalités WebPart.

Pour créer une page Web qui peut modifier les modes d'affichage

Placez l'assembly compilé pour le contrôle personnalisé dans le dossier Bin de votre site Web.

Les composants requis pour cet état de procédure pas à pas sont un contrôle WebPart compilé et personnalisé. Cette procédure pas à pas utilise le contrôle personnalisé appelé TextDisplayWebPart qui est disponible dans la rubrique de vue d'ensemble de la classe WebPartDisplayMode. L'assembly compilé doit être nommé TextDisplayWebPartCS.dll ou TextDisplayWebPartVB.dll, selon le langage que vous utilisez.

Note de sécurité :
Le contrôle a une zone de texte qui accepte l'entrée d'utilisateur, ce qui constitue une menace éventuelle pour la sécurité. Par défaut, les pages Web ASP.NET valident les entrées d'utilisateur pour vérifier qu'elles ne contiennent pas d'éléments HTML ni de script. Pour plus d'informations, consultez Vue d'ensemble des attaques de script.

Dans un éditeur de texte, créez un fichier.

En haut du fichier, ajoutez une déclaration de page et deux directives register. Une directive register est pour le contrôle utilisateur; l'autre est pour le contrôle WebPart personnalisé compilé que vous utilisez pour cette procédure pas à pas. L'attribut Assembly de la directive doit référencer le nom du fichier d'assembly du contrôle personnalisé, sans l'extension.

<%@ page language="VB" %>
<%@ register TagPrefix="uc1" 
  TagName="DisplayModeMenuVB" 
  Src="DisplayModeMenuVB.ascx" %>
<%@ register tagprefix="aspSample" 
  Namespace="Samples.AspNet.VB.Controls" 
  Assembly="TextDisplayWebPartVB"%>

<%@ page language="C#" %>
<%@ register TagPrefix="uc1" 
  TagName="DisplayModeMenuCS" 
  Src="DisplayModeMenuCS.ascx" %>
<%@ register tagprefix="aspSample" 
  Namespace="Samples.AspNet.CS.Controls" 
  Assembly="TextDisplayWebPartCS"%>

Sous les directives register, ajoutez le bloc de code suivant, ce qui vous permet de basculer manuellement la page en mode catalogue :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Sub Button1_Click(Byval sender As Object, _
                  ByVal e As EventArgs)
  WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode
End Sub
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
void Button1_Click(object sender, EventArgs e)
{
  WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
}
</script>

Après le bloc de code, ajoutez le balisage suivant au fichier.

Dans cet exemple de code, plusieurs fonctionnalités sont nécessaires à une page WebPart, y compris un élément <asp:webpartmanager>, des zones WebPart qui correspondent aux modes d'affichage possibles de la page et plusieurs contrôles. Pour plus d'informations sur ceux-ci, consultez Procédure pas à pas : création d'une page WebPart.

Le code du reste de la page doit ressembler au bloc de code suivant.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
  <title>Web Parts Display Modes</title>
</head>
<body>
  <form id="Form2" >
    <asp:webpartmanager id="WebPartManager1"  />
    <uc1:DisplayModeMenuVB ID="DisplayModeMenu1"  />
    <asp:webpartzone
      id="WebPartZone1"
       BackImageUrl="~/MyImage.gif">
        <zonetemplate>
          <asp:Calendar 
            ID="Calendar1" 
            Runat="server" 
            Title="My Calendar" />
        </zonetemplate>
    </asp:webpartzone>
    <asp:WebPartZone ID="WebPartZone2" Runat="server">
    </asp:WebPartZone>
    <asp:EditorZone ID="editzone1" Runat="server">
      <ZoneTemplate>
        <asp:AppearanceEditorPart 
          ID="appearanceeditor1" 
          Runat="server" />
        <asp:LayoutEditorPart 
          ID="LayoutEditorPart1" 
          Runat="server" />
      </ZoneTemplate>
    </asp:EditorZone>
    <asp:CatalogZone ID="catalogzone1" Runat="server">
      <ZoneTemplate>
        <asp:DeclarativeCatalogPart 
          ID="declarativepart1" 
          Runat="server">
          <WebPartsTemplate>
          <aspSample:TextDisplayWebPart 

            id="textwebpart" 
            title = "Text Content WebPart"/>  
          </WebPartsTemplate>
        </asp:DeclarativeCatalogPart>
      </ZoneTemplate>
    </asp:CatalogZone>
    <br />
    <asp:button
      id="button1"

      text="Catalog Mode"
      OnClick="Button1_Click"
    />
  </form>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
  <title>Web Parts Display Modes</title>
</head>
<body>
  <form id="Form2" >
    <asp:webpartmanager id="WebPartManager1"  />
    <uc1:DisplayModeMenuCS ID="DisplayModeMenu1"  />
    <asp:webpartzone
      id="WebPartZone1"
       BackImageUrl="~/MyImage.gif">
        <zonetemplate>
          <asp:Calendar 
            ID="Calendar1" 
            Runat="server" 
            Title="My Calendar" />
        </zonetemplate>
    </asp:webpartzone>
    <asp:WebPartZone ID="WebPartZone2" Runat="server">
    </asp:WebPartZone>
    <asp:EditorZone ID="editzone1" Runat="server">
      <ZoneTemplate>
        <asp:AppearanceEditorPart 
          ID="appearanceeditor1" 
          Runat="server" />
        <asp:LayoutEditorPart 
          ID="LayoutEditorPart1" 
          Runat="server" />
      </ZoneTemplate>
    </asp:EditorZone>
    <asp:CatalogZone ID="catalogzone1" Runat="server">
      <ZoneTemplate>
        <asp:DeclarativeCatalogPart 
          ID="declarativepart1" 
          Runat="server">
          <WebPartsTemplate>
          <aspSample:TextDisplayWebPart 

            id="textwebpart" 
            title = "Text Content WebPart" AllowClose="true"/>  
          </WebPartsTemplate>
        </asp:DeclarativeCatalogPart>
      </ZoneTemplate>
    </asp:CatalogZone>
    <br />
    <asp:button
      id="button1"

      text="Catalog Mode"
      OnClick="Button1_Click"
    />
  </form>
</body>
</html>

Nommez le fichier Displaymodes.aspx et enregistrez-le dans le répertoire de votre site Web.

Test de la page Web pour changer les modes d'affichage

À présent, vous avez créé tout ce qui est nécessaire à l'exécution d'une page Web qui contient des contrôles WebPart et qui peut basculer entre différents modes d'affichage de la page.

Pour tester la page et modifier les modes d'affichage

Chargez la page dans un navigateur.

La page doit ressembler à la capture d'écran suivante :

Page avec le contrôle de modification des modes d'affichage

Cliquez sur le contrôle de liste déroulante Mode d'affichage.

Notez les différents modes d'affichage qui sont disponibles sur la page. Étant donné que la page contient un contrôle WebPartZone, un contrôle EditorZone et un contrôle CatalogZone, les modes d'affichage correspondants apparaissent dans la liste déroulante pour chacun de ces types de zones, en plus du mode d'affichage Parcourir par défaut.

Remarque :
La page pourrait également contenir un contrôle ConnectionsZone, ce qui vous permettrait de créer des connexions entre les contrôles et ajouterait un mode d'affichage de connexion à la liste déroulante. Toutefois, les connexions dépassent le cadre de cette procédure pas à pas.

Sélectionnez le mode catalogue dans la liste déroulante.

L'interface utilisateur du mode catalogue apparaît et le contrôle TextDisplayWebPart est visible dans le catalogue, disponible pour l'ajout à la page.
Cliquez sur le bouton Fermer pour revenir au mode de navigation.
Pour basculer en mode d'affichage d'une autre façon, sans nécessiter le contrôle utilisateur, cliquez sur le bouton Mode catalogue près du bas de la page. Le code de ce commutateur apparaît dans la méthode Button1_Click de la page Web.

La page bascule en mode catalogue.
Activez la case à cocher en regard du contrôle personnalisé dans le catalogue et cliquez sur le bouton Ajouter pour l'ajouter à la page.
Cliquez sur Fermer pour revenir au mode de navigation.

Le contrôle ajouté apparaît maintenant sur la page.
Dans le contrôle de liste déroulante Mode d'affichage, sélectionnez Édition.

La page bascule en mode édition. Les titres des zones deviennent visibles et un bouton de menu des verbes qui ressemble à un petit triangle apparaît dans la barre de titre de chaque contrôle serveur qui réside dans un WebPartZone. Le menu des verbes fournit les différentes actions qu'un utilisateur peut appliquer à un contrôle.
Cliquez sur le menu des verbes dans le contrôle TextDisplayWebPart.

Un menu déroulant apparaît.
Dans le menu des verbes, cliquez sur l'option Modifier.

L'interface utilisateur de modification spéciale, qui est déclarée dans l'élément <asp:editorzone>, apparaît. Avec ces contrôles, vous pouvez modifier la disposition et l'apparence du contrôle personnalisé.
Utilisez l'interface utilisateur de modification pour modifier le titre du contrôle personnalisé. Puis cliquez sur Appliquer pour que vos modifications prennent effet.
Positionnez le pointeur de votre souris dans la barre de titre du contrôle personnalisé. Cliquez sur la barre de titre et faites glisser le contrôle de WebPartZone1 dans WebPartZone2.
Utilisez le contrôle de liste déroulante Mode d'affichage pour rétablir la page en mode de navigation.

La page doit ressembler à la capture d'écran suivante.

Page après les modifications apportées aux différents modes d'affichage

Voir aussi

Partager via