いつも大変お世話になっています。
今、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);
}
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'を付加すると良い感じです。
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を返すわけです。
そのほうがサイズも小さいのでレスポンス速いし!
ありがとうございました!
お陰様ですっきり理解できました。
MVCやAJAXは質問できる場所がなくて不安が多いのですが、厚く御礼申し上げます。
今後ともよろしくご指導ください。
No.2
- 回答日時:
あ、ちょっとコピペをミスってました。
$('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')でも同じようにダイアログが開いたのですが、何か間違っているでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- Access(アクセス) Access 登録ボタンからサブフォームの更新 1 2022/07/22 10:23
- その他(データベース) Accessフォームからパラメーターで表示したレコードを指定のExcelのセルへ転送する方法について 2 2022/08/22 18:04
- Visual Basic(VBA) Vba LongPtrについて教えてください 2 2022/08/19 11:14
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript ラジオボタンによるフォームの開閉を行いたい 3 2022/03/31 21:30
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
(Javascript)印刷するファイル...
-
JavaScript無効時に
-
フォントの色指定を一部解除したい
-
テキストボックス内にハイパー...
-
divで作成したテキストボックス...
-
CSS スクロールバーのデフォル...
-
firefoxでブラウザ確認すると左...
-
横スクロールを右から左へ・・・
-
スクロールバーを消したいです
-
DOCTYPE宣言をするとstyleが適...
-
ページによって表示位置がずれ...
-
<a href="#" …>の意味を教えて...
-
入力したテキストボックスのデ...
-
フレームで隠れるポップ
-
外部ファイル名を変数で指定で...
-
getElementsByNameで要素が取得...
-
jqeryのslicksliderのパスにつ...
-
GalleryView 3.0の設置方法につ...
-
javascriptとApacheの設定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
(Javascript)印刷するファイル...
-
テキストボックス内にハイパー...
-
別ページのページ内リンクでの...
-
ハイパーリンクに下線を表示す...
-
ページの読み込みが完了してか...
-
横スクロールを右から左へ・・・
-
Chromeがiframe内の「#~」に釣...
-
ページによって表示位置がずれ...
-
"mailtoでメールの【氏名】【性...
-
bodyにwidth:100%をつける理由は?
-
iframeのsrcにページ内リンク(...
-
スクロールバーのスクロール量...
-
ボタンが押されたらWebページの...
-
h1にmarginを指定すると一瞬カ...
-
ホームページ上に『位置固定』...
-
htmlで任意の行の文字位置を右...
-
テキストをクリックすると答え...
-
googleマイマップとのリンクを...
-
-css- ページオープン時やリロ...
おすすめ情報