Cette documentation est archivée et n’est pas conservée.

Procédure pas à pas : créer un composant WebPart de base activé pour ASP.NET AJAX

Windows SharePoint Services 3

Cette procédure pas à pas décrit les étapes à suivre pour créer un composant WebPart ASP.NET AJAX que vous pouvez ajouter à votre page de composants WebPart. L'exemple crée un composant WebPart SayHello qui dérive de la classe WebPart (dans l'espace de noms System.Web.UI.WebControls.WebParts dans la bibliothèque de classes ASP.NET) en vue d'une utilisation dans un site Web Windows SharePoint Services 3.0.

Windows SharePoint Services 3.0

Visual Studio 2005

Pour créer un contrôle de composant WebPart activé pour AJAX, vous commencez par créer un projet de bibliothèque de classes dans la bibliothèque de classes disponible dans Visual Studio 2005.

Pour créer un projet de composant WebPart ASP.NET dans Visual Studio 2005

  1. Démarrez Visual Studio 2005.

  2. Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.

  3. Dans Types de projets, sous Visual Basic ou C#, sélectionnez Windows.

  4. Dans le volet Modèles, sélectionnez Bibliothèque de classes.

  5. Tapez Sample.SayHello comme nom de projet.

Après avoir créé le projet, un fichier de classe vide s'affiche. Vous pouvez modifier le nom de classe par défaut Class1 afin d'identifier facilement votre nouveau composant WebPart. Dans un projet de bibliothèque de classes, seuls quelques espaces de noms sont inclus. Vous devez ajouter deux espaces de noms requis et des références à leurs assemblys. Vous devez également dériver la classe de base de System.Web.UI.WebControls.WebParts.WebPart. Ensuite, vous devez ajouter deux variables globales pour mettre à jour l'interface utilisateur (IU).

Pour ajouter des références d'espace de noms et des composants d'interface utilisateur partagés

  1. Pour renommer la classe par défaut, sélectionnez Class1.cs dans l'Explorateur de solutions, cliquez avec le bouton droit, cliquez sur Renommer, puis tapez SayHelloWebPart comme nom de fichier.

  2. Dans le menu Projet, cliquez sur Ajouter une référence.

  3. Dans la boîte de dialogue Ajouter une référence de l'onglet .NET, sélectionnez System.Web.Extensions, puis cliquez sur OK.

  4. Répétez les étapes 2 et 3 pour l'espace de noms System.Web.

  5. Dans la zone des références du fichier de classe, ajoutez une référence à System.Web.UI.WebControls et créez deux variables privées pour l'interface utilisateur, comme illustré dans le code suivant :

    using System;
    using System.Text;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    namespace Sample.SayHello
    {
       public class SayHelloWebPart : WebPart
       {
         private Label displayName;
         private TextBox inputName;
       }
    }
    

    Imports System
    Imports System.Text
    Imports System.Web.UI
    Imports System.Web.UI.WebControlsImports System.Web.UI.WebControls.WebParts
    Public Class SayHelloWebPart
       Inherits WebPart
       Private displayName As Label
       Private inputName as TextBox
    End Class
    
  6. Vous avez maintenant créé une structure de base pour le composant WebPart.

Après avoir configuré la nouvelle classe afin qu'elle fasse office de composant WebPart, vous devez écraser la méthode CreateChildControls pour générer l'interface utilisateur. Vous devez également ajouter un gestionnaire de bouton pour actualiser les données d'affichage.

Pour substituer CreateChildControls et créer un gestionnaire d'événements de bouton

  1. Dans le fichier SayHelloWebPart.cs, copiez et collez le code ci-après pour substituer la méthode CreateChildControls.

    protected override void CreateChildControls()
    {
       base.CreateChildControls();
    
       //Fix for the UpdatePanel postback behaviour.
       EnsurePanelFix();
    
       LinkButton sayHello = new LinkButton();
       UpdatePanel refreshName = new UpdatePanel();
       ScriptManager scriptHandler = new ScriptManager();
       displayName = new Label();
       inputName = new TextBox();
    
       //Set up control properties.
       this.displayName.ID = "displayName";
       this.displayName.Text = "Hello!";
       this.inputName.ID = "inputName";
       sayHello.ID = "sayHello";
       sayHello.Text = "Say Hello";
       scriptHandler.ID = "scriptHandler";
       refreshName.ID = "refreshName";
       refreshName.UpdateMode = UpdatePanelUpdateMode.Conditional;
       refreshName.ChildrenAsTriggers = true;
    
       //Add the EventHandler to the Button.
       sayHello.Click += new EventHandler(ClickHandler);
    
       //Add the user interface (UI) controls to the UpdatePanel.
       refreshName.ContentTemplateContainer.Controls.Add(this.inputName);
       refreshName.ContentTemplateContainer.Controls.Add(sayHello);
       refreshName.ContentTemplateContainer.Controls.Add(this.displayName);
    
       //The ScriptManager control must be added first.
       this.Controls.Add(scriptHandler);
       this.Controls.Add(refreshName);
    }
    

    Protected Overrides Sub CreateChildControls()
       MyBase.CreateChildControls()
    
       'Fix for the UpdatePanel postback behaviour.
       EnsurePanelFix()
    
       Dim sayHello As New LinkButton
       Dim refreshName As New UpdatePanel
       Dim scriptHandler As New ScriptManager
       displayName = New Label
       inputName = New TextBox
    
       'Set up control properties.
       Me.displayName.ID = "displayName"
       Me.displayName.Text = "Hello!"
       Me.inputName.ID = "inputName"
       sayHello.ID = "sayHello"
       sayHello.Text = "Say Hello"
       scriptHandler.ID = "scriptHandler"
       refreshName.ID = "refreshName"
       refreshName.UpdateMode = UpdatePanelUpdateMode.Conditional
       refreshName.ChildrenAsTriggers = True
    
         'Add the EventHandler to the Button.
       AddHandler sayHello.Click, _
         New EventHandler(AddressOf ClickHandler)
    
       'Add the user interface (UI) controsl to the UpdatePanel
    
       refreshName.ContentTemplateContainer.Controls.Add(Me.displayName)
       refreshName.ContentTemplateContainer.Controls.Add(Me.inputName)
       refreshName.ContentTemplateContainer.Controls.Add(sayHello)
    
       'The ScriptManager must be added first.
       Me.Controls.Add(scriptHandler)
       Me.Controls.Add(refreshName)
    End Sub
    
    
  2. Ensuite, dans le fichier SayHelloWebPart.cs, copiez et collez le code suivant :

    private void ClickHandler(object sender, EventArgs args)
    {
       this.displayName.Text = "Hello, " 
         + this.inputName.Text.ToString() + ".";
    }
    

    Private Sub ClickHandler(ByVal sender As Object, _
                  ByVal args As EventArgs)
       Me.displayName.Text = "Hello, " & Me.inputName.Text & "!"
    End Sub
    
    
  3. L'interface utilisateur de base et l'événement de gestion de bouton sont désormais créés.

Pour les contrôles ASP.NET qui utilisent la fonction JavaScript _doPostBack() pour valider les modifications, un événement de publication pleine page normal peut se produire même lorsque le composant WebPart est à l'intérieur d'un contrôle UpdatePanel. Windows SharePoint Services 3.0 et ASP.NET AJAX mettent en cache certaines actions de formulaire, ce qui peut provoquer un conflit entre SharePoint et ASP.NET AJAX. Pour modifier ce comportement, vous devez ajouter du code aux scripts exécutés dans Windows SharePoint Services 3.0.

Pour modifier des scripts afin que doPostBack() se comporte de façon appropriée

  1. Dans le fichier SayHelloWebPart.cs, copiez et collez le code suivant :

    private void EnsurePanelFix()
    {
       if (this.Page.Form != null)
       {
         String fixupScript = @"
         _spBodyOnLoadFunctionNames.push(""_initFormActionAjax"");
         function _initFormActionAjax()
         {
           if (_spEscapedFormAction == document.forms[0].action)
           {
             document.forms[0]._initialAction = 
             document.forms[0].action;
           }
         }
         var RestoreToOriginalFormActionCore = 
           RestoreToOriginalFormAction;
         RestoreToOriginalFormAction = function()
         {
           if (_spOriginalFormAction != null)
           {
             RestoreToOriginalFormActionCore();
             document.forms[0]._initialAction = 
             document.forms[0].action;
           }
         }";
       ScriptManager.RegisterStartupScript(this, 
         typeof(SayHelloWebPart), "UpdatePanelFixup", 
         fixupScript, true);
       }
    }
    

    Private Sub EnsurePanelFix()
       If Me.Page.Form IsNot Nothing Then
         Dim fixupScript As New StringBuilder()
    
         With fixupScript
           .AppendLine("_spBodyOnLoadFunctionNames.push" & _
           "(""_initFormActionAjax"");")
           .AppendLine("function _initFormActionAjax()")
           .AppendLine("{")
           .AppendLine("if (_spEscapedFormAction == " & _
           "document.forms[0].action)")
           .AppendLine("{")
           .AppendLine("document.forms[0]._initialAction = " & _
           document.forms[0].action;")
           .AppendLine("}")
           .AppendLine("}")
           .AppendLine("var RestoreToOriginalFormActionCore = " & _
           RestoreToOriginalFormAction;")
           .AppendLine("RestoreToOriginalFormAction = function()")
           .AppendLine("{")
           .AppendLine("   if (_spOriginalFormAction != null)")
           .AppendLine("   {")
           .AppendLine("       RestoreToOriginalFormActionCore();")
           .AppendLine("       document.forms[0]._initialAction = " & _
           "document.forms[0].action;")
           .AppendLine("   }")
           .AppendLine("}")
         End With
         ScriptManager.RegisterStartupScript(Me, _
           GetType(SayHelloWebPart), "UpdatePanelFixup", _
           fixupScript.ToString(), True)
       End If
    End Sub
    
    
  2. La modification que vous avez apportée aux scripts garantit une gestion appropriée de la publication.

Lorsque vous avez ajouté la totalité de votre code à votre projet de composant WebPart, vous pouvez générer votre exemple de composant WebPart et le déployer. Pour plus d'informations sur le déploiement d'un composant WebPart, voir Procédure pas à pas : création d'un composant WebPart de base.

Afficher: