Przewodnik: tworzenie składnika Web Part dla programu SharePoint przy użyciu projektanta

Jeśli tworzysz składniki Web Part dla witryny programu SharePoint, użytkownicy mogą bezpośrednio modyfikować zawartość, wygląd i zachowanie stron w tej witrynie przy użyciu przeglądarki. W tym przewodniku pokazano, jak wizualnie utworzyć składnik Web Part przy użyciu szablonu projektu składnika Visual Web Part programu SharePoint w programie Visual Studio.

Utworzony składnik Web Part wyświetla widok kalendarza miesięcznego i pole wyboru dla każdej listy kalendarzy w witrynie. Użytkownicy mogą określić listy kalendarzy do uwzględnienia w widoku kalendarza miesięcznego, zaznaczając pola wyboru.

W instruktażu przedstawiono następujące zagadnienia:

• Tworzenie składnika Web Part przy użyciu szablonu projektu składnika Web Part visual.

• Projektowanie składnika Web Part przy użyciu projektanta visual Web Developer w programie Visual Studio.

• Dodawanie kodu do obsługi zdarzeń kontrolek w składniku Web Part.

• Testowanie składnika Web Part w programie SharePoint.

  Uwaga

  Na komputerze mogą być wyświetlane różne nazwy lub lokalizacje niektórych elementów interfejsu użytkownika programu Visual Studio w poniższych instrukcjach. Te elementy są określane przez numer wersji Visual Studio oraz twoje ustawienia. Zobacz Personalizowanie środowiska IDE programu Visual Studio.

Wymagania wstępne

Następujące składniki są wymagane do przeprowadzenia tego instruktażu:

• Obsługiwane wersje systemów Windows i SharePoint.

Tworzenie projektu składnika Web Part

Najpierw utwórz projekt składników Web Part przy użyciu szablonu projektu składników Web Part visual.

1. Uruchom program Visual Studio przy użyciu opcji Uruchom jako Administracja istrator.

2. Na pasku menu wybierz pozycję Plik>nowy>projekt.

3. W oknie dialogowym Tworzenie nowego projektu wybierz pusty projekt programu SharePoint* dla określonej zainstalowanej wersji programu SharePoint. Jeśli na przykład masz zainstalowany program SharePoint 2019, wybierz szablon SharePoint 2019 — pusty projekt .

   Uwaga

   Szablony można również wyszukać, wpisując ciąg SharePoint w polu tekstowym Wyszukaj w górnej części okna dialogowego Tworzenie nowego projektu . Możesz również filtrować listę szablonów, aby wyświetlić tylko szablony dla pakietu Office i programu SharePoint, wybierając pozycję "Office" w polu listy rozwijanej Typ projektu. Aby uzyskać więcej informacji, zobacz Tworzenie nowego projektu w programie Visual Studio.

4. W polu Nazwa wprowadź ciąg TestProject1, a następnie wybierz przycisk Utwórz .

5. W sekcji Co to jest poziom zaufania dla tego rozwiązania programu SharePoint? wybierz przycisk Wdróż jako rozwiązanie farmy.

6. Wybierz przycisk Zakończ, aby zaakceptować domyślną lokalną witrynę programu SharePoint.

Projektowanie składnika Web Part

Zaprojektuj składnik Web Part, dodając kontrolki z przybornika do powierzchni projektanta visual web developer.

1. W projektancie visual Web Developer wybierz kartę Projektowanie , aby przełączyć się do widoku Projekt.

2. Na pasku menu wybierz pozycję Wyświetl>przybornik.

3. W węźle Standardowy przybornika wybierz kontrolkę CheckBoxList, a następnie wykonaj jedną z następujących czynności:

   • Otwórz menu skrótów kontrolki CheckBoxList , wybierz pozycję Kopiuj, otwórz menu skrótów dla pierwszego wiersza w projektancie, a następnie wybierz pozycję Wklej.

   • Przeciągnij kontrolkę CheckBoxList z przybornika i połącz kontrolkę z pierwszym wierszem w projektancie.

4. Powtórz poprzedni krok, ale przenieś przycisk do następnego wiersza projektanta.

5. W projektancie wybierz przycisk Button1 .

6. Na pasku menu wybierz pozycję Wyświetl>okno właściwości.

   Zostanie otwarte okno Właściwości .

7. We właściwości Text przycisku wprowadź wartość Update.

Obsługa zdarzeń kontrolek w składniku Web Part

Dodaj kod, który umożliwia użytkownikowi dodawanie kalendarzy do widoku kalendarza głównego.

1. Wykonaj jeden z następujących zestawów czynności:

   • W projektancie kliknij dwukrotnie przycisk Aktualizuj .

   • W oknie Właściwości przycisku Aktualizuj wybierz przycisk Zdarzenia. We właściwości Click wprowadź Button1_Click, a następnie wybierz klawisz Enter.

     Plik kodu sterującego użytkownika zostanie otwarty w Edytorze kodu i zostanie wyświetlona procedura obsługi zdarzeń Button1_Click . Później dodasz kod do tej procedury obsługi zdarzeń.

2. Dodaj następujące instrukcje na początku pliku kodu sterującego użytkownika.

   C#

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

   VB

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

3. Dodaj następujący wiersz kodu do VisualWebPart1 klasy . Ten kod deklaruje kontrolkę widoku kalendarza miesięcznego.

   C#

   private MonthlyCalendarView MonthlyCalendarView1;
   

   VB

   Private MonthlyCalendarView1 As MonthlyCalendarView
   

4. Zastąp metodę Page_Load VisualWebPart1 klasy następującym kodem. Ten kod wykonuje następujące zadania:

   • Dodaje widok kalendarza miesięcznego do kontrolki użytkownika.

   • Dodaje pole wyboru dla każdej listy kalendarzy w witrynie.

   • Określa szablon dla każdego typu elementu wyświetlanego w widoku kalendarza.

     C#

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

     VB

     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
     

   ---

5. Zastąp metodę Button1_Click VisualWebPart1 klasy następującym kodem. Ten kod dodaje elementy z każdego wybranego kalendarza do widoku kalendarza głównego.

   C#

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

   VB

   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
   

Testowanie składnika Web Part

Po uruchomieniu projektu zostanie otwarta witryna programu SharePoint. Składnik Web Part jest automatycznie dodawany do galerii składników Web Part w programie SharePoint. Aby przetestować ten projekt, wykonasz następujące zadania:

• Dodaj zdarzenie do każdej z dwóch oddzielnych list kalendarza.
• Dodaj składnik Web Part do strony składników Web Part.
• Określ listy do uwzględnienia w widoku kalendarza miesięcznego.

Aby dodać zdarzenia do list kalendarza w witrynie

1. W programie Visual Studio wybierz klawisz F5 .

   Zostanie otwarta witryna programu SharePoint, a na stronie zostanie wyświetlony pasek Szybkiego uruchamiania programu Microsoft SharePoint Foundation.

2. Na pasku Szybkie uruchamianie w obszarze Listy wybierz link Kalendarz .

   Zostanie wyświetlona strona Kalendarz.

   Jeśli na pasku Szybkiego uruchamiania nie pojawi się link Kalendarz, wybierz link Zawartość witryny. Jeśli na stronie Zawartość witryny nie jest wyświetlany element Kalendarza , utwórz go.

3. Na stronie Kalendarz wybierz dzień, a następnie wybierz link Dodaj w wybranym dniu, aby dodać wydarzenie.

4. W polu Tytuł wprowadź zdarzenie w kalendarzu domyślnym, a następnie wybierz przycisk Zapisz.

5. Wybierz link Zawartość witryny, a następnie wybierz kafelek Dodaj aplikację.

6. Na stronie Tworzenie wybierz typ kalendarza, nadaj kalendarzowi nazwę, a następnie wybierz przycisk Utwórz.

7. Dodaj zdarzenie do nowego kalendarza, nazwij zdarzenie w kalendarzu niestandardowym, a następnie wybierz przycisk Zapisz .

Aby dodać składnik Web Part do strony składników Web Part

1. Na stronie Zawartość witryny otwórz folder Strony witryny.

2. Na wstążce wybierz kartę Pliki, otwórz menu Nowy dokument, a następnie wybierz polecenie Strona składników Web Part.

3. Na stronie Nowa strona składników Web Part nadaj stronie nazwę strony SampleWebPartPage.aspx, a następnie wybierz przycisk Utwórz.

   Zostanie wyświetlona strona składników Web Part.

4. W górnej strefie strony składników Web Part wybierz kartę Wstawianie , a następnie wybierz przycisk Składnik Web Part .

5. Wybierz folder Niestandardowy, wybierz składnik Web Part VisualWebPart1, a następnie wybierz przycisk Dodaj.

   Składnik Web Part zostanie wyświetlony na stronie. W składniku Web Part są wyświetlane następujące kontrolki:

   • Widok kalendarza miesięcznego.

   • Przycisk Aktualizuj .

   • Pole wyboru Kalendarz.

   • Pole wyboru Kalendarz niestandardowy.

Aby określić listy do uwzględnienia w widoku kalendarza miesięcznego

W składniku Web Part określ kalendarze, które chcesz uwzględnić w widoku kalendarza miesięcznego, a następnie wybierz przycisk Aktualizuj .

Zdarzenia ze wszystkich określonych kalendarzy są wyświetlane w widoku kalendarza miesięcznego.

Zobacz też

Tworzenie składników Web Part dla programu SharePoint— instrukcje: tworzenie przewodnika składnika Web Partprogramu SharePoint: tworzenie składnika Web Part dla programu SharePoint