ASP.NET MVCでFancyboxを使いたい

Question

いつも大変お世話になっています。
今、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);
}

shockatz · Accepted Answer

こんにちは Fancyboxは画像の拡大ぐらいしか使ったことがなかったのですが、興味があったので調べてみました。面白い動きをしますね。一時的にhtml要素を作り出し、そこに指定された要素をAjaxで読込んで配置する動作が基本。

要素だけでなく、

shockatz · Answer

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を返すわけです。
そのほうがサイズも小さいのでレスポンス速いし！

中に、htmlが勝手にトリムされて読み込まれるという動作は我慢ならんため、あえて頑固にPartislViewを返すわけです。そのほうがサイズも小さいのでレスポンス速いし！

shockatz · Answer

あ、ちょっとコピペをミスってました。

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

はつまり、

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

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

あと、つい今知ったのですが、Fancyboxって商用利用は有償みたいですね。

ASP.NET MVCでFancyboxを使いたい

こんにちは

fancyboxのサイトに、"type":"ajax"で、静的なhtmlを呼び出しているサンプルがあります。

あ、ちょっとコピペをミスってました。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング