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

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

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

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

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

• Проектирование веб-части с помощью конструктора Visual Web Developer в Visual Studio.

• Добавление кода для обработки событий элементов управления в веб-части.

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

  Примечание.

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

Необходимые компоненты

Для выполнения этого пошагового руководства требуются следующие компоненты:

• Поддерживаемые выпуски Windows и SharePoint.

Создание проекта веб-части

Сначала создайте проект веб-части с помощью шаблона проекта Visual Web Part .

1. Запустите Visual Studio с помощью параметра Запуска от имени Администратор istrator.

2. В строке меню выберите Файл >Создать >Проект.

3. В диалоговом окне "Создание проекта" выберите sharePoint Empty Project* для определенной версии SharePoint, которую вы установили. Например, если у вас установлена установка SharePoint 2019, выберите шаблон SharePoint 2019 — пустой шаблон проекта .

   Примечание.

   Вы также можете искать шаблоны, введя SharePoint в текстовое поле поиска в верхней части диалогового окна "Создание проекта ". Вы также можете отфильтровать список шаблонов, чтобы отобразить только шаблоны для Office и SharePoint, выбрав "Office" в раскрывающемся списке "Тип проекта". Дополнительные сведения см. в статье Создание проекта в Visual Studio.

4. В поле "Имя" введите TestProject1 и нажмите кнопку "Создать".

5. В разделе " Что такое уровень доверия для этого решения SharePoint?" , нажмите кнопку "Развернуть как решение фермы".

6. Нажмите кнопку "Готово", чтобы принять локальный сайт SharePoint по умолчанию.

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

Создайте веб-часть, добавив элементы управления из панели элементов на поверхность конструктора visual Web Developer.

1. В конструкторе Visual Web Developer выберите вкладку "Конструктор ", чтобы перейти в режим конструктора.

2. В строке меню выберите Вид>Панель элементов.

3. На узле "Стандартный" панели элементов выберите элемент управления CheckBoxList и выполните одно из следующих действий:

   • Откройте контекстное меню элемента управления CheckBoxList , выберите "Копировать", откройте контекстное меню для первой строки конструктора и нажмите кнопку "Вставить".

   • Перетащите элемент управления CheckBoxList из панели элементов и подключите элемент управления к первой строке в конструкторе.

4. Повторите предыдущий шаг, но переместите кнопку на следующую строку конструктора.

5. В конструкторе нажмите кнопку Button1 .

6. В строке меню выберите окно "Просмотр>свойств".

   Откроется окно Свойства.

7. В свойстве Text кнопки введите Update.

Обработка событий элементов управления в веб-части

Добавьте код, позволяющий пользователю добавлять календари в представление главного календаря.

1. Выполните одно из следующих действий.

   • В конструкторе дважды нажмите кнопку "Обновить ".

   • В окне "Свойства" кнопки "Обновить" нажмите кнопку "События". В свойстве Click введите Button1_Click и нажмите клавишу ВВОД.

     Откроется файл кода пользовательского элемента управления в редакторе Button1_Click кода и появится обработчик событий. Позже вы добавите код в этот обработчик событий.

2. Добавьте следующие инструкции в начало файла кода пользовательского элемента управления.

   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. Добавьте в класс следующую строку кода VisualWebPart1 . Этот код объявляет элемент управления представлением ежемесячного календаря.

   C#

   private MonthlyCalendarView MonthlyCalendarView1;
   

   VB

   Private MonthlyCalendarView1 As MonthlyCalendarView
   

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

   • Добавляет ежемесячное представление календаря в элемент управления пользователем.

   • Добавляет поле проверка для каждого списка календарей на сайте.

   • Задает шаблон для каждого типа элемента, который отображается в представлении календаря.

     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. Замените Button1_Click метод VisualWebPart1 класса следующим кодом. Этот код добавляет элементы из каждого выбранного календаря в представление главного календаря.

   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
   

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

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

• Добавьте событие в каждый из двух отдельных списков календарей.
• Добавьте веб-часть на страницу веб-части.
• Укажите списки для включения в представление ежемесячного календаря.

Добавление событий в списки календарей на сайте

1. В Visual Studio выберите клавишу F5 .

   Откроется сайт SharePoint, а на странице появится панель быстрого запуска Microsoft SharePoint Foundation.

2. На панели быстрого запуска в разделе "Списки" выберите ссылку "Календарь ".

   Открывается страница Календарь.

   Если на панели быстрого запуска нет ссылки "Календарь", выберите ссылку "Содержимое сайта". Если страница "Содержимое сайта" не отображает элемент календаря , создайте его.

3. На странице "Календарь" выберите день и выберите ссылку "Добавить " в выбранный день, чтобы добавить событие.

4. В поле "Заголовок" введите событие в календаре по умолчанию и нажмите кнопку "Сохранить".

5. Выберите ссылку "Содержимое сайта" и выберите плитку "Добавить приложение".

6. На странице "Создать" выберите тип календаря, назовите календарь и нажмите кнопку "Создать".

7. Добавьте событие в новый календарь, назовите событие в пользовательском календаре и нажмите кнопку "Сохранить ".

Добавление веб-части на страницу веб-части

1. На странице "Содержимое сайта" откройте папку Site Pages .

2. На ленте откройте вкладку "Файлы" , откройте меню "Создать документ " и выберите команду "Страница веб-части".

3. На странице "Новая веб-часть" назовите страницу SampleWebPartPage.aspx и нажмите кнопку "Создать".

   Откроется страница веб-части.

4. В верхней зоне страницы веб-части выберите вкладку "Вставка " и нажмите кнопку "Веб-часть ".

5. Выберите пользовательскую папку, выберите веб-часть VisualWebPart1 и нажмите кнопку "Добавить".

   Веб-часть появится на странице. В веб-части отображаются следующие элементы управления:

   • Ежемесячное представление календаря.

   • Кнопка "Обновить".

   • Поле "Календарь " проверка.

   • Поле "Настраиваемый календарь" проверка.

Указание списков для включения в представление ежемесячного календаря

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

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

См. также

Создание веб-частей для SharePoint How to: Create a SharePointWeb part Walkthrough: Create a web partfor SharePoint