Post Form Daten zu Controller Aktion mit Ajax

Question

Ich habe eine Seite in MVC3, mit einer Verknüpfung (Ajax.ActionLink). Wenn der Benutzer darauf klickt, wird die Aktion des Controllers aufgerufen, und das Ergebnis wird in ein div mit Ersetzen eingefügt.

-Code ist unten dargestellt:

@Ajax.ImageActionLink("/Images/btn_share.png", "Share pool", "SharePool", new { poolKey = Model.Id, poolName = Model.Name }, 
    new AjaxOptions { 
     UpdateTargetId="popup", 
     HttpMethod="GET", 
     InsertionMode = InsertionMode.Replace, 
     LoadingElementId="loading_dialog", 
     OnSuccess = "ShowPopup('#popup_share', true, true)" 
    } 

ImageLinkAction ist benutzerdefinierte Erweiterung Methode verwenden Bild als Link und Showpopup ist eine Javascript-Funktion, die die aktualisierte div zeigt (um es als Popup aussehen)

Nun ist die Code-Markup in den div eingefügt, die das Popup erstellt enthält ein Formular, wie unten

<div> 
@using (Html.BeginForm()) { 

    @Html.HiddenFor(model => model.ID) 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.EmailAddress) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.EmailAddress) 
     @Html.ValidationMessageFor(model => model.EmailAddress) 
    </div> 

    // ... other fields 

    @Html.ValidationSummary(true) 
    <p> 
     <button type ="submit">Share</button>  
    </p> 
} 
</div> 

das Problem ist, mit dem einreichen des Formulars: das Senden Hintern on ruft die richtige Aktion auf, aber mit einem Postback, wodurch meine Seite aktualisiert wird. Was ich brauche, ist Daten mit Ajax zu veröffentlichen, erhalten die Antwort, die eine andere Teilansicht ist, die in die

eingefügt wird Ich habe versucht, die Senden-Schaltfläche mit Ajax.ActionLink zu ersetzen, wie unten

@Ajax.ActionLink("Share", "Share", 
     new Models.MyModel 
      { 
       ID = Model.ID, 
       EmailAddress = Model.EmailAddress 
      }, 
     new AjaxOptions 
      { 
       UpdateTargetId="popup", 
       HttpMethod="POST", 
       InsertionMode = InsertionMode.Replace, 
       LoadingElementId="loading_dialog", 
       OnSuccess = "ShowPopup('#popup_share', true, true)" 
      } 

Die Controller Code sieht wie folgt aus:

[HttpPost] 
public ActionResult SharePool(MyModel model) 
{ 
    // ... 
    return PartialView("_MyPartialView", model) 
} 

das Problem ist, im Moment der Ajax Action gemacht wird (wenn das Formular geladen wird) gibt es keinen Wert in Model.EmailAddress, so meine POST Aktion im Controller empfängt nur ID-Parameter .

Wie kann ich damit umgehen? Idealerweise denke ich, ich

OnBegin = "PreparePostData()" 

hinzufügen sollten Aber da ich Javascript weiß nur, im Grunde habe ich keine Ahnung, wie kann ich diese umzusetzen. Ich denke, diese PreparePostData() sollte Formularfelder sammeln und den Objekt-RouteValues-Parameter vorbereiten, der gesetzt werden muss, bevor der Ajax-Aufruf aufgerufen wird.

Jeder kann mir einige Hinweise geben, wie dies zu implementieren ist?

Oder ist irgendein anderer, besserer Ansatz zu diesem Problem?

Danke

Answer 1

ich Ihre eigenen AJAX-Aufrufe mit jQuery nur empfehlen würde zu schreiben. Es ist flexibler als Helfer MVC sowieso

@Html.ActionLink("Share", "Share", new { }, new { id = "share" }) 

Und dann eine Funktion

$("#share").click(function (e) { 
    e.preventDefault(); 
    //Show loading display here 
    var form= $("#shareForm"); 
    $.ajax({ 
     url : '@Url.Action("Share")', 
     data: form.serialize(), 
     type: 'POST', 
     success: function(data){ 
      //Show popup 
      $("#popup").html(data); 
     } 
    }); 
); 

Answer 2

Wenn Sie mehrere Formulare auf der gleichen Seite zu tun haben (y're Ein-/Ausblenden auf Nachfrage den Fall vorstellen), müssen Sie Formular vor der #Id wie folgt hinzufügen:

$("#share").click(function (e) { 
    e.preventDefault(); 
    //Show loading display here 

// Need to add Form before #id 
    var form= $("Form#share"); 

    $.ajax({ 
     url : '@Url.Action("Share")', 
     data: form.serialize(), 
     type: 'POST', 
     success: function(data){ 
      //Show popup 
      $("#popup").html(data); 
     } 
    }); 
);