Inviare i dati del modulo all'azione del controller con Ajax

Question

Ho una pagina in MVC3, con un collegamento (Ajax.ActionLink). Quando l'utente fa clic, chiama l'azione del controllore e il risultato viene inserito in un div, con la sostituzione.

codice è il seguente:

@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 è metodo di estensione personalizzato da utilizzare un'immagine come collegamento e ShowPopup è una funzione javascript che mostra il div aggiornato (per farlo sembrare come un pop-up)

Ora il codice di markup inserito nel div che crea il popup contiene un modulo come di seguito

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

il problema è con inviare il modulo: il calcio Invia sulle chiamate l'azione corretta ma con un postback, che fa aggiornare la mia pagina. Che cosa ho bisogno è quello di inviare i dati con l'Ajax, ricevere la risposta, che è un altro vista parziale che viene inserita nel

stavo cercando di sostituire il pulsante Invia con Ajax.ActionLink come di seguito

@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)" 
      } 

Il il codice del controller è simile al seguente:

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

il problema è, nel momento in cui l'Ajax ActionLink è reso (se il modulo è caricato) non v'è alcun valore nel Model.EmailAddress, quindi la mia azione POST controller riceve unico parametro ID .

Come posso gestirlo? Idealmente, penso che dovrei aggiungere

OnBegin = "PreparePostData()" 

Ma poiché so javascript solo in fondo, non ho idea di come posso implementare questa. Penso che questo PreparePostData() dovrebbe raccogliere i campi del modulo e preparare il parametro routeValues ​​dell'oggetto, da impostare prima che la chiamata ajax venga invocata.

Chiunque può darmi qualche indicazione su come implementarlo?

O qualsiasi altro approccio migliore su questo problema?

Grazie

Answer 1

mi piacerebbe raccomando solo scrivere il proprio chiamate AJAX con jQuery. E 'più flessibile di aiutanti di MVC comunque

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

E poi una funzione

$("#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

Quando si hanno molteplici forme nella stessa pagina (immaginate il caso y're mostrare/nascondere a richiesta), è necessario per aggiungere Form prima l'IDI come segue:

$("#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); 
     } 
    }); 
);