Этот пост будет посвящен описанию создания справочника на сайте SharePoint с использованием WCF-сервиса, библиотеки jQuery и плагинов к ней.
Введение
В рамках запуска нового сайта ИНГГ СО РАН, который построен на SharePoint Server 2007, было решено разработать новую версию телефонного справочника сотрудников. Для клиентской части был выбран jqGrid в качестве элемента для таблицы сотрудников и jQueryUI для отображения подробной информации о сотруднике. Данные клиентская часть получает от RESTful веб-сервиса, реализованного на WCF, который развернут тут же, на сайте SharePoint.
Пара картинок того, что получилось:
WCF-сервис и PhoneBookWebpart
Справочник сотрудников отображается на странице веб-частей на сайте SharePoint в виде веб-части, содержимое которой загружается из ascx-контрола.
protected override void CreateChildControls()
{
if (!_error)
{
try
{
base.CreateChildControls();
if (!this.WebPartManager.DisplayMode.AllowPageDesign)
{
var gridControl =
(JqGridPhoneBookControl)Page.LoadControl(
"~/_controltemplates/IPGG.IntegrationSystem/PhoneBook/JqGridPhoneBookControl.ascx");
gridControl.DivisionNumber = DivisionNumber;
Controls.Add(gridControl);
}
}
catch (Exception ex)
{
HandleException(ex);
}
}
}
Контрол JqGridPhoneBookControl.ascx практически не содержит серверного кода, за исключением значения скрытого тега <input>, с помощью которого через свойства веб-части передается номер подразделения для начальной фильтации.
<input type="hidden" id="divisionNumberFromWebpart" value='<%=DivisionNumber %>'/>
<table id="phoneBookGrid"></table>
<div id="phoneBookPager"></div>
<div id="employeeInfoContainer">
...
</div>
Сервис, предоставляющий данные, имеет следующий интерфейс.
[ServiceContract]
public interface IPhoneBookService
{
[OperationContract]
[WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json)]
JqGridResult<Employee> GetAllRecordsForJqGrid();
[OperationContract]
[WebInvoke(Method = "GET")]
Stream GetPhoto(int employeeId);
[OperationContract]
[WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json)]
Employee GetRecord(int employeeId);
}
JqGridResult – класс, возвращаемый методом GetAllRecordsForJqGrid и принимаемый reader’ом jqGrid.
[DataContract]
public class JqGridResult<T>
{
[DataMember]
public int CurrentPage { get; set; }
[DataMember]
public int TotalPages { get; set; }
[DataMember]
public int TotalRecords { get; set; }
[DataMember]
public List<T> Records { get; set; }
}
Код сервиса разворачивается в GAC вместе с остальными сборками wsp-решения для SharePoint, svc-файл веб-сервиса помещается в подпапке папки c:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\ вместе с файлом web.config, в котором необходимо указать webHttpBinding
<?xml version="1.0"?>
<configuration>
<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior name="serviceBehavior">
<serviceMetadata httpGetEnabled="true"/>
<serviceDebug includeExceptionDetailInFaults="true"/>
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="endpointBehavior">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
<services>
<service name="IPGG.IntegrationSystem.Web.Services.PhoneBookService" behaviorConfiguration="serviceBehavior">
<endpoint address="" binding="webHttpBinding" contract="IPGG.IntegrationSystem.Web.Services.IPhoneBookService" behaviorConfiguration="endpointBehavior"/>
</service>
</services>
</system.serviceModel>
</configuration>
Для корректной работы WCF-сервисов в приложении SharePoint, необходимо установить SPWCFSupport, либо реализовать подобный код у себя в решении. Подробности зачем это нужно – здесь.
jqGrid и jQueryUI
Содержимое таблицы phoneBookGrid (см. JqGridPhoneBookControl.ascx) формируется с помощью jqGrid, плагина к jQuery, который берет данные из WCF-сервиса, описанного выше, посредством ajax-запроса, в формате json.
$("#phoneBookGrid").jqGrid({
url: "/_layouts/IPGG.IntegrationSystem/PhoneBookService.svc/GetAllRecordsForJqGrid",
datatype: "json",
jsonReader: gridJsonReader,
colNames: columnNames,
colModel: columns,
width: 850,
height: 460,
shrinkToFit: false,
pager: "#phoneBookPager",
rowList: [20, 50, 100, 1000],
onSelectRow: GetEmployeeDetails,
loadComplete: gridLoaded
}).navGrid("#phoneBookPager", { add: false, edit: false, del: false, search: false, refresh: true }).filterToolbar();
$("#phoneBookGrid").jqGrid("navButtonAdd", "#phoneBookPager", {
caption: "Отобразить/Скрыть столбцы",
title: "Изменить порядок столбцов",
onClickButton: function() {
$("#phoneBookGrid").jqGrid("columnChooser");
}
});
$("#employeeInfoContainer").dialog({
bgiframe: true,
modal: true,
autoOpen: false,
width: 550,
resizable: false,
close: ClearDialog,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
jqGrid принимает json-объект с определенными именами свойств, однако можно настроить jsonReader и передавать какой угодно json-объект. В нашем случае – это JqGridResult.
var gridJsonReader = {
root: "Records",
page: "CurrentPage",
total: "TotalPages",
records: "TotalRecords",
repeatitems: false,
id: "Id"
};
При щелчке по строке таблицы вызывается функция GetEmployeeDetails, которая отправляет еще один ajax-запрос к веб-сервису и отображает данные в модальном диалоге jQueryUI
function GetEmployeeDetails(id) {
$("#employeeInfoContainer").dialog("open");
$.ajax({
url: "/_layouts/IPGG.IntegrationSystem/PhoneBookService.svc/GetRecord",
data: "employeeId=" + id,
success: ProcessInfo,
error: ProcessError
});
GetImage(id);
...
}
Фотография сотрудника берется из веб-сервиса с помощью GET-запроса
function GetImage(employeeId) {
$("#employeeImage").attr("src", "/_layouts/IPGG.IntegrationSystem/PhoneBookService.svc/GetPhoto?employeeId=" + employeeId);
}
Вместо заключения
В данной статье не приведен код, реализующий доступ к данным. Могу лишь сказать, что это простая реализация паттерна Репозиторий на Linq To SQL. Для фильтрации, поиска и постраничного вывода использован интерфейс IQueryable<T>.
Как оказалось, нет ничего сложного в реализации и развертывании решений на jQuery и WCF под SharePoint.
Однако, если SharePoint работает на IIS7, то может возникнуть проблема, на решение которой мне пришлось потратить некоторое время.
После развертывания решения на production-сервере, выдавалась 404 ошибка при запросах на URL типа “~/_layouts/IPGG.IntegrationSystem/PhoneBookService.svc/GetRecord”.
Решение состоит в том, что необходимо зарегистрировать обработчник запросов для .svc. По умолчанию, в IIS7 для SharePoint-сайта этого не сделано.
