iPentec.com / Doc / C# / ASP.NET

新しいウィンドウを開いてページ遷移する - ASP.NET

ASP.NETでページ遷移時に新しいWebブラウザのウィンドウを開きたい場合があります。ここではページ遷移時に新しいウィンドウを開いて遷移するコードを紹介します。

概要

新しいウィンドウを開く処理を、サーバー側で処理したいことがありますが、サーバー側では対応できないためクライアント側でJavaScriptやHTMLで対応する必要があります。

方法1:HTMLで記述する

通常のHTMLのAタグリンクでtarget="_blank"を指定します。詳しくはこちらの記事を参照してください。

補足

ASP.NETのHyperLinkコントロールを用いた場合の実装方法は「HyperLinkコントロールでリンククリック時に新しいウィンドウでリンク先を開く」の記事を参照してください。

方法2:JavaScriptを用いる

JavaScriptを用いる方法です。JavaScriptを用いるとテキストボックスの値などを遷移先のページに渡せます。

コード例

WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HtmlLink.WebForm1" %>
<!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 LinkClick() {
        var Text = document.forms.form1.TextBox1.value;
        var url = 'WebForm2.aspx?q=' + Text;
        window.open(url, null);
      }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <a href="javascript:void(0);" onclick="LinkClick()">リンク</a>
    </div>
    </form>
</body>
</html>

WebForm2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="HtmlLink.WebForm2" %><!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>
</html>

WebForm2.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace HtmlLink
{
  public partial class WebForm2 : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      Label1.Text = Request.QueryString["q"];
    }
  }
}

解説

window.open(url, null);を呼び出すことで、JavaScriptで新しいWebブラウザのウィンドウを開けます。

実行結果

HTMLを表示します。下図の画面が表示されます。

テキストボックスに文字を入力します。今回は"ペンギン100羽"を入力しました。入力後[リンク]をクリックします。

新しいタブが開き、ページが表示されます。先のページでテキストボックスに入力した文字が画面に表示されます。

補足

ASP.NETのWebコントロールを用いている場合は、OnClientClickプロパティにクリック時に実行するJavaScriptを記述します。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="HtmlLink.WebForm3" %>
<!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 LinkClick() {
        var Text = document.forms.form1.TextBox1.value;
        var url = 'WebForm2.aspx?q=' + Text;
        window.open(url, null);
      }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="LinkClick();" />
      <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="LinkClick();">LinkButton</asp:LinkButton>
    </div>
    </form>
</body>
</html>

方法3:ClientScriptManager(JavaScript)を用いる

JavaScriptを利用するため、方法2と同じですが、JavaScriptを書きだす場所をサーバー側に実装します。

コード

WebForm4.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="HtmlLink.WebForm4" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
      <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </div>
    </form>
</body>
</html>

WebForm4.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
      string url=string.Format("WebForm2.aspx?q={0:s}",TextBox1.Text);
      Type cstype = this.GetType();
      ClientScriptManager cs = Page.ClientScript;
      cs.RegisterStartupScript(cstype, "OpenNewWindow", "window.open('" + url + "', null);",true);
    }
  }
}

解説

ClientScriptManagerのRegisterStartupScript()メソッドを呼び出し、新しいウィンドウを開くJavaScriptをページ内に書きだします。ボタンクリック後のポストバックした同一ページでのコードは下記になります。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>
<form method="post" action="WebForm4.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value=".....=" />
</div>
  <div>
    <input name="TextBox1" type="text" id="TextBox1" /><br />
    <input type="submit" name="Button1" value="Button" id="Button1" />
  </div>
<div class="aspNetHidden">
  <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="....==" />
</div>

<script type="text/javascript">
//<![CDATA[
window.open('WebForm2.aspx?q=(テキストボックスの値)', null);//]]>
</script>
</form>

</body>
</html>