テキストボックスの値が変わったとき UpdatePanel を更新する方法

概要

この記事では、テキストボックスの値が変わったとき UpdatePanel を更新する方法について説明します。テキストボックスの値変更と UpdatePanel を関連づける方法は 2 つあります。以下では、最初に ASP.NET 内だけで処理できる方法 (AutoPostBack プロパティを利用) について説明し、次に JavaScript (onblur, onchage) を利用する方法について説明します。

蛇足ですが、 UpdatePanel の利用するとサーバ側での処理が発生します。頻繁な更新は、サーバ側の負荷を増加させるため注意してください。

AutoPostBack プロパティを設定する方法

TextBox コントロールの AutoPostBack プロパティを利用すると、 JavaScript を直接書かなくても Ajax (UpdatePanel) の機能を利用することができます。

以下はサンプルです。 aspx 側では、 TextBox コントロールと UpdatePanel コントロールを配置しています。 TextBox コントロールは、 AutoPostBack プロパティを true に設定し、 OnTextChanged イベントを処理するようにしています。また、 UpdatePanel コントロールは、結果を表示するため Label コントロールを内部に配置し、 Triggers 要素内に TextBoxSample の TextChanged イベントを設定しています。

<asp:ScriptManager ID="ScriptManagerMain" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBoxSample" runat="server" AutoPostBack="True" OnTextChanged="TextBoxSample_TextChanged"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanelSample" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        pow():
        <asp:Label ID="LabelResult" runat="server"></asp:Label>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="TextBoxSample" EventName="TextChanged" />
    </Triggers>
</asp:UpdatePanel>

以下はコードビハインド側 (サンプルは C# ですが、 VB.NET もほぼ同様) です。 UpdatePanel を使用しているため、通常のプログラムを書く場合と同様の記述を行っているだけです。 JavaScript が不要なため、簡単に Ajax の機能を利用することができます。

protected void TextBoxSample_TextChanged(object sender, EventArgs e)
{
    // テキストの内容が変更されたら計算
    CalculatePow();
}

private void CalculatePow()
{
    decimal result;

    if (decimal.TryParse(TextBoxSample.Text, out result))
        LabelResult.Text = (result * result).ToString();
    else
        LabelResult.Text = "parse error: " + TextBoxSample.Text;
}

実行すると、テキストボックスの内容が変更されるたびに、内部の値の二乗が Label に表示されます。このとき、画面が一瞬白くなることはなく、ユーザにはリアルタイムで計算が行われているように見えます。

onblur (onchange) を利用する方法

次に、 AutoPostBack プロパティ版と同様の機能を、 JavaScript の onblur (onchage) で実現したサンプルを以下に示します。クライアントサイドで行いたい処理がある場合は、 onblur などにイベントを関連づけた方が便利です。

以下は、 aspx 側です。 AutoPostBack プロパティ版と比べると、 TextBox へのイベント関連づけなどがなくなっていることがわかります。

<asp:ScriptManager ID="ScriptManagerMain" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBoxSample" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanelSample" runat="server">
    <ContentTemplate>
        pow():
        <asp:Label ID="LabelResult" runat="server"></asp:Label>
    </ContentTemplate>
</asp:UpdatePanel>

以下は、 aspx 内の JavaScript です。 script 要素内に (なければ head 要素内などに作成し) 配置してください。

function onTextBoxSampleBlur()
{
    // ここに JavaScript で実施したい処理を記述
    // ... [省略]

    // ポストバックを発生させる
    Sys.WebForms.PageRequestManager.getInstance()._doPostBack('UpdatePanelSample', '');
}

以下は、コードビハインド側です。内容は AutoPostBack プロパティ版とほぼ同様です。 JavaScript のイベントに関連づける処理と計算処理が Page_Load 内に入っています。

protected void Page_Load(object sender, EventArgs e)
{
    // onblur イベントに関連づける
    TextBoxSample.Attributes["onblur"] = "onTextBoxSampleBlur()";

    // ポストバックのたびに計算する
    CalculatePow();
}

private void CalculatePow()
{
    decimal result;

    if (decimal.TryParse(TextBoxSample.Text, out result))
        LabelResult.Text = (result * result).ToString();
    else
        LabelResult.Text = "parse error: " + TextBoxSample.Text;
}

補足 (WebMethod を利用する方法)

WebMethod を使用しても同様の処理が可能です。詳細は、 JavaScript から WebMethod を呼び出す方法を参照してください。

WebMethod を使う利点は、パフォーマンスが良くなる可能性があることです。 UpdatePanel を使用した場合は ViewState のデータがサーバに送られ処理されるのに対して、 WebMethod を使用した場合は最低限の情報のみがサーバに送られます。

UpdatePanlel を使う利点は、大部分の処理をサーバサイドロジックのみで行えるため、実装が容易になることです。 WebMethod を使用すると JavaScript の記述が必須になったり、サーバコントロールに直接アクセスできないため処理が複雑になったりします。