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

Makale
01/13/2024

SharePoint sitesi için web bölümleri oluşturursanız, kullanıcılarınız tarayıcı kullanarak bu sitedeki sayfaların içeriğini, görünümünü ve davranışını doğrudan değiştirebilir. Bu kılavuz, Visual Studio'da SharePoint Visual Web Bölümü proje şablonunu kullanarak görsel olarak web bölümü oluşturmayı gösterir.

Oluşturacağınız web bölümünde, sitedeki her takvim listesi için aylık takvim görünümü ve onay kutusu görüntülenir. Kullanıcılar, onay kutularını seçerek aylık takvim görünümüne eklenecek takvim listelerini belirtebilir.

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

Visual Web Bölümü proje şablonunu kullanarak web bölümü oluşturma.
Visual Studio'da Visual Web Geliştirici tasarımcısını kullanarak web bölümünü tasarlama.
Web bölümündeki denetimlerin olaylarını işlemek için kod ekleme.
SharePoint'te web bölümünü test etme.

Not

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

Önkoşullar

Bu izlenecek yolu tamamlamak için aşağıdaki bileşenlere ihtiyacınız vardır:

Desteklenen Windows ve SharePoint sürümleri.

Web bölümü projesi oluşturma

İlk olarak, Visual Web Bölümü proje şablonunu kullanarak bir web bölümü projesi oluşturun.

Yönetici istrator olarak çalıştır seçeneğini kullanarak Visual Studio'yu başlatın.
Menü çubuğunda Dosya Yeni Proje'yi> seçin.>
Yeni Proje Oluştur iletişim kutusunda, yüklediğiniz belirli SharePoint sürümü için SharePoint Boş Proje*'yi seçin. Örneğin, SharePoint 2019 yüklediyseniz SharePoint 2019 - Boş Proje şablonunu seçin.

Not

Yeni Proje Oluştur iletişim kutusunun üst kısmındaki Ara metin kutusuna SharePoint yazarak da şablon arayabilirsiniz. Ayrıca, Proje türü açılan kutusunda "Office" seçeneğini belirleyerek şablon listesini yalnızca Office ve SharePoint şablonlarını gösterecek şekilde filtreleyebilirsiniz. Daha fazla bilgi için bkz . Visual Studio'da yeni proje oluşturma.
Ad kutusuna TestProject1 yazın ve Oluştur düğmesini seçin.
Bu SharePoint çözümünün güven düzeyi nedir? bölümünde Grup çözümü olarak dağıt seçeneği düğmesini seçin.
Varsayılan yerel SharePoint sitesini kabul etmek için Son düğmesini seçin.

Web bölümünü tasarlama

Araç Kutusu'ndan Visual Web Geliştirici tasarımcısının yüzeyine denetimler ekleyerek web bölümünü tasarlar.

Visual Web Geliştirici tasarımcısında Tasarım görünümüne geçmek için Tasarım sekmesini seçin.
Menü çubuğunda Araç Kutusunu Görüntüle'yi>seçin.
Araç Kutusu'nun Standart düğümünde CheckBoxList denetimini seçin ve aşağıdaki adımlardan birini gerçekleştirin:
- CheckBoxList denetiminin kısayol menüsünü açın, Kopyala'yı seçin, tasarımcıdaki ilk satırın kısayol menüsünü açın ve ardından Yapıştır'ı seçin.
- CheckBoxList denetimini Araç Kutusu'ndan sürükleyin ve denetimi tasarımcıdaki ilk satıra bağlayın.
Önceki adımı yineleyin, ancak düğmeyi tasarımcının bir sonraki satırına taşıyın.
Tasarımcıda Düğme1 düğmesini seçin.
Menü çubuğunda Özellikler Penceresini Görüntüle'yi>seçin.

Özellikler penceresi açılır.
Düğmenin Text özelliğine Güncelleştir yazın.

Web bölümündeki denetimlerin olaylarını işleme

Kullanıcının ana takvim görünümüne takvim eklemesini sağlayan kod ekleyin.

Aşağıdaki adım kümelerinden birini uygulayın:
- Tasarımcıda Güncelleştir düğmesine çift tıklayın.
- Güncelleştir düğmesinin Özellikler penceresinde Olaylar düğmesini seçin. Click özelliğine Button1_Click girin ve Enter tuşunu seçin.
  
  Kullanıcı denetimi kod dosyası Kod Düzenleyicisi'nde açılır ve Button1_Click olay işleyicisi görüntülenir. Daha sonra bu olay işleyicisine kod ekleyeceksiniz.

Kullanıcı denetim kodu dosyasının en üstüne aşağıdaki deyimleri ekleyin.

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI.WebControls;

Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.WebControls
Imports System.Web.UI.WebControls

Sınıfına aşağıdaki kod VisualWebPart1 satırını ekleyin. Bu kod aylık takvim görünümü denetimi bildirir.
- C#
- VB
```
private MonthlyCalendarView MonthlyCalendarView1;
```
```
Private MonthlyCalendarView1 As MonthlyCalendarView
```

Page_Load sınıfının yöntemini VisualWebPart1 aşağıdaki kodla değiştirin. Bu kod aşağıdaki görevleri gerçekleştirir:

Kullanıcı denetimine aylık takvim görünümü ekler.
Sitedeki her takvim listesi için bir onay kutusu ekler.

Takvim görünümünde görüntülenen her öğe türü için bir şablon belirtir.

protected void Page_Load(object sender, EventArgs e)
{
    MonthlyCalendarView1 = new MonthlyCalendarView();
    this.Controls.Add(MonthlyCalendarView1);
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    if (CheckBoxList1.Items.Count == 0)
    {
        foreach (SPList listItem in thisWeb.Lists)
        {
            if (listItem.BaseTemplate == SPListTemplateType.Events)
            {
                CheckBoxList1.Items.Add(new ListItem(listItem.Title));
            }
        }
    }
    MonthlyCalendarView1.ItemTemplateName =
        "CalendarViewMonthItemTemplate";
    MonthlyCalendarView1.ItemAllDayTemplateName =
        "CalendarViewMonthItemAllDayTemplate";
    MonthlyCalendarView1.ItemMultiDayTemplateName =
        "CalendarViewMonthItemMultiDayTemplate";
}

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    MonthlyCalendarView1 = New MonthlyCalendarView()
    Me.Controls.Add(MonthlyCalendarView1)
    Dim items As New SPCalendarItemCollection()
    Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context)

    If CheckBoxList1.Items.Count = 0 Then
        Dim listItem As SPList
        For Each listItem In thisWeb.Lists
            If listItem.BaseTemplate = SPListTemplateType.Events Then
                CheckBoxList1.Items.Add(New ListItem(listItem.Title))
            End If
        Next listItem
    End If
    MonthlyCalendarView1.ItemTemplateName = "CalendarViewMonthItemTemplate"
    MonthlyCalendarView1.ItemAllDayTemplateName = "CalendarViewMonthItemAllDayTemplate"
    MonthlyCalendarView1.ItemMultiDayTemplateName = "CalendarViewMonthItemMultiDayTemplate"
End Sub

Button1_Click sınıfının yöntemini VisualWebPart1 aşağıdaki kodla değiştirin. Bu kod, seçilen her takvimdeki öğeleri ana takvim görünümüne ekler.

protected void Button1_Click(object sender, EventArgs e)
{
    SPCalendarItemCollection items = new SPCalendarItemCollection();
    SPWeb thisWeb = SPControl.GetContextWeb(Context);

    foreach (ListItem item in CheckBoxList1.Items)
    {
        if (item.Selected == true)
        {
            SPList calendarList = thisWeb.Lists[item.Text];
            DateTime dtStart = DateTime.Now.AddDays(-7);
            DateTime dtEnd = dtStart.AddMonths(1).AddDays(7);
            SPQuery query = new SPQuery();
            query.Query = String.Format(
                "<Query>" +
                "<Where><And>" +
                "<Geq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{1}</Value></Geq>" +
                "<Leq><FieldRef Name=\"{0}\" />" +
                "<Value Type=\"DateTime\">{2}</Value></Leq>" +
                "</And></Where><OrderBy><FieldRef Name=\"{0}\" /></OrderBy>" +
                "</Query>",
                "Start Time",
                dtStart.ToShortDateString(),
                dtEnd.ToShortDateString());

            foreach (SPListItem listItem in calendarList.GetItems(query))
            {
                SPCalendarItem calItem = new SPCalendarItem();
                calItem.ItemID = listItem["ID"].ToString();
                calItem.Title = listItem["Title"].ToString();
                calItem.CalendarType = Convert.ToInt32(SPCalendarType.Gregorian);
                calItem.StartDate = (DateTime)listItem["Start Time"];
                calItem.ItemID = listItem.ID.ToString();
                calItem.WorkSpaceLink = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.DisplayFormUrl = String.Format(
                    "/Lists/{0}/DispForm.aspx", calendarList.Title);
                calItem.EndDate = (DateTime)listItem["End Time"];
                calItem.Description = listItem["Description"].ToString();
                if (listItem["Location"] != null)
                {
                    calItem.Location = listItem["Location"].ToString();
                }
                items.Add(calItem);
            }
            MonthlyCalendarView1.DataSource = items;
        }

    }

}

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
    Dim items As New SPCalendarItemCollection()
    Dim thisWeb As SPWeb = SPControl.GetContextWeb(Context)

    Dim item As ListItem
    For Each item In CheckBoxList1.Items
        If item.Selected = True Then
            Dim calendarList As SPList = thisWeb.Lists(item.Text)
            Dim dtStart As DateTime = DateTime.Now.AddDays(-7)
            Dim dtEnd As DateTime = dtStart.AddMonths(1).AddDays(7)
            Dim query As New SPQuery()
            query.Query = [String].Format("<Query>" + "<Where><And>" + _
                                          "<Geq><FieldRef Name=""{0}"" />" + _
                                          "<Value Type=""DateTime"">{1}</Value></Geq>" + _
                                          "<Leq><FieldRef Name=""{0}"" />" + _
                                          "<Value Type=""DateTime"">{2}</Value></Leq>" + _
                                          "</And></Where><OrderBy><FieldRef Name=""{0}"" /></OrderBy>" + _
                                          "</Query>", "Start Time", dtStart.ToShortDateString(), dtEnd.ToShortDateString())

            Dim listItem As SPListItem
            For Each listItem In calendarList.GetItems(query)
                Dim calItem As New SPCalendarItem()
                With calItem
                    .ItemID = listItem("ID").ToString()
                    .Title = listItem("Title").ToString()
                    .CalendarType = Convert.ToInt32(SPCalendarType.Gregorian)
                    .StartDate = CType(listItem("Start Time"), DateTime)
                    .ItemID = listItem.ID.ToString()
                    .WorkSpaceLink = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title)
                    .DisplayFormUrl = [String].Format("/Lists/{0}/DispForm.aspx", calendarList.Title)
                    .EndDate = CType(listItem("End Time"), DateTime)
                    .Description = listItem("Description").ToString()
                End With

                If Not (listItem("Location") Is Nothing) Then
                    calItem.Location = listItem("Location").ToString()
                End If
                items.Add(calItem)
            Next listItem
            MonthlyCalendarView1.DataSource = items
        End If
    Next item

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. Bu projeyi test etmek için aşağıdaki görevleri gerçekleştireceksiniz:

İki ayrı takvim listesinin her birine bir olay ekleyin.
Web bölümünü bir web bölümü sayfasına ekleyin.
Aylık takvim görünümüne eklenecek listeleri belirtin.

Sitedeki takvim listelerine etkinlik eklemek için

Visual Studio'da F5 tuşunu seçin.

SharePoint sitesi açılır ve sayfada Microsoft SharePoint Foundation Hızlı Başlatma çubuğu görüntülenir.
Hızlı Başlat çubuğundaki Listeler'in altında Takvim bağlantısını seçin.

Takvim sayfası görüntülenir.

Hızlı Başlat çubuğunda Takvim bağlantısı görünmüyorsa Site İçeriği bağlantısını seçin. Site İçeriği sayfasında Takvim öğesi gösterilmiyorsa, bir tane oluşturun.
Takvim sayfasında bir gün seçin ve ardından bir etkinlik eklemek için Seçili güne ekle bağlantısını seçin.
Başlık kutusuna varsayılan takvime Olay yazın ve Kaydet düğmesini seçin.
Site İçeriği bağlantısını seçin ve ardından Uygulama ekle kutucuğunu seçin.
Oluştur sayfasında Takvim türünü seçin, takvimi adlandırın ve ardından Oluştur düğmesini seçin.
Yeni takvime bir olay ekleyin, olayı özel takvimde adlandırın ve kaydet düğmesini seçin.

Web bölümünü web bölümü sayfasına eklemek için

Site İçeriği sayfasında Site Sayfaları klasörünü açın.
Şeritte Dosyalar sekmesini seçin, Yeni Belge menüsünü açın ve ardından Web Bölümü Sayfası komutunu seçin.
Yeni Web Bölümü Sayfası sayfasında, sayfaya SampleWebPartPage.aspx adını verin ve oluştur düğmesini seçin.

Web bölümü sayfası görüntülenir.
Web bölümü sayfasının üst bölgesinde Ekle sekmesini ve ardından Web Bölümü düğmesini seçin.
Özel klasörünü seçin, VisualWebPart1 web bölümünü ve ardından Ekle düğmesini seçin.

Web bölümü sayfada görünür. Web bölümünde aşağıdaki denetimler görünür:
- Aylık takvim görünümü.
- Güncelleştir düğmesi.
- Takvim onay kutusu.
- Özel Takvim onay kutusu.

Aylık takvim görünümüne eklenecek listeleri belirtmek için

Web bölümünde, aylık takvim görünümüne eklemek istediğiniz takvimleri belirtin ve ardından Güncelleştir düğmesini seçin.

Belirttiğiniz tüm takvimlerdeki olaylar aylık takvim görünü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 İzlenecek Yol: SharePoint için web bölümü oluşturma

Aracılığıyla paylaş