2015年5月31日日曜日

ASP.NET で WCF サービスを利用する

ASP.NET Web Forms で WCF サービスを作成いてデータを取得する方法を紹介します。
※ 記事の最後に動作サンプルへのリンクがあります。下記チュートリアルと併せて活用下さい。


1.WebSite の作成

まずはベースとなる WebSite を作成します。ここでは「WCFServiceTest1」という名前をつけます。













WebSite に Default.aspx を追加します。














サービスを配置するためのフォルダを生成します。












フォルダ名は「MyService」とします。ここまででサービス作成の準備完了となります。



2.サービスの作成
続いて WCF サービスそのものを作成していきます。先ほど作成した「MyService」フォルダ上を右クリックし、「追加」をクリックします。















アプリケーションテンプレートから「WCF サービス」を選択し、「MyService.svc」という名前をつけて追加します。



3.インターフェースの実装

App_Code 配下に生成されている「IMyService.cs」を開き、下記のように定義します。
MyEntity はデータモデル、IMyService インターフェース配下の GetEntity はモデルを取得するメソッド、GetEntity はデータモデルを保存するメソッドです。

[ServiceContract]
public interface IMyService
{
    //[OperationContract]
    //void DoWork();

    [OperationContract]
    MyEntity GetEntity(int id);

    [OperationContract]
    void SaveEntity(MyEntity entity);
}

[DataContract]
public class MyEntity
{
    [DataMember]
    public int ID { get; set; }

    [DataMember]
    public string Name { get; set; }
}

4.サービスの実装
続いて App_Code 配下の「MyService.cs」を開き、GetEntity メソッドと SaveEntity メソッドを実装します。

public class MyService : IMyService
{
    //public void DoWork()
    //{
    //}
    public MyEntity GetEntity(int id)
    {
        MyEntity entity = new MyEntity{ ID = id, Name = "Name " + id.ToString() };

        return entity;
    }

    public void SaveEntity(MyEntity entity)
    {
        System.Diagnostics.Debug.WriteLine("SaveEntity here...");
    }
}

ここまででサービスの準備ができました。


5.サービスの生成確認
サービスが正しく生成されるかを確認します。「MyService.svc」を右クリックし、「ブラウザで表示」を選択します。













するとブラウザに「サービスを作成しました。」という画面が表示されます。
















6.サービス参照の追加
サービスへの参照を追加して、WebSite 内から呼び出せるようにします。
「WCFServiceTest1」で右クリックし、「サービス参照」→「追加」を選択します。












「サービス参照の追加」ダイアログが表示されたら、「探索」ボタンをクリックします。
先ほど作成した「MyService」が表示されますので選択し、名前空間を確認して「OK」をクリックします。
















7.ASPX の実装
ASPX 画面にデータ取得用のボタンとデータ表示用ラベルを配置します。

<form id="form1" runat="server">
<div>
<asp:button id="Button1" onclick="Button1_Click" runat="server" text="サービスからデータ取得">
        

        <asp:label id="Label1" runat="server" text="ID:"></asp:label>
        

        <asp:label id="Label2" runat="server" text="Label"></asp:label>
        

        

        <asp:label id="Label3" runat="server" text="Name:"></asp:label>
        

        <asp:label id="Label4" runat="server" text="Label"></asp:label>

    </asp:button></div>
</form>

続いて、ボタンクリック時にサービスから取得した値をラベルに表示します。
protected void Button1_Click(object sender, EventArgs e)
{
    ServiceReference1.MyServiceClient client = new ServiceReference1.MyServiceClient();

    ServiceReference1.MyEntity entity = new ServiceReference1.MyEntity();

    entity = client.GetEntity(1);

    this.Label2.Text = entity.ID.ToString();

    this.Label4.Text = entity.Name;
}

8.アプリケーションの実行

ボタンをクリックすると・・・











サービスから取得されたデータがラベル上に表示されました。










サンプルのダウンロードはこちら
WCFServiceTest1.zip

2015年5月27日水曜日

jQuery css メソッドの使い方

jQuery の css メソッドを利用することで特定のエレメントに対してスタイリングを行うことができます。

構文:
jQuery オブジェクト.css(プロパティ名, 値(数値もしくは文字列));

第一引数には CSS のプロパティ名を、第二引数にはプロパティに割り当てる値を数値もしくは文字列で指定します。

例:
elem.css("border", "5px solid"); // 黒色 5 px の実線が elem の周りに引かれます。