- ベストアンサー
ASP.NET MVCでFancyboxを使いたい
- ASP.NET MVCでサイトを構築中の際、Fancyboxを使用する方法について苦戦しています。
- 具体的には、フォーム内でサブウィンドウを開いて補足的な入力を行いたいのですが、どのように実装すれば良いか分かりません。
- Fancyboxを使用して動的にフォームを表示し、入力値を保存する方法についての参考意見を求めています。
- nayutax
- お礼率58% (23/39)
- Microsoft ASP
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 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)
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を返すわけです。 そのほうがサイズも小さいのでレスポンス速いし！
- shockatz
- ベストアンサー率80% (153/191)
あ、ちょっとコピペをミスってました。 $('a#hoge').fancybox({ type : 'ajax', // PartialViewを期待 href : 'subpanel'; }); はつまり、 <a id="hoge">Fancyboxで開く</a> ってコードに対応してるって意味です。 バージョンは古いほうのやつで検証。1.3かな？ あと、つい今知ったのですが、Fancyboxって商用利用は有償みたいですね。
お礼
shockatz様、本当にありがとうございます！ お教えいただいた、type : 'ajax'で、なんの問題もなくPartialViewのレスポンスを fancyboxで開くことができました！ 感謝感激です。 fancyboxのようなダイアログを開くタイプのJavaScriptが使えると幅が広がります。 本当に有難うございました！ で、ちょっとshockatz様に甘えた質問なのですが、 return View('hoge')でも同じようにダイアログが開いたのですが、何か間違っているでしょうか？
お礼
ありがとうございました！ お陰様ですっきり理解できました。 MVCやAJAXは質問できる場所がなくて不安が多いのですが、厚く御礼申し上げます。 今後ともよろしくご指導ください。