연습: SharePoint를 위한 웹 파트 만들기

아티클
06/19/2023

웹 파트를 사용하면 사용자는 브라우저를 사용하여 직접 SharePoint 사이트 페이지의 콘텐츠, 모양 및 동작을 수정할 수 있습니다. 이 연습에서는 Visual Studio 2010에서 웹 파트 항목 템플릿을 사용하여 웹 파트를 만드는 방법을 보여 줍니다.

웹 파트는 직원을 데이터 표에 표시합니다. 사용자는 직원 데이터가 포함된 파일의 위치를 지정합니다. 사용자는 관리자인 직원만 목록만 표시되도록 데이터 표를 필터링할 수 있습니다.

이 연습에서는 다음 작업을 수행합니다.

Visual Studio 웹 파트 항목 템플릿을 사용하여 웹 파트를 만듭니다.
웹 파트의 사용자가 설정할 수 있는 속성을 만듭니다. 이 속성은 직원 데이터 파일의 위치를 지정합니다.
웹 파트 컨트롤 컬렉션에 컨트롤을 추가 하여 웹 파트의 콘텐츠를 렌더링합니다.
렌더링된 웹 파트의 동사 메뉴에 표시되는, '동사'라는 새 메뉴 항목을 만듭니다. 동사를 사용하면 사용자는 웹 파트에 표시되는 데이터를 수정할 수 있습니다.
SharePoint에서 웹 파트를 테스트합니다.

참고 항목

일부 Visual Studio 사용자 인터페이스 요소의 경우 다음 지침에 설명된 것과 다른 이름 또는 위치가 시스템에 표시될 수 있습니다. 이러한 요소는 사용하는 Visual Studio 버전 및 설정에 따라 결정됩니다. 자세한 내용은 Visual Studio IDE 개인 설정을 참조하세요.

필수 조건

지원되는 Microsoft Windows 및 SharePoint 버전.
Visual Studio 2017 또는 Azure DevOps 서비스.

빈 SharePoint 프로젝트 만들기

먼저 빈 SharePoint 프로젝트를 만듭니다. 나중에 웹 파트 항목 템플릿을 사용하여 웹 파트를 프로젝트에 추가합니다.

관리자 권한으로 실행 옵션을 사용하여 Visual Studio를 시작합니다.
메뉴 모음에서 파일>새로 만들기>프로젝트를 선택합니다.
새 프로젝트 대화 상자에서 사용할 언어 아래의 SharePoint 노드를 확장한 다음 2010 노드를 선택합니다.
템플릿 창에서 SharePoint 2010 프로젝트를 선택한 다음 확인 단추를 선택합니다.

SharePoint 사용자 지정 마법사가 나타납니다. 이 마법사를 사용하면 프로젝트 및 솔루션 신뢰 수준을 디버그하는 데 사용할 사이트를 선택할 수 있습니다.
팜 솔루션으로 배포 옵션 단추를 선택하고 마침 단추를 선택하여 기본 로컬 SharePoint 사이트를 적용합니다.

프로젝트에 웹 파트 추가

프로젝트에 웹 파트 항목을 추가합니다. 웹 파트 항목은 웹 파트 코드 파일을 추가합니다. 나중에 웹 파트 코드 파일에 코드를 추가하여 웹 파트의 콘텐츠를 렌더링합니다.

메뉴 모음에서 프로젝트>새 항목 추가를 선택합니다.
새 항목 추가 대화 상자의 설치된 템플릿 창에서 SharePoint 노드를 확장한 다음 2010 노드를 선택합니다.
SharePoint 템플릿 목록에서 웹 파트 템플릿을 선택한 다음 추가 단추를 선택합니다.

웹 파트가 솔루션 탐색기에 표시됩니다.

웹 파트에서 콘텐츠 렌더링

웹 파트에 표시할 콘텐츠를 웹 파트 클래스의 컨트롤 컬렉션에 추가하여 지정할 수 있습니다.

솔루션 탐색기에서 WebPart1.vb(Visual Basic) 또는 WebPart1.cs(C#)를 엽니다.

웹 파트 코드 파일이 코드 편집기에서 열립니다.
다음 지시문을 웹 파트 코드 파일의 맨 위에 추가합니다.
- C#
- VB
```
using System.Data;
```
```
Imports System.Data
```
WebPart1 클래스에 다음 코드를 추가합니다. 이 코드는 다음 필드를 선언합니다.
- 웹 파트에 직원을 표시하는 데이터 표
- 데이터 표를 필터링하는 데 사용하는 컨트롤에 표시되는 텍스트
- 데이터 표에 데이터를 표시할 수 없는 경우 오류를 표시하는 레이블
- 직원 데이터 파일의 경로를 포함하는 문자열
  - C#
  - VB
```
private DataGrid grid;
private static string verbText = "Show Managers Only";
private Label errorMessage = new Label();
protected string xmlFilePath;
```
```
Private grid As DataGrid
Private Shared verbText As String = "Show Managers Only"
Private errorMessage As New Label()
Protected xmlFilePath As String
```

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 string DataFilePath
{
    get
    {
        return xmlFilePath;
    }
    set
    {
        xmlFilePath = value;
    }
}

<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

CreateChildControls 메서드를 다음 코드로 바꿉니다. 이 코드는 다음 작업을 수행합니다.

이전 단계에서 선언한 데이터 표와 레이블을 추가합니다.

데이터 표를 직원 데이터가 포함된 XML 파일에 바인딩합니다.

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

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

다음 메서드를 WebPart1 클래스에 추가합니다. 이 코드는 다음 작업을 수행합니다.

렌더링된 웹 파트의 웹 파트 동사 메뉴에 표시되는 동사를 만듭니다.

사용자가 동사 메뉴에서 동사를 선택할 때 발생하는 이벤트를 처리합니다. 이 코드는 데이터 표에 표시되는 직원 목록을 필터링합니다.

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

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의 웹 파트 갤러리에 자동으로 추가됩니다. 웹 파트는 모든 웹 파트 페이지에 추가할 수 있습니다.

다음 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>

메모장의 메뉴 모음에서 파일>다른 이름으로 저장을 차례로 선택합니다.
다른 이름으로 저장 대화 상자의 파일 형식 목록에서 모든 파일을 선택합니다.
파일 이름 상자에 data.xml을 입력합니다.
폴더 찾아보기 단추를 사용하여 폴더를 선택한 다음 저장 단추를 선택합니다.
Visual Studio에서 F5 키를 선택합니다.

SharePoint 사이트가 열립니다.
사이트 작업 메뉴에서 기타 옵션을 선택합니다.
만들기 페이지에서 웹 파트 페이지 형식을 선택한 다음 만들기 단추를 선택합니다.
새 웹 파트 페이지 페이지에서 페이지 이름을 SampleWebPartPage.aspx로 지정한 다음 만들기 단추를 선택합니다.

웹 파트 페이지가 표시됩니다.
웹 파트 페이지에서 아무 영역을 선택합니다.
페이지 위쪽에서 삽입 탭을 선택한 다음 웹 파트 단추를 선택합니다.
범주 창에서 사용자 지정 폴더를 선택하고 WebPart1 웹 파트를 선택한 다음 추가 단추를 선택합니다.

웹 파트가 페이지에 표시됩니다.

사용자 지정 속성 테스트

웹 파트에 표시되는 데이터 표를 채우려면 각 직원의 데이터가 포함된 XML 파일의 경로를 지정해야 합니다.

웹 파트의 오른쪽에 나타나는 화살표를 선택한 다음 표시되는 메뉴에서 웹 파트 편집을 선택합니다.

웹 파트의 속성이 포함된 창이 페이지의 오른쪽에 표시됩니다.
창에서 기타 노드를 확장하고 이전에 만든 XML 파일의 경로를 입력한 다음 적용 단추를 선택하고 확인 단추를 선택합니다.

직원 목록이 웹 파트에 표시되는지 확인합니다.

웹 파트 동사 테스트

웹 파트 동사 메뉴에 표시되는 항목을 선택하여 관리자가 아닌 직원을 표시하거나 숨깁니다.

웹 파트의 오른쪽에 나타나는 화살표를 선택한 다음 표시되는 메뉴에서 관리자만 표시를 선택합니다.

관리자인 직원만 웹 파트에 표시됩니다.
화살표를 다시 선택한 다음 표시되는 메뉴에서 모든 직원 표시를 선택합니다.

모든 직원이 웹 파트에 표시됩니다.

참고 항목

SharePoint용 웹 파트 만들기 방법: SharePoint 웹 파트 만들기 방법: 디자이너를 사용하여 SharePoint 웹 파트 만들기 연습: 디자이너를 사용하여 SharePoint용 웹 파트 만들기

다음을 통해 공유