iPentec.com  /  Doc  /  C#  /  ASP.NET  /  マスターページ

目次

マスターページを利用しているページにonloadイベントのJavaScriptを追加する - ASP.NET

ページにonloadイベントのJavaScriptを追加するコードを紹介します。

方法1:RegisterStartupScript()メソッドを利用する

ClientScriptManagerのRegisterStartupScript() メソッドを利用して、<body>～</body>内にスクリプトを出力します。
こちらの記事で紹介しているマスターページを利用しない場合の方法と同様です。

サンプルプログラム

UI

下図のUIを作成します。
StartUpMaster01.aspx


コードは以下です。
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
  CodeBehind="StartUpMaster01.aspx.cs" Inherits="StartupJavascriptDemo.StartUpMaster01" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  <div>コンテンツページ</div>
</asp:Content>
Site.master
マスターページも作成します。


コードは以下です。
<%@ Master Language="C#" AutoEventWireup="true" 
  CodeBehind="Site.master.cs" Inherits="StartupJavascriptDemo.Site" %>

<!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>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <div>マスターページヘッダ</div>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
    <div>マスターページフッタ</div>
</body>
</html>

コード

下記のコードを記述します。
StartUpMaster01.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace StartupJavascriptDemo
{
  public partial class StartUpMaster01 : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      ClientScriptManager cs = Page.ClientScript;
      Type csType = this.GetType();
      cs.RegisterStartupScript(csType, "onload", "<script type=\"text/javascript\">alert('ページ表示時に実行されます。');</script>");
    }
  }
}
解説
ClientScriptManagerのRegisterStartupScript()メソッドを呼び出すことで、<body>タグの直前にスクリプトを記述できます。書きだすスクリプトにはscriptタグも含めたJavaScriptのスクリプトを記述します。

実行結果

プロジェクトを実行します。ページ表示時にJavaScriptが実行され、アラートダイアログが表示されます。


[OK]ボタンをクリックしアラートダイアログを閉じるとページ内容が表示されます。

Webブラウザに返されるコード
Webブラウザには下記のHTMLが返されます。
<!DOCTYPE html>

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

</title>
</head>
<body id="masterpagebody">
    <div>マスターページヘッダ</div>
    <form method="post" action="StartUpMaster01.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="S02KE5W9sojWk5cIGW8fELsbDvHmJjWkrvWY/y0i19lQ5mrJlsVRcF/NEZsN4gOMDB+xu6M/gv72NJqIBZ7n2XwOKs5QQD1xfrS1YoHm3PA=" />
</div>

    <div>
        
  <div>コンテンツページ</div>

    </div>
    
<script type="text/javascript">alert('ページ表示時に実行されます。');</script></form>
    <div>マスターページフッタ</div>
</body>
</html>

方法2:bodyタグにIDを付与し、runat="server" に指定する

bodyタグにIDを付与し、runat="server"属性を付与すると、コード側でアクセスできます。

サンプルプログラム

UI

下図のUIを作成します。
StartUpMaster01.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="StartUpMaster02.aspx.cs" Inherits="StartupJavascriptDemo.StartUpMaster02" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  <div>コンテンツページ</div>
</asp:Content>


Site.master
マスターページも作成します。
<%@ Master Language="C#" AutoEventWireup="true" 
  CodeBehind="Site.master.cs" Inherits="StartupJavascriptDemo.Site" %>

<!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>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body id="masterpagebody" runat="server">
    <div>マスターページヘッダ</div>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
    <div>マスターページフッタ</div>
</body>
</html>


コード

下記のコードを記述します。
StartUpMaster02.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace StartupJavascriptDemo
{
  public partial class StartUpMaster02 : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      HtmlControl htmlbody = (HtmlControl)Master.FindControl("masterpagebody");
      htmlbody.Attributes.Add("onload", "alert('ページ表示時に実行されます。');");
    }
  }
}

実行結果

プロジェクトを実行します。
ページ表示時にアラートダイアログが表示されます。

[OK]ボタンをクリックするとアラートダイアログは閉じられます。
Webブラウザに返されるコード
Webブラウザには下記のHTMLが返されます。bodyタグにonload属性とJavaScriptのコードが追加できています。
<!DOCTYPE html>

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

</title>
</head>
<body id="masterpagebody" onload="alert('ページ表示時に実行されます。');">
    <div>マスターページヘッダ</div>
    <form method="post" action="StartUpMaster02.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="RuTNpxjerqHv1hdiUhLZzQnTqeAIL+8FBYiyHxqiy7ONhEB1Y7lzQ4b3s6hGTAAHOHbYDYAPbQjid7zwWp6l5WK+KNRuxprzVE6uEzcf3/04szx+6bK4XfwE5xBKqImWMpOGadbB/adDqDwzuD9047NgnojVOSc0oBz0ZQ2iyOce9Vbmk/w66xpR33V7/sLX" />
</div>

    <div>
        
  <div>コンテンツページ</div>

    </div>
    </form>
    <div>マスターページフッタ</div>
</body>
</html>
このページのキーワード
  • マスターページを利用しているページにonloadイベントのJSを追加する
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2024-01-06
作成日: 2014-09-01
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.