「クライアントコールバック」の編集履歴(バックアップ)一覧に戻る

クライアントコールバック - (2008/05/02 (金) 12:27:47) のソース

// 現在のページ名
*&this_page() 

**概要
ASP.NETにおいて、クライアントサイドの処理⇒サーバーサイドの処理⇒クライアントサイドの処理、という本来ならば画面の再描画が必要な処理手順を、画面の再描画なしで行う方法。

これを、「クライアントコールバック」と呼ぶ。らしい。

-[[コールバック (情報工学) - Wikipedia>>http://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%BC%E3%83%AB%E3%83%90%E3%83%83%E3%82%AF_(%E6%83%85%E5%A0%B1%E5%B7%A5%E5%AD%A6)]]

***参照
-[[ICallbackEventHandler インターフェイス (System.Web.UI)>>http://msdn.microsoft.com/ja-jp/library/system.web.ui.icallbackeventhandler(VS.80).aspx]]

***参考
-[[検証付きクライアント コールバックの実装例>>http://msdn.microsoft.com/ja-jp/library/ms366515(VS.80).aspx]]
-[[ICallbackEventHandler利用時のエラーについて - MSDN フォーラム>>http://forums.microsoft.com/MSDN-JA/ShowPost.aspx?PostID=1192966&SiteID=7]]
-[[ASP.NET Web ページでポストバックせずにクライアント コールバックを実装する>>http://msdn.microsoft.com/ja-jp/library/ms178208(VS.80).aspx]]

***元ネタ
-[[クライアント コールバックの実装例 (C#)>>http://msdn.microsoft.com/ja-jp/library/ms178210.aspx]]
-[[「ASP.NET 2.0」クライアントコールバックのサンプル>>http://blogs.sqlpassj.org/mitsugi/archive/2006/01/17/15833.aspx]]

**前提条件
-[[新しいwebサイトの作成]]

**手順
コールバックを実装したwebユーザーコントロール(ascx)を、default.aspxに設置する。
具体的には、以下のソースをコピーして実行。

default.aspx
#highlight(linenumber,html){{
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>クライアントコールバック - C#(ASP.NET V2.0)</title>
</head>
<body>
    <form id="frmMain" runat="server">
    <div>
        <uc1:WebUserControl ID="WebUserControl1" runat="server" />
    </div>
    </form>
</body>
</html>
}}

default.aspx
#highlight(linenumber,csharp){{
using System;
using System.Web.UI;

public partial class _Default : System.Web.UI.Page
{
    void Page_Load(object sender, EventArgs e)
    {
    }
}
}}

WebUserControl.ascx
#highlight(linenumber,html){{
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<script type="text/javascript">
    <!--
        /// <summary>
        /// コールバックを発生させるCallServer()を呼ぶ為のクライアントスクリプト
        /// </summary>
        function LookUpStock()
        {
            var lb = document.getElementById("<%= this.lbStock.ClientID %>");
            var product = lb.options[lb.selectedIndex].text;
            CallServer(product, "");
        }
        
        /// <summary>
        /// コールバックの結果を受け取るクライアントスクリプト
        /// </summary>
        /// <param name="arg"></param>
        /// <param name="context"></param>
        function ReceiveServerData(arg, context)
        {
            Results.innerText = arg;
        }
    -->
</script>
<div>
  <asp:ListBox ID="lbStock" runat="server"></asp:ListBox>
  <br />
  <br />
  <button onclick="LookUpStock();">Look Up Stock</button>
  <br />
  <br />
  Items in stock: <span id="Results"></span>
  <br />
</div>
}}

WebUserControl.ascx.cs
#highlight(linenumber,csharp){{
using System;
using System.Web.UI;
using System.Collections.Specialized;

public partial class WebUserControl : System.Web.UI.UserControl, System.Web.UI.ICallbackEventHandler
{
    private string returnValue;
    private ListDictionary catalog;

    protected void Page_Load(object sender, EventArgs e)
    {
        /// <summary>
        /// コールバックを発生させるクライアントスクリプト「CallServer」の定義。
        /// CallServerの実体は、ClientScriptManagerクラスによって動的に生成される。
        /// </summary>
        ClientScriptManager clientScriptManager = (ClientScriptManager)Page.ClientScript;
        string cbReference = clientScriptManager.GetCallbackEventReference(this, "arg", "ReceiveServerData", "");
        string callbackScript = "function CallServer(arg, context) {" + cbReference + "; }";
        clientScriptManager.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);

        // リストボックス
        this.catalog = new ListDictionary();
        this.catalog.Add("monitor", 12);
        this.catalog.Add("laptop", 10);
        this.catalog.Add("keyboard", 23);
        this.catalog.Add("mouse", 17);
        this.lbStock.DataSource = this.catalog;
        this.lbStock.DataTextField = "key";
        this.lbStock.DataBind();
        this.lbStock.SelectedIndex = 0;
    }

    #region ICallbackEventHandler メンバ

    /// <summary>
    /// コールバックが実行される際に呼ばれるメソッド
    /// </summary>
    /// <param name="eventArgument">クライアントサイドからの引数</param>
    public void RaiseCallbackEvent(string eventArgument)
    {
        if (this.catalog[eventArgument] == null)
        {
            this.returnValue = "-1";
        }
        else
        {
            this.returnValue = this.catalog[eventArgument].ToString();
        }
    }

    /// <summary>
    /// コールバックの実行後、呼ばれるメソッド。
    /// 戻り値がクライアントサイドに渡される。
    /// </summary>
    /// <returns>クライアントサイドに引き渡す値</returns>
    public string GetCallbackResult()
    {
        return this.returnValue;
    }

    #endregion
}
}}

&img(5.jpg)
記事メニュー
ウィキ募集バナー