İzlenecek yol: SharePoint için web bölümü oluşturma

Makale
08/25/2023

Web Bölümleri kullanıcıların tarayıcı kullanarak SharePoint site sayfalarının içeriğini, görünümünü ve davranışını doğrudan değiştirmesine olanak tanır. Bu kılavuzda, Visual Studio 2010'da Web Bölümü öğe şablonunu kullanarak Web Bölümü oluşturma gösterilmektedir.

Web Bölümü, çalışanları bir veri kılavuzunda görüntüler. Kullanıcı, çalışan verilerini içeren dosyanın konumunu belirtir. Kullanıcı ayrıca veri kılavuzunu filtreleyebilir, böylece yönetici olan çalışanlar yalnızca listede görünür.

Bu izlenecek yol aşağıdaki görevleri gösterir:

Visual Studio Web Bölümü öğe şablonunu kullanarak Web Bölümü oluşturma.
Web Bölümü kullanıcısı tarafından ayarlanabilen bir özellik oluşturma. Bu özellik, çalışan veri dosyasının konumunu belirtir.
Web Bölümü denetim koleksiyonuna denetimler ekleyerek Bir Web Bölümünde içerik işleme.
İşlenen Web bölümünün fiiller menüsünde görünen fiil olarak adlandırılan yeni bir menü öğesi oluşturma. Fiiller, kullanıcının Web Bölümünde görünen verileri değiştirmesine olanak tanır.
SharePoint'te Web Bölümünü test etme.

Not

Bilgisayarınız, aşağıdaki yönergelerde yer alan Visual Studio kullanıcı arabirimi öğelerinden bazıları için farklı adlar veya konumlar gösterebilir. Sahip olduğunuz Visual Studio sürümü ve kullandığınız ayarlar bu öğeleri belirler. Daha fazla bilgi için bkz . Visual Studio IDE'yi kişiselleştirme.

Önkoşullar

Microsoft Windows ve SharePoint'in desteklenen sürümleri.
Visual Studio 2017 veya Azure DevOps Services.

Boş bir SharePoint projesi oluşturma

İlk olarak Boş bir SharePoint projesi oluşturun. Daha sonra, Web Bölümü öğe şablonunu kullanarak projeye bir Web Bölümü ekleyebilirsiniz.

Yönetici istrator olarak çalıştır seçeneğini kullanarak Visual Studio'yu başlatın.
Erkek çubuğunda Dosya Yeni Proje'yi> seçin.>
Yeni Proje iletişim kutusunda, kullanmak istediğiniz dilin altındaki SharePoint düğümünü genişletin ve ardından 2010 düğümünü seçin.
Şablonlar bölmesinde SharePoint 2010 Projesi'ni ve ardından Tamam düğmesini seçin.

SharePoint Özelleştirme Sihirbazı görüntülenir. Bu sihirbaz, projede hata ayıklamak için kullanacağınız siteyi ve çözümün güven düzeyini seçmenizi sağlar.
Grup çözümü olarak dağıt seçeneği düğmesini ve ardından varsayılan yerel SharePoint sitesini kabul etmek için Son düğmesini seçin.

Projeye web bölümü ekleme

Projeye bir Web Bölümü öğesi ekleyin. Web Bölümü öğesi Web Bölümü kod dosyasını ekler. Daha sonra, Web Bölümünün içeriğini işlemek için Web Bölümü kod dosyasına kod ekleyebilirsiniz.

Menü çubuğunda Proje>Yeni Öğe Ekle'yi seçin.
Yeni Öğe Ekle iletişim kutusundaki Yüklü Şablonlar bölmesinde SharePoint düğümünü genişletin ve 2010 düğümünü seçin.
SharePoint şablonları listesinde Web Bölümü şablonunu ve ardından Ekle düğmesini seçin.

Web Bölümü öğesi Çözüm Gezgini görüntülenir.

Web bölümünde içerik işleme

Web Bölümü sınıfının denetim koleksiyonuna ekleyerek Web Bölümünde hangi denetimlerin görünmesini istediğinizi belirtebilirsiniz.

Çözüm Gezgini'da WebPart1.vb (Visual Basic'te) veya WebPart1.cs (C#'de) açın.

Web Bölümü kod dosyası Kod Düzenleyicisi'nde açılır.
Aşağıdaki yönergeleri Web Bölümü kod dosyasının en üstüne ekleyin.
- C#
- VB
```
using System.Data;
```
```
Imports System.Data
```
Aşağıdaki kodu WebPart1 sınıfına ekleyin. Bu kod aşağıdaki alanları bildirir:
- Web Bölümünde çalışanları görüntülemek için bir veri kılavuzu.
- Veri kılavuzunu filtrelemek için kullanılan denetimde görüntülenen metin.
- Veri kılavuzu verileri görüntüleyemediğinde hata görüntüleyen etiket.
- Çalışan veri dosyasının yolunu içeren bir dize.
  - 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
```

Aşağıdaki kodu WebPart1 sınıfına ekleyin. Bu kod, Web Bölümüne adlı DataFilePath bir özel özellik ekler. Özel özellik, SharePoint'te kullanıcı tarafından ayarlanabilen bir özelliktir. Bu özellik, veri kılavuzunu doldurmak için kullanılan xml veri dosyasının konumunu alır ve ayarlar.

[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 yöntemini aşağıdaki kodla değiştirin. Bu kod aşağıdaki görevleri gerçekleştirir:

Önceki adımda bildirdiğiniz veri kılavuzunu ve etiketi ekler.

Veri kılavuzunu çalışan verilerini içeren bir XML dosyasına bağlar.

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

Sınıfına aşağıdaki yöntemi WebPart1 ekleyin. Bu kod aşağıdaki görevleri gerçekleştirir:

İşlenen Web bölümünün Web Bölümü fiiller menüsünde görünen bir fiil oluşturur.

Kullanıcı fiil menüsünde fiil seçtiğinde tetiklenen olayı işler. Bu kod, veri kılavuzunda görüntülenen çalışanların listesini filtreler.

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

Web bölümünü test edin

Projeyi çalıştırdığınızda SharePoint sitesi açılır. Web Bölümü, SharePoint'teki Web Bölümü Galerisi'ne otomatik olarak eklenir. Web Bölümünü herhangi bir Web Bölümü sayfasına ekleyebilirsiniz.

Aşağıdaki XML'yi bir Not Defteri dosyasına yapıştırın. Bu XML dosyası, Web Bölümünde görünecek örnek verileri içerir.

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

Not Defteri menü çubuğunda Dosya>Farklı Kaydet'i seçin.
Farklı Kaydet iletişim kutusundaki Kayıt türü listesinde Tüm Dosyalar'ı seçin.
Dosya adı kutusuna data.xml girin.
Klasörlere Gözat düğmesini kullanarak herhangi bir klasörü seçin ve ardından Kaydet düğmesini seçin.
Visual Studio'da F5 tuşunu seçin.

SharePoint sitesi açılır.
Site Eylemleri menüsünde Diğer Seçenekler'i seçin.
Oluştur sayfasında Web Bölümü Sayfası türünü ve ardından Oluştur düğmesini seçin.
Yeni Web Bölümü Sayfası sayfasında sayfayı SampleWebPartPage.aspx adlandırın ve oluştur düğmesini seçin.

Web Bölümü sayfası görüntülenir.
Web Bölümü sayfasında herhangi bir bölgeyi seçin.
Sayfanın üst kısmında Ekle sekmesini ve ardından Web Bölümü düğmesini seçin.
Kategoriler bölmesinde Özel klasörünü seçin, Web Bölümü1 Web Bölümü'nü ve ardından Ekle düğmesini seçin.

Web Bölümü sayfada görünür.

Özel özelliği test edin

Web Bölümünde görüntülenen veri kılavuzunu doldurmak için, her çalışanla ilgili verileri içeren XML dosyasının yolunu belirtin.

Web Bölümünün sağ tarafında görüntülenen oku seçin ve ardından görüntülenen menüden Web Bölümünü Düzenle'yi seçin.

Sayfanın sağ tarafında Web Bölümü özelliklerini içeren bir bölme görüntülenir.
Bölmede Çeşitli düğümünü genişletin, daha önce oluşturduğunuz XML dosyasının yolunu girin, Uygula düğmesini seçin ve ardından Tamam düğmesini seçin.

Çalışan listesinin Web Bölümünde göründüğünü doğrulayın.

Web bölümü fiilini test edin

Web Bölümü fiilleri menüsünde görünen bir öğeyi seçerek yönetici olmayan çalışanları gösterin ve gizleyin.

Web Bölümünün sağ tarafında görüntülenen oku seçin ve ardından görüntülenen menüden Yalnızca Yöneticileri Göster'i seçin.

Web Bölümünde yalnızca yönetici olan çalışanlar görünür.
Oku yeniden seçin ve ardından görüntülenen menüden Tüm Çalışanları Göster'i seçin.

Tüm çalışanlar Web Bölümünde görünür.

Ayrıca bkz.

SharePoint için web bölümleri oluşturma Nasıl yapılır: SharePoint web bölümü oluşturma Nasıl yapılır: Tasarım Aracı Kullanarak SharePoint web bölümü oluşturmaWalkthrough: Tasarımcı kullanarak SharePoint için web bölümü oluşturma

Aracılığıyla paylaş