jqueryを使用したasp.net mvc RCのモーダルフォーム

Question

私はajax / jqueryを初めて使用しますが、以下を組み込んだ簡単なサンプルを見つけるのに苦労しました：

• ASP.Net MVC RC1（または2）
• jquery
• モーダルフォーム

ユーザーがビュー（親）のリンク/ボタンをクリックして、フォームを含むモーダルフォームを表示できるようにしたいと思います。モーダルダイアログの内容はMVCビュー（子）である必要があります。

フォームが送信されたら、モーダルダイアログを非表示にし、親ビューの一部を更新したいです。

Answer 1

だから、一度にすべてについて考える必要はありません。     最初にフォームをHTMLの前面とページの中央に作成し、アクションを添付して、モーダルのファンシーさなしに動作させます。
    フォームロジックが機能したら、jQueryでループできます。モダリティ<！> ampで開始するかどうか。ポップアップまたはjQueryを使用した非同期投稿の使用はユーザー次第です。私は通常、きれいにする前に機能させるのが好きなので、そのルートを取ります。     標準の<！> lt;％Html.BeginForm ...を使用する場合... {％<！> gt;フォームを定義する構文を削除します。古い学校のhtmlに行く！ （Html.Beginformをさらにカスタマイズできることはわかっていますが、htmlを使用する方が簡単です）

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

これで、document.readyのjQuery、またはJSを初期化する場所でjQueryを接続できます。

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

アクションフォームでは、おそらくjQueryのポストを呼び出します。ポストのコールバックはフォームを非表示にし、ページの残りの部分を更新します。 Apiドキュメント

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.
}

今、モダリティについて話すことができます。通常は少し苦痛ですが、 this などのjQueryプラグインを使用できます。あなたのためにそれを行うに似ています。その後、イベントを関連付けてポップアップを表示および非表示にするだけで、設定はすべて完了です。

<！> quot; show <！> quot;がそのフォームを非同期にロードすることを意図していた場合リンクがクリックされると、もう少し面倒ですが、それでも実行可能です。 jQuery.Load（ Apiドキュメンテーション）を使用して、htmlを取得し、挿入できます。 domですが、イベントを結び付ける必要があります（再び、上記のbind（ 'submit' ...）を使用）。