none
親画面と子画面の連携で、子画面から取得した値を親画面のテキストボックスへ貼り付けることに成功、親画面をポストバックさせたいが... RRS feed

  • 質問

  • Webフォームのシステムを構築中(VisualStudio2012、VB.NET)です。親画面上のテキストボックス横にイメージボタンを配置し、こちらを押すと子画面を開き、そちらでは親画面から指定されている品名コードに合致する在庫明細(ロット明細)をGridViewに表示。このGridViewは明細に選択ボタンが配置されていて、これを押下された明細のロット№が親画面イメージボタン横のテキストボックスへ戻ってくる(格納する)、ということを達成済みです。

    正直、私はJavaScriptに関して未知といって過言でありませんので、ネット上の皆様のお力添えでここまで対応できています。(分かっていないので強引な対応策になっているかも知れません)

    今回お問い合わせしましたのは、その親画面にロット№が格納されたら、予め組見込んだ当該テキストボックスのテキストチェンジイベントを動作させたい、という解決策ご教示のお願いです。

    ロット№が得られたことで、使用期限や当該ロット№の存在箇所(全国に点在する保管場所コード)が特定できますから、そのイベント内で、(親画面の)ロット№横のテキストボックス・ドロップダウンリストに取得情報を格納する、というコーディングがなされています。

    現在、子画面から親画面側のテキストボックスへ値が戻ると、ポストバックが働きませんので、テキストチェンジイベントも動作しません。これをどうにかしたいです。

    【現仕様のポイントを以下に記載します】

    親画面イメージボタンのPostBackURLプロパティに子画面のUrlを設定(.aspx)、但し、aspx.vbの中で当該イメージボタンに関しImageButtonXX.OnClientClick = String.Format("onImageButtonClick('{0}', '{1}')", TB_ITEMCD.ClientID, TB_Lot.ClientID)との記述もしている。(妙だと少々思う)

    子画面のGiridViewに表示する内容(キー)は、Page.PreviousPage.FindControl("TB_ITEMCD")の記述を子画面側でしている(.aspx.vb)。またGridViewに表示された明細が選択され動作するSelectedIndexChangedイベントも以下のように記述

    Dim script As String = String.Format("<script type='text/javascript'>closeWindow('{0}');" & Chr(60) & "/script>", RTrim(GridView1.SelectedRow.Cells(1).Text))

    Me.ClientScript.RegisterStartupScript(Me.GetType(), "close", script)

    子画面の.aspx末端部分には

    <script type="text/javascript">
    function closeWindow(str) {
    window.opener.setText4(str);
    window.close();
    }
    </script>

    の記述。

    親画面の.aspx末端部分には

    function setText4(str) {
        document.getElementById(textBoxId4).value = str;
    //doPostBack();    「 実行時エラー: オブジェクトを指定してください。」のエラーになるのでコメントした
    }

    function onImageButtonClick(tb1id, tb2id) {

        var tb1 = window.document.getElementById(tb1id);
        var tb2 = window.document.getElementById(tb2id);
        textBoxId4 = tb2id;

        window.document.forms[0].target = '_blank';
        setTimeout(function () { window.document.forms[0].target = ''; }, 500);

        setTimeout(function () {
            window.document.forms[0].target = '';
            window.document.forms[0].action = '親画面.aspx';
        }, 500);
    }

    の記述がある

    子画面から親画面へ値が戻ったあと、ポストバックをしないまでも、該当テキストボックスのテキストチェンジイベントを動作させたいのですが、解決策はありますでしょうか? そもそも子画面の呼び出し方から変える、という解決策でも構いませんので、どなたか対応策をご教示頂けませんでしょうか、何卒よろしくお願い申し上げます。



    • 編集済み saya24 2013年2月19日 5:09
    • 移動 佐伯玲 2013年2月20日 0:22 より適切なカテゴリへ
    2013年2月19日 5:06

回答

  • > 現在、子画面から親画面側のテキストボックスへ値が戻ると、ポストバックが
    > 働きませんので、テキストチェンジイベントも動作しません。これをどうにか
    > したいです。

    子画面の GridView の選択ボタンで、クライアントスクリプトによって、親画面 (window.opener) からテキストボックスの DOM を探して、それの value 属性にロットNo.を書き込んでいると想像しています。

    であれば、そのスクリプトに続けて、window.opener の form を探して、それを submit すれば親画面の Page をポストバックすることは可能です。実装例は以下のページを見てください。

    window.opener を使って PostBack
    http://surferonwww.info/BlogEngine/post/2010/11/04/PostBack-operation-using-window-opener.aspx

    ただし、クロスページポストバックとか普通でないことを色々やっているようなので、単純にそれだけでうまくいくかどうかはわかりません。親画面の Page をポストバックさえすれば問題が解決するのか、事前に確認してください。 

    親子を別 Page にして同時表示するのは、制御が複雑になりますし、ユーザーに親子画面を同時に操作されて想定外の好ましからざる副作用が出といった問題もありますので、止めた方がいいと思います。なので、

    > そもそも子画面の呼び出し方から変える、という解決策でも構いませんので、

    という方向で、ASP.NET Ajax Control Toolkit の ModalPopupExtender を子画面として使うことをお勧めします。

    ModalPopup Demonstration
    http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

    同一 Page に TextBox, ImageButton, DropDownList, GridView を実装して操作することを考えてみてください。GridView が別画面に表示されないという点を除いては、やりたいことは簡単に実現できますよね。

    ImageButton クリックでポストバックして GridView を表示 ⇒ GirdView 上の選択ボタンクリックでポストバックし TextBox にロットNo. を表示すると同時に DropDownList に必要な情報を表示・・・これなら簡単に実装できるはずです。

    その Page に ModalPopup を加えて、GridView を ModalPopup で表示できるようにすれば、見かけは親子の 2 画面になります。しかもモーダルなので、ユーザーに親子画面を同時に操作されて想定外の好ましからざる副作用が出るといった問題を避けることもできます。

    #適切なフォーラムを選んでスレッドを立ててください。ここ「Visual Studio 共通フォーラム」は書いてあるとおり "Visual Studio IDE など言語に依存しない共通の話題" のためのものです。質問内容からは ASP.NET の方が適当です。

    #__doPostBack をプログラマがコーディングに含めて直接使うのはお勧めできません。理由は下記ページ参照。

    __doPostBack を使ってはいけません
    http://surferonwww.info/BlogEngine/post/2012/04/21/How-to-use-GetPostBackEventReference-and-RaisePostBackEvent-methods.aspx

    #VWD Express のフォーラムに質問者さんが立てたスレッドが放置状態です。ご自分が立てたスレッドは、最後までフォローしてください。



    • 編集済み SurferOnWww 2013年2月19日 13:18 誤字訂正
    • 回答としてマーク saya24 2013年2月25日 14:26
    2013年2月19日 13:16

すべての返信

  • 検索しただけで検証していませんし、他に良い方法があるかもしれませんが・・・

    Force server TextChanged event from javascript
    http://stackoverflow.com/questions/12103740/force-server-textchanged-event-from-javascript


    ★良い回答には回答済みマークを付けよう! わんくま同盟 MVP - Visual C# http://d.hatena.ne.jp/trapemiya/

    2013年2月19日 8:46
    モデレータ
  • > 現在、子画面から親画面側のテキストボックスへ値が戻ると、ポストバックが
    > 働きませんので、テキストチェンジイベントも動作しません。これをどうにか
    > したいです。

    子画面の GridView の選択ボタンで、クライアントスクリプトによって、親画面 (window.opener) からテキストボックスの DOM を探して、それの value 属性にロットNo.を書き込んでいると想像しています。

    であれば、そのスクリプトに続けて、window.opener の form を探して、それを submit すれば親画面の Page をポストバックすることは可能です。実装例は以下のページを見てください。

    window.opener を使って PostBack
    http://surferonwww.info/BlogEngine/post/2010/11/04/PostBack-operation-using-window-opener.aspx

    ただし、クロスページポストバックとか普通でないことを色々やっているようなので、単純にそれだけでうまくいくかどうかはわかりません。親画面の Page をポストバックさえすれば問題が解決するのか、事前に確認してください。 

    親子を別 Page にして同時表示するのは、制御が複雑になりますし、ユーザーに親子画面を同時に操作されて想定外の好ましからざる副作用が出といった問題もありますので、止めた方がいいと思います。なので、

    > そもそも子画面の呼び出し方から変える、という解決策でも構いませんので、

    という方向で、ASP.NET Ajax Control Toolkit の ModalPopupExtender を子画面として使うことをお勧めします。

    ModalPopup Demonstration
    http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

    同一 Page に TextBox, ImageButton, DropDownList, GridView を実装して操作することを考えてみてください。GridView が別画面に表示されないという点を除いては、やりたいことは簡単に実現できますよね。

    ImageButton クリックでポストバックして GridView を表示 ⇒ GirdView 上の選択ボタンクリックでポストバックし TextBox にロットNo. を表示すると同時に DropDownList に必要な情報を表示・・・これなら簡単に実装できるはずです。

    その Page に ModalPopup を加えて、GridView を ModalPopup で表示できるようにすれば、見かけは親子の 2 画面になります。しかもモーダルなので、ユーザーに親子画面を同時に操作されて想定外の好ましからざる副作用が出るといった問題を避けることもできます。

    #適切なフォーラムを選んでスレッドを立ててください。ここ「Visual Studio 共通フォーラム」は書いてあるとおり "Visual Studio IDE など言語に依存しない共通の話題" のためのものです。質問内容からは ASP.NET の方が適当です。

    #__doPostBack をプログラマがコーディングに含めて直接使うのはお勧めできません。理由は下記ページ参照。

    __doPostBack を使ってはいけません
    http://surferonwww.info/BlogEngine/post/2012/04/21/How-to-use-GetPostBackEventReference-and-RaisePostBackEvent-methods.aspx

    #VWD Express のフォーラムに質問者さんが立てたスレッドが放置状態です。ご自分が立てたスレッドは、最後までフォローしてください。



    • 編集済み SurferOnWww 2013年2月19日 13:18 誤字訂正
    • 回答としてマーク saya24 2013年2月25日 14:26
    2013年2月19日 13:16
  • こんにちは、マブ さん
    フォーラムオペレータの佐伯 玲 です。

    SurferOnWww さんのご指摘にある通り「ASP.NET」フォーラムが適切かと思いますのでスレッドのカテゴリを移動させていただきますね。

    宜しくお願い致します。
    __________________________
    日本マイクロソフト株式会社 フォーラム オペレータ 佐伯 玲

    2013年2月20日 0:21
  • 佐伯様

    了解致しました、いつもご支援をありがとうございます。

    2013年2月21日 13:57
  • SuferOnWww様

    >ユーザーに親子画面を同時に操作されて想定外の好ましからざる副作用が出といった問題もありますので

    まさに、そのとおりで心配していたところです。ということで、Ajax Control Toolkit の ModalPopupExtender に興味が惹かれました。

    現在自宅で、その機能のイメージが今一つ沸いてきませんが、明日デスクのVisualStudio2012内ツールボックスに当該Toolkitが現われていることをただ祈るばかり。確かインストールしたと思ったんですが....。

    (デスクにインストールされていて、移行先本番サーバーに入っていなかったら、また厄介。周囲が入れさせてくれないかも)

    明日また投稿します。

    2013年2月21日 14:13
  • SuferOnWww様

    ご支援をありがとうございます。ここ数日の沈黙は文献をあさり、ModalPopUpExtenderの採用に手を焼いていたためでした。もう少し工夫が必要なのでご教示を頂けないででしょうか?

    従来子画面を呼出していた親画面にパネルを配置し、子画面に配置されていたGridViewを移植。親画面のあるイメージボタンをTargetIDとしたModalPopUpを組みこみ、このパネルをイメージボタン押下と同時に画面へ現す、こんな流れを達成しました。GridView単体の表示はOKになった、ということです。

    子画面として呼び出されるパネルのGirdViewは、選択ボタンを保有していますから(ロット明細)、こちらで選択された明細の一列目(ロット№)の内容を 呼出元画面のテキストボックス(押下されたイメージボタンのすぐ横)へ戻したいというのが希望です...

    ①呼出元のテキストボックスへ選択した明細の一列目を戻す方法は どうすれば良いでしょうか、OkControlID、OnCancelScript、OnOkScriptというプロパティがあるものの?です。GridView上の選択ボタンを押下すると、パネル(GridView)は閉じられます。OnCancelScriptに何も定義していませんが。

    初歩的なことを尋ねているかも知れませんが、よろしくお願い致します。

    最初はExtenderをフォームに定義する方法も分からず、思考錯誤しましたが、CSSでBackGroundをmodalにするまでは なんとかできました。

    2013年2月25日 8:33
  • > 呼出元のテキストボックスへ選択した明細の一列目を戻す方法は ど
    > うすれば良いでしょうか

    ModalPopup はとりあえず使わないで、前に書きました、以下のことはできているのでしょうか?

    > 同一 Page に TextBox, ImageButton, DropDownList, GridView を実装
    > して操作することを考えてみてください。GridView が別画面に表示さ
    > れないという点を除いては、やりたいことは簡単に実現できますよね。
    >
    > ImageButton クリックでポストバックして GridView を表示 ⇒ GirdView
    > 上の選択ボタンクリックでポストバックし TextBox にロットNo. を表示
    > すると同時に DropDownList に必要な情報を表示・・・これなら簡単に
    > 実装できるはずです。

    これができてから、ModalPopup をどのように使うか考えることをお勧めします。

     

    2013年2月25日 11:21
  • SuferOnWww様

    いつもありがとうございます。

    おっしゃられることを実装して気がつきました。(モーダルポップアップの外=当該画面_直にGridViewを貼り付けて)

    GridViewのSelectedChangeイベントで得た内容を該当テキストボックスへ 内容を格納したところで当該テキストボックスのTextChangeイベントは働かないのですね。私はこれに気が付いていませんでした。SuferOnWwwさんのご察しのとおりです。

    またもう一つ気が付いた点は...

    サーバーにポストしてロット明細を得てくる動作を達成しつつ、また別のポストに頼り、該当テキストボックスの補足情報を得ようとしていた私のあさはかさです。

    当該テキストボックスのTextChangeイベントの中身(他DropDownListに関係する補足情報=保管場所コード)を収める動作を偶然サブルーチン化していたので、GridViewからロット№を格納するSelectedChangeイベントに このルーチンをコールすることで解決に至れました。

    ということは、モーダル内に収めたGridViewから同じことをやれば うまくいくのかな??

    私の方向性はあっているのでしょうか? 一先ずやってみます。

    2013年2月25日 13:31
  • > 私の方向性はあっているのでしょうか?

    あっていると思います。もうちょっとなので頑張ってください。

    2013年2月25日 14:04
  • SuferOnWww様

    お陰様で本件無事解決に至れました、ありがとうございます。今回ModalPopUpExtenderの存在を教えてくださったのは本当にありがたかったです。

    パネルに選択機能付きのGridViewのみを配置していたので、キャンセルボタンの配置を忘れておりました。一先ずボタンを配置し、如何にしてこれが押下された際のパネルクローズのスクリプトを書けばいいだろう?と頭を悩ましていましたが、何も書く必要はなかったのですね。ちょっと 以外

    また別の機会でご支援頂けましたら幸いです。

    2013年2月25日 14:36