Пошаговое руководство. Создание веб-части для SharePoint

веб-части позволяют пользователям напрямую изменять содержимое, внешний вид и поведение страниц сайта SharePoint с помощью браузера. В этом пошаговом руководстве показано, как создать веб-часть с помощью шаблона элемента веб-части в Visual Studio 2010.

Веб-часть отображает сотрудников в сетке данных. Пользователь указывает расположение файла, содержащего данные сотрудника. Пользователь также может фильтровать сетку данных, чтобы сотрудники, которые являются руководителями, отображались только в списке.

В этом пошаговом руководстве рассматриваются следующие задачи:

• Создание веб-части с помощью шаблона элемента веб-части Visual Studio.

• Создание свойства, которое можно задать пользователем веб-части. Это свойство указывает расположение файла данных сотрудника.

• Отрисовка содержимого в веб-части путем добавления элементов управления в коллекцию элементов управления веб-частей.

• Создание нового элемента меню, называемого командой , которая отображается в меню команд отрисованной веб-части. Команды позволяют пользователю изменять данные, отображаемые в веб-части.

• Тестирование веб-части в SharePoint.

  Примечание.

  Отображаемые на компьютере имена или расположения некоторых элементов пользовательского интерфейса Visual Studio могут отличаться от указанных в следующих инструкциях. Это зависит от имеющегося выпуска Visual Studio и используемых параметров. Дополнительные сведения см. в разделе Персонализация интегрированной среды разработки Visual Studio.

Необходимые компоненты

• Поддерживаемые редакции Microsoft Windows и SharePoint.

• Visual Studio 2017 или Azure DevOps Services.

Создание пустого проекта SharePoint

Сначала создайте пустой проект SharePoint. Позже вы добавите веб-часть в проект с помощью шаблона элемента веб-части .

1. Запустите Visual Studio с помощью параметра Запуска от имени Администратор istrator.

2. На панели "Мужчины" выберите "Файл>нового>проекта".

3. В диалоговом окне "Новый проект" разверните узел SharePoint под языком, который вы хотите использовать, а затем выберите узел 2010.

4. В области "Шаблоны" выберите Проект SharePoint 2010 и нажмите кнопку "ОК".

   Откроется мастер настройки SharePoint. Этот мастер позволяет выбрать сайт, который будет использоваться для отладки проекта и уровня доверия решения.

5. Нажмите кнопку "Развернуть как решение фермы" и нажмите кнопку "Готово ", чтобы принять локальный сайт SharePoint по умолчанию.

Добавление веб-части в проект

Добавьте в проект элемент веб-части. Элемент веб-части добавляет файл кода веб-части . Позже вы добавите код в файл кода веб-части для отрисовки содержимого веб-части.

1. В строке меню выберите Проект>Добавить новый элемент.

2. В диалоговом окне "Добавление нового элемента" в области "Установленные шаблоны" разверните узел SharePoint и выберите узел 2010.

3. В списке шаблонов SharePoint выберите шаблон веб-части и нажмите кнопку "Добавить ".

   Элемент веб-части отображается в Обозреватель решений.

Отображение содержимого в веб-части

Вы можете указать элементы управления, которые нужно отображать в веб-части, добавив их в коллекцию элементов управления класса веб-части.

1. В Обозреватель решений откройте WebPart1.vb (в Visual Basic) или WebPart1.cs (в C#).

   Файл кода веб-части открывается в редакторе кода.

2. Добавьте следующие директивы в начало файла кода веб-части.

   C#

   using System.Data;
   

   VB

   Imports System.Data
   

3. Добавьте в класс WebPart1 приведенный далее код. Этот код объявляет следующие поля:

   • Сетка данных для отображения сотрудников в веб-части.

   • Текст, отображаемый на элементе управления, который используется для фильтрации сетки данных.

   • Метка, отображающая ошибку, если сетка данных не может отображать данные.

   • Строка, содержащая путь к файлу данных сотрудника.

     C#

     private DataGrid grid;
     private static string verbText = "Show Managers Only";
     private Label errorMessage = new Label();
     protected string xmlFilePath;
     

     VB

     Private grid As DataGrid
     Private Shared verbText As String = "Show Managers Only"
     Private errorMessage As New Label()
     Protected xmlFilePath As String
     

   ---

4. Добавьте в класс WebPart1 приведенный далее код. Этот код добавляет пользовательское свойство с именем DataFilePath в веб-часть. Пользовательское свойство — это свойство, которое можно задать в SharePoint пользователем. Это свойство получает и задает расположение XML-файла данных, который используется для заполнения сетки данных.

   C#

   [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;
       }
   }
   

   VB

   <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
   

5. Замените метод CreateChildControls приведенным ниже кодом. Этот код выполняет следующие задачи:

   • Добавляет сетку данных и метку, объявленную на предыдущем шаге.

   • Привязывает сетку данных к XML-файлу, который содержит данные сотрудника.

     C#

     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();
     }
     

     VB

     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
     

   ---

6. Добавьте приведенный ниже метод в класс WebPart1. Этот код выполняет следующие задачи:

   • Создает команду, которая отображается в меню команд веб-части отрисованной веб-части.

   • Обрабатывает событие, возникающее при выборе пользователем команды в меню команд. Этот код фильтрует список сотрудников, которые отображаются в сетке данных.

     C#

     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";
         }
     }
     

     VB

     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
     

   ---

Тестирование веб-части

При запуске проекта откроется сайт SharePoint. Веб-часть автоматически добавляется в коллекцию веб-частей в SharePoint. Веб-часть можно добавить на любую страницу веб-части.

1. Вставьте следующий XML-файл в файл Блокнот. Этот XML-файл содержит примеры данных, которые будут отображаться в веб-части.

   <?xml version="1.0" encoding="utf-8" ?>
       <employees xmlns="http://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. В Блокнот в строке меню нажмите кнопку "Сохранить как>".

3. В диалоговом окне "Сохранить как" в списке типов "Сохранить как" выберите "Все файлы".

4. В поле имени файла введите data.xml.

5. Выберите любую папку с помощью кнопки "Обзор папок " и нажмите кнопку "Сохранить ".

6. В Visual Studio выберите клавишу F5 .

   Откроется сайт SharePoint.

7. В меню "Действия сайта" выберите "Дополнительные параметры".

8. На странице "Создать" выберите тип страницы веб-частей, а затем нажмите кнопку "Создать".

9. На странице "Новая веб-часть" назовите страницу SampleWebPartPage.aspx и нажмите кнопку "Создать".

   Откроется страница веб-части.

10. Выберите любую зону на странице веб-части.

11. В верхней части страницы выберите вкладку "Вставка " и нажмите кнопку веб-части .

12. В области "Категории" выберите пользовательскую папку, выберите веб-часть WebPart1 и нажмите кнопку "Добавить".

    Веб-часть появится на странице.

Тестирование настраиваемого свойства

Чтобы заполнить сетку данных, которая отображается в веб-части, укажите путь XML-файла, содержащего данные о каждом сотруднике.

1. Щелкните стрелку, которая отображается в правой части веб-части, а затем выберите "Изменить веб-часть " в появившемся меню.

   Область, содержащая свойства веб-части, отображается в правой части страницы.

2. В области разверните узел", введите путь к созданному ранее XML-файлу, нажмите кнопку "Применить " и нажмите кнопку "ОК ".

   Убедитесь, что список сотрудников отображается в веб-части.

Проверка команды веб-части

Отображение и скрытие сотрудников, которые не являются руководителями, выбрав элемент, отображаемый в меню команд веб-части.

1. Щелкните стрелку, которая отображается в правой части веб-части, а затем выберите "Показать менеджеров" в появившемся меню.

   В веб-части отображаются только сотрудники, которые являются руководителями.

2. Нажмите стрелку еще раз, а затем выберите "Показать всех сотрудников " в появившемся меню.

   Все сотрудники отображаются в веб-части.

См. также

Создание веб-частей для SharePointHow to: Create a SharePoint web part How to: Create a SharePoint web part by Using a DesignerWalkthrough: Create a web partfor SharePoint using a designer