QA@IT

ASP.net showModalDialog + UpdatePanel

7830 PV

お世話になります、初めて質問させていただきます。
現在、VisualStudio2010 を使用し、APS.net C# アプリを開発しております。
その中で、モーダルダイアログを表示しなければならない場面が出てきました。
そこで、JavaScriptで[showModalDialog]を使用し、実現しようと考えました。

新規のプロジェクトを作成し、簡単なサンプルプログラムを作ったところ、うまく動作しました。
しかし、AJAX Control Toolkit の UpdatePanel 内に配置した Button から
同様のJavaScriptを実行したところ、うまく動作しません。

UpdatePanel内では動作しないのでしょうか。
また、実現方法はありませんでしょうか。

よろしくお願いいたします。

下記、コードです

========================================================================================

test.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="WUSoundCheck.test2" MasterPageFile="~/Site.master" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

    <script type="text/javascript" src="/Scripts/JScript1.js"></script>

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>

</asp:Content>
test.aspx.cs

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

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

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = "showModal('" + TextBox1.ClientID + "', '" + "modal.htm?id=" + TextBox1.Text + "'); setData('" + TextBox1.Text + "'); return false;";
            String scriptString = "<script language='javascript'>window.onload=function(){showModal('" + TextBox1.ClientID + "', '" + "modal.htm?id=" + TextBox1.Text + "'); setData('" + TextBox1.Text + "'); return false;}" + "</script>";
            Page.ClientScript.RegisterClientScriptBlock(GetType(), "CreateModalDialog", scriptString);
        }
    }
}
/Scripts/JScript1.js

var SampleClassData = function (name) {
    this.name = name;
}

function showModal(targetID, url) {
    var textObj = document.getElementById(targetID);
    var textValue = textObj.value;
    if (SampleClassData != null) {
        SampleClassData.name = textValue;
    } else {
        SampleClassData = new SampleClassData(textValue);
    }

    window.dialogArguments = SampleClassData;
    window.showModalDialog(
        url,
        window,
        "dialogWidth=400px;dialogHeight=300px");
}
function init(targetID) {
    var args = window.dialogArguments.dialogArguments;
    SampleClassData = args;

    var textObj = document.getElementById(targetID);
    textObj.value = SampleClassData.name;
}

function closeModal(targetID) {
    var textObj = document.getElementById(targetID);
    SampleClassData.name = textObj.value;
    self.close();
}

function setData(targetID) {
    var textObj = document.getElementById(targetID);

    if (SampleClassData != null && SampleClassData.name != null) {
        textObj.value = SampleClassData.name;
    }
}
  • AJAX Control Toolkit の ModalPopup を使ってはいかがですか?(注:UpdatePanel は Ajax Control Toolkit には含まれません) -
  • UpdatePanelはAjaxControlToolkitではなかったのですね、失礼、、、

    ModalPopupExtenderを考えましたが、今回モーダルウィンドウ内にFlashを表示しようとしております。
    ModalPopupExtenderを使用した場合、Flashがうまく表示されませんでした。
    そのため、他の方法としてshowModalDialogの使用を検討した次第です。
    -
  • showModalDialog は問題が多く使うべきでなないと思うのですが。ご存知かもしれませんが、「showModalDialog」「問題」などをキーワードにググって見てください。ModalPopupExtender がダメなら jQuery UI の Dialog など他の手段を使ってみるとかは検討されたのでしょうか?
    -
  • ところで、そもそも、どのような目的で UpdatePanel を使おうとしているのですか。使い方が間違っているような気がしますが。 -
  • ありがとうございます。
    jQueryUIのDialogを調べてみようと思います。

    UpdatePanel内にGridViewを配置し、DataBind時にGridView部分のみ画面更新が起きるようにしております。
    今回のModalDialogも、GridView内のTemplateFieldに配置したボタンから表示したいと考えております。
    -
  • UpdatePanel を使うと Web サーバーから帰ってくるのは UpdatePanel の中身と ViewState だけになるはずです。RegisterClientScriptBlock で登録しようとしているスクリプトはレンダリングされないので ModalDialog が出ないのでは? -
  • 上のコメントの件(UpdatePanel を使うと RegisterClientScriptBlock で登録しようとしているスクリプトはレンダリングされない)を確認してみましたがその通りでした。ModalPopupExtender でも jQuery UI Dialog でも同様な形で UpdatePanel を使うとダメです。 -
  • ついでながら・・・ Literal などを使って UpdatePanel 内にスクリプトを書き込むようなことをしても、たぶんダメでしょう。ブラウザがそれを認識・実行しないと思います。 -
  • では、どうすれば UpdatePanel 内のボタンをクリックして UpdatePanel 内を非同期更新すると共に、スクリプトを走らせて ModalDialog を表示するかですが、回答欄意に案を書いておきました。 -

回答

どうすれば UpdatePanel 内のボタンをクリックして UpdatePanel 内を非同期更新すると共に、スクリプトを走らせて ModalDialog を表示するかですが、以下の案があります。

ScriptManager と UpdatePanel コントロールを使用しての非同期ポストバックは、内部で XMLHttpRequest オブジェクトを呼び出す PageRequestManager クライアントオブジェクトが関係しています。

PageRequestManager が提供している initializeRequest, beginRequest, pageLoading, pageLoaded, endRequest イベントを利用して、開発者が部分ページ更新のリクエストとレスポンスの処理をカスタマイズできます。詳しくは以下の MSDN ライブラリを参照してください。

ASP.NET PageRequestManager クラスの概要
http://msdn.microsoft.com/ja-jp/library/bb386571(v=VS.90).aspx

PageRequestManager のイベントの処理
http://msdn.microsoft.com/ja-jp/library/bb398976(VS.90).aspx

例えば、endRequest イベントを利用してスクリプトを走らせ ModalDialog を表示することができます。以下のような感じです。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Button1 clicked.";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
    //<![CDATA[
        function pageLoad(sender, args) {
            if (args.get_isPartialLoad() === false) {
                var manager = Sys.WebForms.PageRequestManager.getInstance();
                manager.add_endRequest(OnEndRequest);
            }
        }

        // ここで ModalDialog を表示(簡略化のため alert で代用)
        function OnEndRequest(sender, args) {
            alert('Button1 clicked');
        }
    //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server">
            </asp:TextBox>
            <asp:Label ID="Label1" runat="server" Text="Label">
            </asp:Label>
            <asp:Button ID="Button1" runat="server" Text="Button" 
                OnClick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>
編集 履歴 (0)
  • なるほど、こんなやり方もあるのですね。
    なんとか解決しました!
    今回は本当にありがとうございました、助かりました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。