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

Статья
02/20/2013

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

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

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

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

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

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

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

Обязательные компоненты

Ниже приведены компоненты, необходимые для выполнения данного пошагового руководства.

Поддерживаемые выпуски Microsoft Windows и SharePoint.Дополнительные сведения см. в разделе Требования по разработке решений SharePoint;
Visual Studio Professional или выпуск Visual Studio Application Lifecycle Management (ALM).

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

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

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

Запустите Visual Studio, используя параметр Запуск от имени администратора.
О людях заприте выберите Файл, Создать, Проект.
В диалоговом окне Создать проект разверните узел SharePoint с языком, который нужно использовать, а затем выберите узел 2010.
В панели Шаблоны выберите Проект SharePoint 2010, а затем нажмите кнопку ОК.

Появится окно Мастер настройки SharePoint.Этот мастер позволяет выбрать сайт для отладки проекта и уровень доверия решения.
Выберите переключатель Развернуть как решение фермы, а затем нажмите кнопку Готово для принятия по умолчанию локальный сайт SharePoint.

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

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

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

В строке меню выберите Проект, Добавление нового элемента.
В диалоговом окне Добавление нового элемента в панели *** установленные шаблоны *** разверните узел SharePoint, а затем выберите узел 2010.
В списке шаблонов SharePoint выберите шаблон Веб-часть, а затем нажмите кнопку Добавить.

Веб-часть отобразится в обозревателе решений.

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

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

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

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

В редакторе кода откроется файл кода веб-части.
Добавьте следующие операторы в верхнюю часть файла кода веб-части.
```
Imports System.Data
```
```
using System.Data;
```
Добавьте следующий код в класс WebPart1.В этом коде объявляются следующие поля.
- Сетка данных для отображения сведений о сотрудниках в веб-части.
- Текст, который отображается в элементе управления, используемого для фильтрации сетки данных.
- Метка, отображающая ошибку, если не удается отобразить данные в сетке данных.
- Строка, которая содержит путь к файлу данных о сотрудниках.
```
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;
```

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

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

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

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

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

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

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

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

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

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

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

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

<?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>

В блокноте, в строке меню выберите Файл, Сохранить как.
В диалоговом окне Сохранить как в списке Тип файла выберите Все файлы.
В окне Имя файла введите data.xml.
Выберите любую папку с помощью кнопки Обзор папок, а затем нажмите кнопку Сохранить.
В Visual Studio выберите ключ F5.

Откроется сайт SharePoint.
В меню *** Поместите действия *** выберите *** Дополнительные параметры ***.
На странице Создать выберите тип *** страница веб-частей ***, а затем нажмите кнопку Создать.
На странице *** Откроется страница веб-частей ***, назовите страницу SampleWebPartPage.aspx, а затем нажмите кнопку Создать.

Отобразится страница веб-части.
Выберите любую зону на странице веб-части.
В верхней части страницы выберите вкладку Вставить, а затем нажмите кнопку Веб-часть.
В панели Категории выберите папку Другой выберите " веб-часть " *** WebPart1 ***, а затем нажмите кнопку Добавить.

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

Тестирование пользовательского свойства

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

Тестирование пользовательского свойства

Нажмите стрелку, которая появится в правой части веб-части, а затем выберите *** Правка веб-части *** из меню.

В правой части страницы появляется область, содержащая свойства веб-части.
В панели разверните узел ПРОЧЕЕ введите путь к XML-файлу, созданную ранее, нажмите кнопку Применить, а затем нажмите кнопку ОК.

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

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

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

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

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

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

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

См. также

Задачи

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

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

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

Другие ресурсы

Создание веб-частей для SharePoint

Поделиться через

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

Обязательные компоненты

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

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

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

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

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

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

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

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

Тестирование пользовательского свойства

Тестирование пользовательского свойства

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

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

См. также

Задачи

Другие ресурсы

Дополнительные ресурсы