ASP.NET MVCでFancyboxを使いたい

2012/09/29 13:24

このQ&Aのポイント

ASP.NET MVCでサイトを構築中の際、Fancyboxを使用する方法について苦戦しています。
具体的には、フォーム内でサブウィンドウを開いて補足的な入力を行いたいのですが、どのように実装すれば良いか分かりません。
Fancyboxを使用して動的にフォームを表示し、入力値を保存する方法についての参考意見を求めています。

ASP.NET MVCでFancyboxを使いたい

いつも大変お世話になっています。今、ASP.NET MVCでサイトを構築中です。苦戦してます。。中に入力フォームがあり、その中でサブウィンドウ的に入力ウィンドウを開いて、補足的な入力を行う仕様になっています。普通なら、別の入力画面に遷移させるのですが、あまりにも入力項目が少ないため、遷移はさせたくなく、また、別ウィンドウもポップアップ対策などあって採用できません。そこで、ヘルプウィンドウなどで使用している「Fancybox」を使いたいのですが、ASP.NETのプログラムサンプルがなく、大変に苦戦しております。 http://fancybox.net どなたか、参考意見だけでも拝聴できないでしょうか？藁にもすがるつもりでお願いいたします。【仕様】 ASP.NET MVC3（IIS7.5）＋jQuery 【要件】ドロップダウンリストである項目を選ぶ -> Fancyboxで入力ウィンドウを「モーダルで」開く -> テキストを入力 -> 「閉じる」ボタンでFancyboxを閉じる（未入力状態では閉じるボタン不活性）フォーム全体の入力完了後、「送信」ボタンで内容を送信【不明点１】ドロップダウンで選んだ項目によって、Fancybox画面が変化するため、動的にフォームを表示する必要があので、その方法（静的htmlの表示はできています）【不明点２】 Fancyboxでの入力値を保存する方法現状は以下のコードで試していますが、"error loading response"とか出て何も表示されません。 $('#selection').change(function(){ $.fn.fancybox({ // 何か他のオプションが必要なのでしょうか？ href : 'subpanel?type=albyter?type=' + $(this).val(); ); } }); public ActionResult subpanel(string type){ // ここもわかりません。返すのはビュー？それともパーシャルビュー？ // 今はパーシャルビューを返していますが。。 var subPanelModel = new SubPanelModel(type); return Partial("subpanel", subPanelModel); }

nayutax
お礼率58% (23/39)

Microsoft ASP
回答数3
ありがとう数5

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

shockatz
ベストアンサー率80% (153/191)

2012/09/30 11:09 回答No.1

こんにちは Fancyboxは画像の拡大ぐらいしか使ったことがなかったのですが、興味があったので調べてみました。面白い動きをしますね。一時的にhtml要素を作り出し、そこに指定された要素をAjaxで読込んで配置する動作が基本。<div>要素だけでなく、<iframe>要素も生成できるようです。生成要素の種別は、任意に指定できると思われます。・iFrameの場合には、通常のView ・divの場合には、PartialView でいいんではないでしょうか？ $('#hoge').fancybox({ type : 'ajax', // PartialViewを期待 href : 'subpanel'; }); public ActionResult(){ return Partial("subpanel"); } で問題なく表示できました。パラメタ類は省略してあります。 PartialViewを返す場合は、fancybox側がレスポンスを判断できない場合があり、type:'ajax'を付加すると良い感じです。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

shockatz
ベストアンサー率80% (153/191)

2012/10/01 20:25 回答No.3

fancyboxのサイトに、"type":"ajax"で、静的なhtmlを呼び出しているサンプルがあります。そのurlを叩いてみると、普通のhtmlが表示されることから、恐らく"type":"ajax"とは、「htmlが返ってくることを期待するわ～　表示はajaxなんでよろしく」と宣言しているのでは？ここでいう「ajax風」というのは、jQueryでいうAjaxロード、つまり$.load("xxxxx")。読み込むファイルの<body>部分を抽出して表示しているような感じです。（ソース難しすぎて読めんかった。お許しを）また、ブラウザという奴も結構いい加減な存在で、<html>も<head>も<body>もない、中身だけのPartialViewでも、ちゃんと表示します。（要するに不足部分を自動的に補っている）なので、type:"ajax"さえ入っていれば、ViewでもPartialViewでもいいのだと思います。ただ、ASP.NET MVCプログラマとしては、内部要素たる<div>中に、htmlが勝手にトリムされて読み込まれるという動作は我慢ならんため、あえて頑固にPartislViewを返すわけです。そのほうがサイズも小さいのでレスポンス速いし！

質問者

お礼 2012/10/02 02:33

ありがとうございました！お陰様ですっきり理解できました。 MVCやAJAXは質問できる場所がなくて不安が多いのですが、厚く御礼申し上げます。今後ともよろしくご指導ください。

ログインすると、全ての回答が全文表示されます。

shockatz
ベストアンサー率80% (153/191)

2012/09/30 20:39 回答No.2

あ、ちょっとコピペをミスってました。 $('a#hoge').fancybox({ type : 'ajax', // PartialViewを期待 href : 'subpanel'; }); はつまり、 <a id="hoge">Fancyboxで開く</a> ってコードに対応してるって意味です。バージョンは古いほうのやつで検証。1.3かな？あと、つい今知ったのですが、Fancyboxって商用利用は有償みたいですね。

質問者

お礼 2012/09/30 23:21

shockatz様、本当にありがとうございます！お教えいただいた、type : 'ajax'で、なんの問題もなくPartialViewのレスポンスを fancyboxで開くことができました！感謝感激です。 fancyboxのようなダイアログを開くタイプのJavaScriptが使えると幅が広がります。本当に有難うございました！で、ちょっとshockatz様に甘えた質問なのですが、 return View('hoge')でも同じようにダイアログが開いたのですが、何か間違っているでしょうか？

ログインすると、全ての回答が全文表示されます。