Modal Form in asp.net MVC RC mit Jquery

Question

Ich bin neu in Ajax / jQuery und haben Schwierigkeiten hat, eine einfache Probe beinhaltet die Suche nach folgenden:

• ASP.Net MVC RC1 (oder 2)
• jquery
• modale Formular

Ich möchte der Benutzer in der Lage sein einen Link / Button in einer Ansicht zu klicken (Parent) und haben eine modale Form erscheinen, dass ein Formular enthält. der Inhalt des modalen Dialogs sollte eine MVC-Ansicht (Kind) sein.

Nachdem das Formular abgeschickt wird ich den modalen Dialog von der übergeordneten Ansicht verschwinden und einen Teil aktualisiert werden mag.

Answer 1

Also, brauchen Sie nicht alle auf einmal, um darüber nachzudenken.     Zuerst Ihre Form in HTML Front-und Center auf der Seite machen, eine Aktion anhängen, und bekommen es ohne Modal fanciness zu arbeiten.
    Sobald Ihre Form Logik funktioniert können Sie Schleife in jQuery. Egal, ob Sie mit Modalität & das Popup oder mit dem asynchronen Beitrag mit jQuery starten wollen, ist bis zu Ihnen. Ich mag in der Regel, damit es funktioniert, bevor ich es recht machen, so dass wir diesen Weg nehmen.     Wenn Sie den Standard verwenden <% Html.BeginForm ... {%> Syntax Formular zu definieren, entfernen Sie es. Go alte Schule html! (Ich weiß, Sie weiter die Html.BeginForm anpassen können, aber es ist einfacher, nur html verwenden)

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

Jetzt können Sie jQuery in Ihrem document.ready verdrahten, oder wo auch immer Sie initialisieren Ihre JS.

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

In Ihrer Aktion Form werden Sie wahrscheinlich jQuery Post anrufen, wenn der Rückruf der Post versteckt Ihre Form und aktualisiert den Rest der Seite. Api Dokumentation

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

Jetzt haben Sie eine AJAXy Form, so dass Sie auf den Rückruf arbeiten.

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

Jetzt können wir über Modalität sprechen. Es ist in der Regel ein bisschen nervig, aber man kann eine jQuery-Plugin wie diesen oder etwas verwenden ähnlich der es für Sie tun. Dann ist es nur eine Frage der Ereignisse Verdrahtung bis zu zeigen, und das Popup zu verbergen, und du bist fertig.

Wenn Ihre Absicht geladen haben ist, dass Form asynchron, wenn der „Show“ Link geklickt wird, das ist ein bisschen lästig, aber immer noch machbar. Sie können jQuery.Load verwenden ( Api Dokumentation ), um die html zu ziehen und injizieren sie in der dom, aber Sie werden immer noch die Ereignisse zu verkabeln haben (wieder mit der bind ( ‚submit‘ ...) wie oben beschrieben).