iPentec.com  /  Doc  /  C#  /  ASP.NET  /  ポストバック

目次

JavaScriptでASP.NET WebForm ページのポストバックをする - ASP.NET

JavaScriptでASP.NET WebForm ページのポストバックをするコードを紹介します。

概要

ASP.NET WebFormアプリケーションでJavaScriptでポストバックしたい場合があります。 この記事では、ASP.NET WebFormアプリケーションでJavaScriptのコードからポストバックする処理を紹介します。

方法

JavaScrptでポストバックするには ClientScript.GetPostBackEventReference() メソッドを利用します。

書式

ClientScript.GetPostBackEventReference([ポストバックするボタンのID], [パラメータ文字列]);

プログラム

ASP.NET WebForm アプリケーションを作成します。

コード

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JavaScriptPostBack.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>

  <script type="text/javascript">
    function buttonClick() {
      <%= ClientScript.GetPostBackEventReference(Button1, "") %>;
    }
  </script>

</head>

<body>
  <h1>JavaScriptによるポストバックのデモ</h1>

  <form id="form1" runat="server">
    <div>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <asp:Button ID="Button1" runat="server" Style="display: none;" OnClick="Button1_Click" />
      <button onclick="buttonClick();">button</button>
    </div>
  </form>
  <hr />
  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

    protected void Button1_Click(object sender, EventArgs e)
    {
      Label1.Text = TextBox1.Text;
    }
  }
}

解説

WebFormのformタグ部分のコードです。ポストバック用のASP.NETコントロールのボタン Button1 とUI用のbuttonタグのボタンの2つを配置します。 ポストバック用のASP.NETコントロールのボタンは display: none; スタイルを設定し画面には表示されない動作とします。
buttonタグのボタンはクリック時に JavaScriptの buttonClick(); 関数を呼び出します。
  <form id="form1" runat="server">
    <div>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <asp:Button ID="Button1" runat="server" Style="display: none;" OnClick="Button1_Click" />
      <button onclick="buttonClick();">button</button>
    </div>
  </form>

JavaScriptの buttonClick() 関数部分です。ClientScript.GetPostBackEventReference() のコードはサーバー側で別のコードが生成されるため、 <%= %> で囲みます。
buttonClick() 関数が呼び出されると、Button1のポストバック処理を実行します。
function buttonClick() {
  <%= ClientScript.GetPostBackEventReference(Button1, "") %>;
}

Button1のポストバックが実行されると、入力されたテキストボックスの値を画面下部のラベルに表示します。
    protected void Button1_Click(object sender, EventArgs e)
    {
      Label1.Text = TextBox1.Text;
    }

実行結果

プロジェクトを実行します。下図のページが表示されます。


テキストボックスに文字列を入力します。入力後[button]ボタンをクリックします。


クリックするとポストバックの処理が実行され、ページが切り替わり同じページが表示されます。画面下部のLabelの文字列がテキストボックスに入力した文字列になります。 ポストバック処理が実行され、Button1_Click() イベントが実行されたことが確認できます。


参考:WebFormのHTMLのコード

HTMLのソースは以下のコードになります。
ClientScript.GetPostBackEventReference() のメソッドは別のコードに置き換わっていることがわかります。
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title>

  <script type="text/javascript">
    function buttonClick() {
      __doPostBack('Button1','');
    }
  </script>

</head>

<body>
  <h1>JavaScriptによるポストバックのデモ</h1>

  <form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ugO+myVn6qp8qrDbg3fx/2K5cuyBQWUWc9Djegjbcedi8bIQr1+Kq3MhnqJ9X+CwyLsecVJ2oSgYGmofwQ73DLZYzxvwdJkHSA4ayGQ68Yc=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="Rn+hoR48JnJKCCHKexHjBD2lMfyeBAzdLn+yc7ojPM2b2e5cqw1s8NzbWh/Xnby9JgvhoANVZmBTxkjoSDLs+kwlD6IBMoEe+MjsjSQHDuoYHPBKek2gMiaMBH8J7zpN4bFGooTWJ41aWjgSPFyjEA==" />
</div>
    <div>
      <input name="TextBox1" type="text" id="TextBox1" />
      <input type="submit" name="Button1" value="" id="Button1" style="display: none;" />
      <button onclick="buttonClick();">button</button>
    </div>
  </form>
  <hr />
  <span id="Label1">Label</span>
</body>
</html>

JavaScriptからパラメーターを渡す場合

JavaScriptからパラメーターを渡す場合のコードを紹介します。

コード

以下のaspxファイルとコードを記述します。
JavaScriptPostBackArgument.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScriptPostBackArgument.aspx.cs" Inherits="JavaScriptPostBack.JavaScriptPostBackArgument" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>

  <script type="text/javascript">
    function button1_Click() {
      <%= ClientScript.GetPostBackEventReference(AspButton, "ボタン1") %>;
    }
    function button2_Click() {
      <%= ClientScript.GetPostBackEventReference(AspButton, "ボタン2") %>;
    }
  </script>


</head>
<body>
  <h1>JavaScriptによるポストバックのデモ (Argumentあり)</h1>

  <form id="form1" runat="server">
    <div>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <asp:Button ID="AspButton" runat="server" Style="display: none;" OnClick="AspButton_Click" />
      <button onclick="button1_Click();">button1</button>
      <button onclick="button2_Click();">button2</button>
    </div>
  </form>
  <hr />
  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

</body>
</html>
JavaScriptPostBackArgument.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

    protected override void Render(HtmlTextWriter writer)
    {
      // Render メソッド内でイベントの検証を登録
      ClientScript.RegisterForEventValidation(AspButton.UniqueID, "ボタン1");
      ClientScript.RegisterForEventValidation(AspButton.UniqueID, "ボタン2");
      base.Render(writer);
    }

    protected void AspButton_Click(object sender, EventArgs e)
    {
      string eventArgument = Request["__EVENTARGUMENT"];
      Label1.Text = TextBox1.Text +" Argument:"+ eventArgument;
    }


  }
}

解説

ポストバックの非表示のボタンは1つですが、JavaScriptを実行するボタンは2つ配置します。クリック時にはそれぞれ別の関数を実行します。
  <form id="form1" runat="server">
    <div>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <asp:Button ID="AspButton" runat="server" Style="display: none;" OnClick="AspButton_Click" />
      <button onclick="button1_Click();">button1</button>
      <button onclick="button2_Click();">button2</button>
    </div>
  </form>

ボタンがクリックされた際に実行する関数を2つ用意します。ClientScript.GetPostBackEventReference() メソッドを呼び出し ポストバックを実行しますが、第二引数のArgumentの値がそれぞれ異なります。
    function button1_Click() {
      <%= ClientScript.GetPostBackEventReference(AspButton, "ボタン1") %>;
    }
    function button2_Click() {
      <%= ClientScript.GetPostBackEventReference(AspButton, "ボタン2") %>;
    }

ポストバックが発生すると、ASP.NET のボタンのクリックイベントが発生します。 GetPostBackEventReferenceのArgumentの値は、Request["__EVENTARGUMENT"] により取得できます。 取得した値とテキストボックスの値をラベルに表示します。
    protected void AspButton_Click(object sender, EventArgs e)
    {
      string eventArgument = Request["__EVENTARGUMENT"];
      Label1.Text = TextBox1.Text +" Argument:"+ eventArgument;
    }

JavaScriptから渡されたArgumentの値は検証する必要があります。Renbderメソッドをオーバーライドし、ClientScript.RegisterForEventValidation メソッドで渡される値を検証します。
    protected override void Render(HtmlTextWriter writer)
    {
      // Render メソッド内でイベントの検証を登録
      ClientScript.RegisterForEventValidation(AspButton.UniqueID, "ボタン1");
      ClientScript.RegisterForEventValidation(AspButton.UniqueID, "ボタン2");
      base.Render(writer);
    }

実行結果

プロジェクトを実行し、WebFormを表示します。下図のページが表示されます。


テキストボックスに入力します。今回は「しろくまアイス」を入力します。


[button1]をクリックします。ポストバック処理が実行され、ページが切り替わりページ下部のラベルに「しろくまアイス Argument:ボタン1」が表示されます。 GetPostBackEventReferenceの第二引数の値が取得できていることがわかります。


[button2]をクリックした場合は、ポストバック後のラベルに「しろくまアイス Argument:ボタン2」が表示されます。


補足:ClientScript.RegisterForEventValidation がない場合

検証処理の ClientScript.RegisterForEventValidation() を記述しない場合はボタンをクリックしてポストバックの処理時に以下のエラーが発生します。
エラーメッセージ
無効なポストバックまたはコールバック引数です。 イベントの検証は、構成の <pages enableEventValidation="true"/>、またはページの <%@ Page EnableEventValidation="true" %> を使用して有効にされます。 セキュリティの目的により、この機能は、イベントをポストバックまたはコールバックする引数が、それらを最初に表示したサーバー コントロールから発行されていることを確認します。 データが有効であり、予期されている場合、検証のためのポストバックまたはコールバック データを登録するために ClientScriptManager.RegisterForEventValidation メソッドを使用してください。


JavaScriptからパラメーターを渡す場合 : RaisePostBackEvent を利用する方法

RaisePostBackEvent を利用して、JavaScriptからパラメーターを渡す場合の実装コード紹介します。

コード

以下のaspxファイルとコードを記述します。
JavaScriptPostBackRaisePostBack.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScriptPostBackRaisePostBack.aspx.cs" Inherits="JavaScriptPostBack.JavaScriptPostBackRaisePostBack" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
    <script type="text/javascript">
    function button1_Click() {
      <%= ClientScript.GetPostBackEventReference(Page, "ボタン1") %>;
    }
    function button2_Click() {
      <%= ClientScript.GetPostBackEventReference(Page, "ボタン2") %>;
    }
    </script>

</head>
<body>
    <h1>JavaScriptによるポストバックのデモ (RaisePostBackEvent)</h1>

  <form id="form1" runat="server">
    <div>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <button onclick="button1_Click();">button1</button>
      <button onclick="button2_Click();">button2</button>
    </div>
  </form>
  <hr />
  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

</body>
</html>
JavaScriptPostBackRaisePostBack.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Emit;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace JavaScriptPostBack
{
  public partial class JavaScriptPostBackRaisePostBack : System.Web.UI.Page, IPostBackEventHandler
  {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected override void Render(HtmlTextWriter writer)
    {
      // Render メソッド内でイベントの検証を登録
      ClientScript.RegisterForEventValidation(Page.UniqueID, "ボタン1");
      ClientScript.RegisterForEventValidation(Page.UniqueID, "ボタン2");
      base.Render(writer);
    }


    public void RaisePostBackEvent(string eventArgument)
    {
      Label1.Text = TextBox1.Text + " argument: " + eventArgument;
    }

  }
}

解説

RaisePostBackEventを利用する場合は、ASP.NETのポストバックのぼタンは使用しません。JavaScriptを実行するボタン2つのみを配置します。 クリック時にはそれぞれ別の関数を実行します。
  <form id="form1" runat="server">
    <div>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <button onclick="button1_Click();">button1</button>
      <button onclick="button2_Click();">button2</button>
    </div>
  </form>

ボタンがクリックされた際に実行する関数を2つ用意します。
先のボタンを使用した実装の場合は、GetPostBackEventReference メソッドの第一に引数に、AspButton を与えていますが、 RaisePostBackEventを利用する場合はメソッドの第一に引数に、Page を与えます。
    function button1_Click() {
      <%= ClientScript.GetPostBackEventReference(Page, "ボタン1") %>;
    }
    function button2_Click() {
      <%= ClientScript.GetPostBackEventReference(Page, "ボタン2") %>;
    }

ページに対するポストバックが発生すると、RaisePostBackEvent イベントが発生します。 GetPostBackEventReferenceのArgumentの値は、RaisePostBackEvent メソッドの第一引数で取得できます。 取得した値とテキストボックスの値をラベルに表示します。
  public void RaisePostBackEvent(string eventArgument)
  {
    Label1.Text = TextBox1.Text + " argument: " + eventArgument;
  }

JavaScriptから渡されたArgumentの値は検証する必要があります。Renbderメソッドをオーバーライドし、ClientScript.RegisterForEventValidation メソッドで渡される値を検証します。 RegisterForEventValidationメソッドの第一引数は Page.UniqueID とします。
    protected override void Render(HtmlTextWriter writer)
    {
      // Render メソッド内でイベントの検証を登録
      ClientScript.RegisterForEventValidation(Page.UniqueID, "ボタン1");
      ClientScript.RegisterForEventValidation(Page.UniqueID, "ボタン2");
      base.Render(writer);
    }

実行結果

プロジェクトを実行しWebFormのページを表示します。下図のページが表示されます。


テキストボックスに文字列を入力します。


[button1]をクリックします。ポストバックが実行され、ページが切り替わり同じページが表示され、ページ下部のラベルに 「(テキストボックスに入力した文字列) anrgument:ボタン1」の文字列が表示されます。


[button1]をクリックした場合は、ポストバック後にページ下部のラベルに 「(テキストボックスに入力した文字列) anrgument:ボタン2」の文字列が表示されます。


JavaScriptでASP.NET WebForm ページのポストバックができました。
このページのキーワード
  • JSでASP.NET WebForm ページのポストバックをする
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

掲載日: 2013-05-30
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.