モーダルフォームjqueryの

Question

を使用してasp.net MVC RCに私はAJAX/jQueryのに新しいですし、難易度以下を取り入れた簡単なサンプルを見つけることがあった：

• ASP.Net MVC RC1（または2）
• をjqueryの
• 私は、ユーザーがビュー（親）にリンク/ボタンをクリックすると、モーダルフォームを持ってできるようにしたいと思い

モーダルフォームは、フォームが含まれて表示されます。モーダルダイアログの内容はMVCビュー（子）でなければなりません。

フォームが送信されたら、モーダルダイアログが消えて、親ビューの一部が更新されます。

Answer 1

だから、一気に考える必要はありません。 最初にフォームをHTMLの正面に配置し、ページの中央に配置し、アクションを添付して、モーダルの虚栄心なしで動作させます。
フォームロジックが機能したら、jQueryでループすることができます。モダリティ&のポップアップから始めるか、または非同期ポストのjQueryを使用するかはあなた次第です。私はそれをかなり美しくする前にそれを働かせるのが大好きなので、私たちはその道を辿ります。 標準の<％Html.BeginForm ... {％>構文を使用してフォームを定義する場合は、フォームを削除します。古い学校のhtmlに行ってください！今、あなたはあなたのdocument.readyでのjQueryを配線することができ、あるいは、あなたのJSを初期化どこ

<form action="<%= Url.ActionLink(...)%>" id="SomeForm"> 

（私はあなたがさらにHtml.Beginformをカスタマイズすることができます知っているが、それだけでHTMLを使用する方が簡単です）。あなたのアクションで

$('#SomeForm').bind('submit', youractionfunction); 

あなたはおそらくポストのコールバックは、フォームを非表示にし、ページの残りの部分を更新jQueryのポストを呼び出すことになります形成します。 Api Documentation

function youractionfunction(e){ 
    $.post($(e).attr('action'), // we get the action attribute (url) from the form 
     { title : $('#titleBox').val()}, // the values we're passing 
     yourCallbackFunction); 
    return false; // This is important, this will stop the event from bubbling and your form from submitting twice. 
} 

今、あなたはajaxyフォームを持っているので、あなたは、コールバックで作業することができます。

function yourCallbackFunction(data) 
{ 
    // do something with the result. 
} 

ここでモダリティについて説明します。これは一般的には苦痛ですが、などのjQueryプラグインを使用することができます。それでは、ポップアップを表示したり隠したりするためにイベントを配線するだけです。あなたはすべて設定されています。

「表示」リンクをクリックしたときに非同期でそのフォームを読み込む予定だった場合は、もう少し面倒ですが、まだ実行可能です。 jQuery.Load（Api Documentation）を使用してhtmlを取得してdomに挿入することはできますが、上記のbind（ 'submit' ...）を使用してイベントを接続する必要があります。