-PR-
解決
済み

ASP.NET MVCでFancyboxを使いたい

  • すぐに回答を!
  • 質問No.7722962
  • 閲覧数1009
  • ありがとう数5
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 58% (23/39)

いつも大変お世話になっています。
今、ASP.NET MVCでサイトを構築中です。苦戦してます。。

中に入力フォームがあり、その中でサブウィンドウ的に入力ウィンドウを開いて、補足的な入力を行う仕様になっています。
普通なら、別の入力画面に遷移させるのですが、あまりにも入力項目が少ないため、遷移はさせたくなく、また、別ウィンドウもポップアップ対策などあって採用できません。

そこで、ヘルプウィンドウなどで使用している「Fancybox」を使いたいのですが、ASP.NETのプログラムサンプルがなく、大変に苦戦しております。

http://fancybox.net

どなたか、参考意見だけでも拝聴できないでしょうか?
藁にもすがるつもりでお願いいたします。

【仕様】
ASP.NET MVC3(IIS7.5)+jQuery

【要件】
ドロップダウンリストである項目を選ぶ -> Fancyboxで入力ウィンドウを「モーダルで」開く -> テキストを入力 -> 「閉じる」ボタンでFancyboxを閉じる(未入力状態では閉じるボタン不活性)
フォーム全体の入力完了後、「送信」ボタンで内容を送信

【不明点1】
ドロップダウンで選んだ項目によって、Fancybox画面が変化するため、動的にフォームを表示する必要があので、その方法(静的htmlの表示はできています)

【不明点2】
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);
}
通報する
  • 回答数3
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.1
レベル11

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

こんにちは

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'を付加すると良い感じです。
-PR-
-PR-

その他の回答 (全2件)

  • 回答No.2
レベル11

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

あ、ちょっとコピペをミスってました。 $('a#hoge').fancybox({ type : 'ajax', // PartialViewを期待 href : 'subpanel'; }); はつまり、 <a id="hoge">Fancyboxで開く</a> ってコードに対応してるって意味 ...続きを読む
あ、ちょっとコピペをミスってました。

$('a#hoge').fancybox({
type : 'ajax', // PartialViewを期待
href : 'subpanel';
});

はつまり、

<a id="hoge">Fancyboxで開く</a>

ってコードに対応してるって意味です。
バージョンは古いほうのやつで検証。1.3かな?

あと、つい今知ったのですが、Fancyboxって商用利用は有償みたいですね。
お礼コメント
nayutax

お礼率 58% (23/39)

shockatz様、本当にありがとうございます!

お教えいただいた、type : 'ajax'で、なんの問題もなくPartialViewのレスポンスを
fancyboxで開くことができました!
感謝感激です。
fancyboxのようなダイアログを開くタイプのJavaScriptが使えると幅が広がります。
本当に有難うございました!

で、ちょっとshockatz様に甘えた質問なのですが、
return View('hoge')でも同じようにダイアログが開いたのですが、何か間違っているでしょうか?
投稿日時 - 2012-09-30 23:21:17
  • 回答No.3
レベル11

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

fancyboxのサイトに、"type":"ajax"で、静的なhtmlを呼び出しているサンプルがあります。 そのurlを叩いてみると、普通のhtmlが表示されることから、恐らく"type":"ajax"とは、 「htmlが返ってくることを期待するわ~ 表示はajaxなんでよろしく」 と宣言しているのでは? ここでいう「 ...続きを読む
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を返すわけです。
そのほうがサイズも小さいのでレスポンス速いし!
お礼コメント
nayutax

お礼率 58% (23/39)

ありがとうございました!
お陰様ですっきり理解できました。

MVCやAJAXは質問できる場所がなくて不安が多いのですが、厚く御礼申し上げます。
今後ともよろしくご指導ください。
投稿日時 - 2012-10-02 02:33:31
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ