はじめに
SharePoint Server 2007上に構築された新しいINGG SB RAS Webサイトの立ち上げの一環として、従業員の電話帳の新しいバージョンを開発することが決定されました。 クライアント側では、従業員に関する詳細情報を表示するために、従業員テーブルとjQueryUIの要素としてjqGridが選択されました。 クライアントパーツは、WCFに実装されたRESTful Webサービスからデータを受信します。WCFは、SharePointサイトに直接展開されます。
何が起こったのかの写真：
WCFサービスとPhoneBookWebpart
従業員の参照は、SharePointサイトのWebパーツページにWebパーツとして表示され、その内容は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);
}
}
}
* This source code was highlighted with Source Code Highlighter .
JqGridPhoneBookControl.ascxコントロールには、非表示の<input>タグの値を除いて、実際にはサーバーコードが含まれていません。これにより、初期フィルタリングのユニット番号がWebパーツのプロパティを介して送信されます。
< input type ="hidden" id ="divisionNumberFromWebpart" value ='<%=DivisionNumber %>' />
< table id ="phoneBookGrid" ></ table >
< div id ="phoneBookPager" ></ div >
< div id ="employeeInfoContainer" >
...
</ div >
* This source code was highlighted with Source Code Highlighter .
データサービスには次のインターフェイスがあります。
[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);
}
* This source code was highlighted with Source Code Highlighter .
JqGridResult -GetAllRecordsForJqGridメソッドによって返され、 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 ; }
}
* This source code was highlighted with Source Code Highlighter .
サービスコードは、SharePointのwsp-solutionの他のアセンブリと共にGACに展開され、Webサービス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 >
* This source code was highlighted with Source Code Highlighter .
SharePointアプリケーションでWCFサービスが正しく機能するには、 SPWCFSupportをインストールするか、ソリューションに同様のコードを実装する必要があります。 これが必要な理由の詳細はこちらです。
jqGridおよびjQueryUI
phoneBookGridテーブル（ JqGridPhoneBookControl.ascxを参照）のコンテンツは、json形式のajaxリクエストを使用して上記のWCFサービスからデータを取得するjQueryプラグインを使用して生成されます。
$( "#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' );
}
}
});
* This source code was highlighted with Source Code Highlighter .
jqGridは特定のプロパティ名を持つjsonオブジェクトを受け入れますが、 jsonReaderを構成して任意のjsonオブジェクトを渡すことができます。 私たちの場合、これはJqGridResultです。
var gridJsonReader = {
root: "Records" ,
page: "CurrentPage" ,
total: "TotalPages" ,
records: "TotalRecords" ,
repeatitems: false ,
id: "Id"
};
* This source code was highlighted with Source Code Highlighter .
テーブルの行をクリックすると、GetEmployeeDetails関数が呼び出され、Webサービスに別の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);
...
}
* This source code was highlighted with Source Code Highlighter .
従業員の写真は、GETリクエストを使用してWebサービスから取得されます。
function GetImage(employeeId) {
$( "#employeeImage" ).attr( "src" , "/_layouts/IPGG.IntegrationSystem/PhoneBookService.svc/GetPhoto?employeeId=" + employeeId);
}
* This source code was highlighted with Source Code Highlighter .
結論の代わりに
この記事では、データへのアクセスを実装するコードは提供していません。 これは、 Linq To SQLの Repositoryパターンの単純な実装であるとしか言えません。 IQueryable <T>インターフェイスは、フィルタリング、検索、およびページネーションに使用されます。
結局のところ 、 jQueryおよびWCF for SharePointでソリューションを実装および展開するのに複雑なことはありません。
ただし、 SharePointがIIS7で実行されている場合は、解決に時間がかかる問題がある可能性があります。
ソリューションを運用サーバーに展開した後、「 〜/ _layouts / IPGG.IntegrationSystem / PhoneBookService.svc / GetRecord 」などのURLを要求すると、404エラーが発行されました。
解決策は、.svcの要求ハンドラーを登録することです。 デフォルトでは、これはSharePointサイトのIIS7では行われません。
PS Habryuzer Atreides07とAtvに、Habrの開発にご協力いただきありがとうございます。
UPD： Web開発ブログに移動しました。
UPD2：ブログに投稿する