none
asp.net mvc上でjqueryのdialogの使い方について RRS feed

  • 質問

  • asp.net mvc3 で業務アプリケーションを構築しています。
    jqueryのdialogを使用して、もう一つの画面を表示させた場合、その画面に例えば、検索キーワード入力欄、検索ボタン、検索結果一覧を設け、その画面で検索を行うことは可能なのでしょうか。
     
    2011年11月11日 20:22

回答

  • 可能かどうかは、何をどのように「検索」するかによると思います。

    もう少し具体的に書けませんか?

    もし、全く分からないからゼロから教えてほしいということでしたら、
    掲示板では難しいと思います。

    ある程度、基本的なシナリオと、それを実現するための実装を考えて、
    問題点を整理して質問された方が解決が早いと思います。

     

    • 回答としてマーク 山本春海 2011年12月1日 7:48
    2011年11月12日 9:15
  • 解決したということなので余計なお世話かもしれませんが・・・

    > ②を使用してもモダールダイアログの実装ができること、

    以下のページのように window.open で子ウィンドウを開き、window.opener で
    親ウィンドウの DOM を取得して操作するということを考えておられるのでしょ
    うか?

    サブからメインウィンドウを操作する
    http://www.tagindex.com/javascript/window/sub_to_main.html

    そうであれば、そのページを試してみれば分かると思いますが、子ウィンドウは
    モーダルではありません。

    また、開き方によってはポップアップブロックに引っかかる場合もあります。

    そのあたりが問題であれば、やはり最初のプランどおり jQuery UI の dialog
    を使うのが正解かもしれません。

     

    • 回答の候補に設定 山本春海 2011年11月30日 8:52
    • 回答としてマーク 山本春海 2011年12月1日 7:48
    2011年11月13日 3:20

すべての返信

  • 可能かどうかは、何をどのように「検索」するかによると思います。

    もう少し具体的に書けませんか?

    もし、全く分からないからゼロから教えてほしいということでしたら、
    掲示板では難しいと思います。

    ある程度、基本的なシナリオと、それを実現するための実装を考えて、
    問題点を整理して質問された方が解決が早いと思います。

     

    • 回答としてマーク 山本春海 2011年12月1日 7:48
    2011年11月12日 9:15
  • SurferOnWww様、アドバイスありがとうございます。

    結論的には、jqueryの「dialog」でなく、違う方法で解決することができました。
    しかし、良いアドバイスをしていただいたので、下記に記載させて頂きます。


    > もう少し具体的に書けませんか?


    下記のようなものになります。
    1.最初に顧客情報を入力する「詳細画面」が表示される。。
    2.その「詳細画面」にある参照ボタンを押すと、顧客マスタの一覧リストの画面が「ポップアップ」で表示される(「ポップアップ画面」)。
    3.「ポップアップ画面」では、検索が可能で顧客情報を絞り込むことができる。
       たとえばキーワード入力する欄があり、検索ボタンを押すと顧客情報を絞り込むこと ができる。
    4.リストの中から一つの顧客のコードを選択すると、上記の「詳細画面」に顧客がコートが設定される。


    > ある程度、基本的なシナリオと、それを実現するための実装を考えて、
    >  問題点を整理して質問された方が解決が早いと思います。


    最初の質問した時、全く何もわかっておりませんでした。
    いろいろ調べたところ、上記の「2.」を行う場合には、

    ①jqueryの「dialog」を使う以外にも、
    ②javascriptの「window.open」を
    使うこともできることがわかりました。

    ②を使用してもモダールダイアログの実装ができること、
    またポップアップ画面から詳細画面に値を渡すこともわかりました。

    私は、Windowsフォームアプリの経験が長いため、モーダルダイアログをイメージ
    し、「モーダルダイアログ」というキーワードで調べておりました。
    そのため調べ方が偏っていた?ようです。

    javascript の説明で使用される用語では、
    上記の「ポップアップ画面」は「サブウィンドウ」
    上記の「詳細画面」は「親ウィンドウ」
    に該当し、これらの用語でWEB上を検索すれば、私の欲しい回答は見つけることができました。

    最初に質問したのは上記①の方法ですが、私が求めるものが実装できたので私としては解決とさせて頂きたいと思います。


    • 編集済み ホウビ 2011年11月12日 17:00
    2011年11月12日 16:53
  • 解決したということなので余計なお世話かもしれませんが・・・

    > ②を使用してもモダールダイアログの実装ができること、

    以下のページのように window.open で子ウィンドウを開き、window.opener で
    親ウィンドウの DOM を取得して操作するということを考えておられるのでしょ
    うか?

    サブからメインウィンドウを操作する
    http://www.tagindex.com/javascript/window/sub_to_main.html

    そうであれば、そのページを試してみれば分かると思いますが、子ウィンドウは
    モーダルではありません。

    また、開き方によってはポップアップブロックに引っかかる場合もあります。

    そのあたりが問題であれば、やはり最初のプランどおり jQuery UI の dialog
    を使うのが正解かもしれません。

     

    • 回答の候補に設定 山本春海 2011年11月30日 8:52
    • 回答としてマーク 山本春海 2011年12月1日 7:48
    2011年11月13日 3:20
  • > 余計なお世話かもしれませんが・・・

    とんでもないです。
    おつきあいくださり感謝いたします。

    ご指摘のHPも参照しましたが、
    下記に記載の「サブウィンドウを常に前面に表示する」を参考にしました。
    http://ntfree.4.pro.tok2.com/pscon/samjs/sub_window/subwindow.html

    上記であると、フォーカスが当たらないとモーダルダイアログのような動きにならなかったため、

    「ポップアップ画面(サブウィンドウ)」を開いた時に、検索キーワード入力欄にフォーカスを設定するようにしました。
    また「ポップアップ画面から詳細画面に値」渡すのは、Html.BeginForm等を使用しました。
    ボタンを押した時に「ポップアップ画面(サブウィンドウ)」を閉じる処理も追加しました。


    > 開き方によってはポップアップブロックに引っかかる場合もあります。


    その通りです。


    技術的には①は気になっています。
    しかし、上記3.の部分と同じような処理を作成していましたので、流用するのには②の方法が私にとっては簡単でした。
    また、上記3.に記載がもれていましたが、検索一覧リストはページング(件数が多いため)の機能も含んでいます。

    確かに、前にご指摘を頂いた

    > 可能かどうかは、何をどのように「検索」するかによると思います。

    この通りだと思います。

     

     

    2011年11月13日 7:52