Demonstra Passo a passo: Criar uma Web Part do SharePoint

Web Parts permite aos usuários modificar diretamente o conteúdo, a aparência e o comportamento das páginas de site do SharePoint usando um navegador. Esta explicação passo a passo mostra como criar uma Web Part usando o Web Part o modelo de item em 2010 de Visual Studio.

A Web Part exibe os funcionários em uma grade de dados. O usuário Especifica o local do arquivo que contém os dados do funcionário. O usuário também pode filtrar a grade de dados para que os funcionários que são gerentes aparecem na lista somente.

Essa explicação passo a passo ilustra as seguintes tarefas:

  • Criar uma Web Part usando o Visual Studio Web Part modelo de item.

  • Criação de uma propriedade que pode ser definido pelo usuário da Web Part. Esta propriedade especifica o local do arquivo de dados do funcionário.

  • Processar o conteúdo em uma Web Part, adicionando controles para a Web Part controla a coleção.

  • Criando um novo item de menu, conhecido como um verbo, que aparece no menu de verbos da Web part renderizada. Verbos permitem ao usuário modificar os dados que aparece na Web Part.

  • Testar a Web Part no SharePoint.

    ObservaçãoObservação

    Seu computador pode mostrar diferentes nomes ou localizações para alguns dos elementos de interface do usuário do Visual Studio nas instruções a seguir. A edição do Visual Studio que você possui e as configurações que você usa determinam esses elementos. Para obter mais informações, consulte Trabalhando com configurações.

Pré-requisitos

Para completar este passo a passo, são necessários os seguintes componentes:

Criando um projeto vazio do SharePoint

Primeiro, crie um projeto do SharePoint vazio. Posteriormente, você adicionará uma Web Part ao projeto, usando o Web Part modelo de item.

Para criar um projeto vazio do SharePoint

  1. Iniciar 2010 de Visual Studio usando o Executar como administrador opção.

  2. No menu File, aponte para New, e em seguida, clique em Project.

    A caixa de diálogo New Project será exibida.

  3. Abrir o Novo projeto caixa de diálogo caixa, expanda o SharePoint nó sob o idioma que você deseja usar e, em seguida, selecione o 2010 nó.

  4. No modelos de painel, selecione Projeto vazio do SharePointe em seguida, clique em OK.

    O O Assistente para personalização do SharePoint aparece. Este assistente permite que você selecione o site que você usará para depurar o projeto e o nível de confiança da solução.

  5. Selecione Deploy como uma solução do farme em seguida, clique em Concluir para aceitar o site do SharePoint padrão local.

Adicionar uma Web Part ao projeto

Adicionar um Web Part item ao projeto. O Web Part item adiciona o arquivo de código de Web Part. Posteriormente, você irá adicionar código para o arquivo de código de Web Part para processar o conteúdo da Web Part.

Para adicionar uma Web Part ao projeto

  1. No menu Project, clique em Add New Item.

  2. No Add New Item na caixa a Modelos instalados painel, expanda o SharePoint nó e clique 2010.

  3. Na lista de modelos do SharePoint, selecione Web Parte em seguida, clique em Add.

    O Web Part item aparece em Solution Explorer.

Processamento de conteúdo na Web Part

Você pode especificar quais controles que você deseja que apareça na Web Part, adicionando-os à coleção controls da classe Web Part.

Para processar o conteúdo na Web Part

  1. Em Solution Explorer, clique duas vezes em WebPart1.vb (em Visual Basic) ou Webpart1 (em C#).

    O arquivo de código de Web Part abre no Editor de código.

  2. Adicione as seguintes instruções para a parte superior do arquivo de código de Web Part.

    Imports System.Data
    
    using System.Data;
    
  3. Adicione o seguinte código à classe WebPart1: Esse código declara os seguintes campos:

    • Uma grade de dados para exibir os funcionários na Web Part.

    • Texto que aparece no controle que é usado para filtrar a grade de dados.

    • Um rótulo que exibe um erro se a grade de dados for capaz de exibir dados.

    • Uma seqüência de caracteres que contém o caminho do arquivo de dados do funcionário.

    Private grid As DataGrid
    Private Shared verbText As String = "Show Managers Only"
    Private errorMessage As New Label()
    Protected xmlFilePath As String
    
    private DataGrid grid;
    private static string verbText = "Show Managers Only";
    private Label errorMessage = new Label();
    protected string xmlFilePath;
    
  4. Adicione o seguinte código à classe WebPart1: Este código adiciona uma propriedade personalizada chamada DataFilePath para Part. a Web Uma propriedade personalizada é uma propriedade que pode ser definida pelo usuário no SharePoint. Essa propriedade obtém e define o local de um arquivo de dados XML é usado para preencher a grade de dados.

    <Personalizable(PersonalizationScope.[Shared]), _
        WebBrowsable(True), WebDisplayName("Path to Employee Data File"), _
        WebDescription("Location of the XML file that contains employee data")> _
    Public Property DataFilePath() As String
        Get
            Return xmlFilePath
        End Get
        Set(ByVal value As String)
            xmlFilePath = value
        End Set
    End Property
    
    [Personalizable(PersonalizationScope.Shared), WebBrowsable(true),
    WebDisplayName("Path to Employee Data File"),
    WebDescription("Location of the XML file that contains employee data")]
    public string DataFilePath
    {
        get
        {
            return xmlFilePath;
        }
        set
        {
            xmlFilePath = value;
        }
    }
    
  5. Substituir o CreateChildControls método com o código a seguir. Esse código realiza as seguintes tarefas:

    • Adiciona a grade de dados e o rótulo que você declarado na etapa anterior.

    • Vincula a grade de dados para um arquivo XML que contém os dados do funcionário.

    Protected Overloads Overrides Sub CreateChildControls()
    
        'Define the grid control that displays employee data in the Web Part.
        grid = New DataGrid()
        With grid
            .Width = Unit.Percentage(100)
            .GridLines = GridLines.Horizontal
            .HeaderStyle.CssClass = "ms-vh2"
            .CellPadding = 2
            .BorderWidth = Unit.Pixel(5)
            .HeaderStyle.Font.Bold = True
            .HeaderStyle.HorizontalAlign = HorizontalAlign.Center
        End With
    
    
    
        'Populate the grid control with data in the employee data file.
        Try
            Dim dataset As New DataSet()
            dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema)
            grid.DataSource = dataset
            grid.DataBind()
        Catch x As Exception
            errorMessage.Text += x.Message
        End Try
    
        'Add control to the controls collection of the Web Part.
        Controls.Add(grid)
        Controls.Add(errorMessage)
        MyBase.CreateChildControls()
    
    End Sub
    
    protected override void CreateChildControls()
    {
        // Define the grid control that displays employee data in the Web Part.
        grid = new DataGrid();
        grid.Width = Unit.Percentage(100);
        grid.GridLines = GridLines.Horizontal;
        grid.HeaderStyle.CssClass = "ms-vh2";
        grid.CellPadding = 2;
        grid.BorderWidth = Unit.Pixel(5);
        grid.HeaderStyle.Font.Bold = true;
        grid.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
    
        // Populate the grid control with data in the employee data file.
        try
        {
            DataSet dataset = new DataSet();
            dataset.ReadXml(xmlFilePath, XmlReadMode.InferSchema);
            grid.DataSource = dataset;
            grid.DataBind();
        }
        catch (Exception x)
        {
            errorMessage.Text += x.Message;
        }
    
        // Add control to the controls collection of the Web Part.
        Controls.Add(grid);
        Controls.Add(errorMessage);
        base.CreateChildControls();
    }
    
  6. Adicione o seguinte método para o WebPart1 classe. Esse código realiza as seguintes tarefas:

    • Cria um verbo que aparece no menu de verbos de Web Part da Web part renderizada.

    • Manipula o evento que é gerado quando o usuário clica o verbo no menu de verbos. Esse código filtra a lista de funcionários que aparece na grade de dados.

    Public Overrides ReadOnly Property Verbs() As WebPartVerbCollection
        Get
            Dim customVerb As New WebPartVerb("Manager_Filter_Verb", _
                New WebPartEventHandler(AddressOf CustomVerbEventHandler))
    
            customVerb.Text = verbText
            customVerb.Description = "Shows only employees that are managers"
    
            Dim newVerbs() As WebPartVerb = {customVerb}
    
            Return New WebPartVerbCollection(MyBase.Verbs, newVerbs)
        End Get
    End Property
    
    Protected Sub CustomVerbEventHandler(ByVal sender As Object, ByVal args As WebPartEventArgs)
        Dim titleColumn As Integer = 2
    
        Dim item As DataGridItem
        For Each item In grid.Items
            If item.Cells(titleColumn).Text <> "Manager" Then
                If item.Visible = True Then
                    item.Visible = False
                Else
                    item.Visible = True
                End If
            End If
        Next item
        If verbText = "Show Managers Only" Then
            verbText = "Show All Employees"
        Else
            verbText = "Show Managers Only"
        End If
    End Sub
    
    public override WebPartVerbCollection Verbs
    {
        get
        {
            WebPartVerb customVerb = new WebPartVerb("Manager_Filter_Verb",
                new WebPartEventHandler(CustomVerbEventHandler));
    
            customVerb.Text = verbText;
            customVerb.Description = "Shows only employees that are managers";
    
            WebPartVerb[] newVerbs = new WebPartVerb[] { customVerb };
    
            return new WebPartVerbCollection(base.Verbs, newVerbs);
        }
    }
    
    protected void CustomVerbEventHandler(object sender, WebPartEventArgs args)
    {
        int titleColumn = 2;
    
        foreach (DataGridItem item in grid.Items)
        {
            if (item.Cells[titleColumn].Text != "Manager")
            {
                if (item.Visible == true)
                {
                    item.Visible = false;
                }
                else
                {
                    item.Visible = true;
                }
            }
    
        }
        if (verbText == "Show Managers Only")
        {
            verbText = "Show All Employees";
        }
        else
        {
            verbText = "Show Managers Only";
        }
    }
    

Testar a Web Part

Quando você executar o projeto, abre o site do SharePoint. A Web Part é automaticamente adicionada à Galeria de Web Parts do SharePoint. Você pode adicionar a Web Part para qualquer página de Web Parts.

Para testar a Web Part

  1. Cole o seguinte XML em um arquivo de bloco de notas. Esse arquivo XML contém os dados de exemplo que serão exibido na Web Part.

    <?xml version="1.0" encoding="utf-8" ?>
        <employees xmlns="https://schemas.microsoft.com/vsto/samples">
           <employee>
               <name>David Hamilton</name>
               <hireDate>2001-05-11</hireDate>
               <title>Sales Associate</title>
           </employee>
           <employee>
               <name>Karina Leal</name>
               <hireDate>1999-04-01</hireDate>
               <title>Manager</title>
           </employee>
           <employee>
               <name>Nancy Davolio</name>
               <hireDate>1992-05-01</hireDate>
               <title>Sales Associate</title>
           </employee>
           <employee>
               <name>Steven Buchanan</name>
               <hireDate>1955-03-04</hireDate>
               <title>Manager</title>
           </employee>
           <employee>
               <name>Suyama Michael</name>
               <hireDate>1963-07-02</hireDate>
               <title>Sales Associate</title>
           </employee>
        </employees>
    
  2. No bloco de notas, clique em arquivoe em seguida, clique em Salvar como.

  3. No Salvar como na caixa de Salvar como tipo lista suspensa, selecione Todos os arquivos.

  4. No nome de arquivo , digite a data.

  5. Selecione qualquer pasta usando o Procurar nas pastas botão e, em seguida, clique em Salvar.

  6. No Visual Studio, pressione F5.

    O site do SharePoint é aberta.

  7. Clique em Ações do Sitee em seguida, clique em Mais opções.

  8. No criar página, selecione Página de Web Parts, em seguida, clique em criar.

  9. No Nova página de Web Parts de página, nomeie a página SampleWebPartPage.aspxe em seguida, clique em criar.

    A página de Web Parts é exibida.

  10. Selecione qualquer zona na página de Web Parts.

  11. Na parte superior da página, clique em Inserire em seguida, clique em Web Part.

  12. No categorias painel, clique no personalizado pasta, clique no WebPart1 Web Part e clique Add.

    A Web Part aparece na página.

Testando a propriedade personalizada

Para preencher a grade de dados que aparece na Web Part, especifique o caminho do arquivo XML que contém dados sobre cada funcionário.

Para testar a propriedade personalizada

  1. Clique na seta que aparece no canto da Web Part e, em seguida, clique em Editar Web Part.

    Um painel que contém propriedades para a Web Part aparece no lado direito da página.

  2. No painel, expanda o Miscelânea o nó, digite o caminho do arquivo XML que você criou anteriormente e clique em Aplicare em seguida, clique em OK.

    Verifique se o que é exibida uma lista de funcionários na Web Part.

O verbo de parte da Web de teste.

Mostrar e ocultar os funcionários que não são gerentes, clicando em um item que aparece no menu de verbos de Web Part.

Para testar o verbo de Web Part

  1. Clique na seta que aparece no canto da Web Part e, em seguida, clique em Mostrar apenas os gerentes de.

    Somente os funcionários que são gerentes aparecem na Web Part.

  2. Clique na seta novamente e, em seguida, em seguida, clique em Mostrar todos os funcionários.

    Todos os funcionários são exibidos na Web Part.

Consulte também

Tarefas

Como: Criar uma parte da Web do SharePoint

Como: Criar uma parte da Web do SharePoint, usando um Designer.

Demonstra Passo a passo: Criar uma Web Part do SharePoint, usando um Designer.

Outros recursos

Criando Web Parts for SharePoint