Modulo di registrazione senza @ HTML.Beginform e utilizzando Jquery (ajax) in asp.net MVC

Question

Come posso compilare un modulo senza utilizzare @ HTML.Beginform e utilizzando invece JQuery Ajax? In questo momento ho provato:

var postData = { form1: username, form2: password }; 

    $.ajax({ 
     type: "POST", 
     url: '/Controller/Method', 
     data: postData, 
     dataType: "json", 
     traditional: true 
    }); 

Ma dopo la pubblicazione, il browser non passa alla vista corretta. Ovviamente ho restituito View() correttamente nel controller. Utilizzo di Fiddler Vedo che è pubblicato correttamente e anche la risposta è corretta ...

Do I avere per utilizzare @ HTML.Beginform o posso farlo con Ajax?

Answer 1

tuo possibile utilizzare un tag HTML grezzo <form> o @HTML.BeginForm aiutante. Ecco un esempio utilizzando solo HTML

Soluzione completa:

<form action"/Controller/Method" method="POST" id="signInForm"> 
    <input type="text" name="form1" /> 
    <input type="text" name="form2" /> 
    <input type="submit" value="Sign in" /> 
</form> 

$(function() { 
    $('signInForm').submit(function(evt) { 
     //prevent the browsers default function 
     evt.preventDefault(); 
     //grab the form and wrap it with jQuery 
     var $form = $(this); 
     //if client side validation fails, don't do anything 
     if(!$form.valid()) return; 
     //send your ajax request 
     $.ajax({ 
      type: $form.prop('method'), 
      url: $form.prop('action'), 
      data: $form.serialize(), 
      dataType: "json", 
      traditional: true, 
      success: function(response) { 
       document.body.innerHTML = response; 
      } 
     }); 
    }); 
}); 

mi consiglia di utilizzare @Url.Action per impostare l'URL della vostra azione modulo. In questo modo il routing può generare il tuo URL.

<form action"@Url.Action("Method", "Controller")" method="POST" id="signInForm"> 
    <input type="text" name="form1" /> 
    <input type="text" name="form2" /> 
    <input type="submit" value="Sign in" /> 
</form> 

E 'un po' più avanzato, ma vorrei provare a utilizzare qualcosa come Take Command per gestire le chiamate jQuery Ajax.

Disclaimer, sono un contributore del progetto TakeCommand.

Answer 2

Quando si utilizza @Html.BeginForm, l'output HTML è:

<form method="POST" action="/Controller/Method"> 

E quando si invia quella forma, il browser gestisce proprio come un'altra pagina di navigazione (solo con POST metodo) quindi la risposta è caricato nel frame principale.

Tuttavia, quando si avvia una richiesta Ajax, è compito dell'utente gestire la risposta dal server (in genere utilizzando una funzione di richiamata).

Se si vuole simulare il normale comportamento modulo di presentazione, sarebbe qualcosa di simile:

$.ajax({ 
    type: "POST", 
    url: '/Controller/Method', 
    data: postData, 
    dataType: "json", 
    traditional: true, 
    success: function(response) 
    { 
     document.body.innerHTML = response; 
    } 
}); 

Questo non dovrebbe sostituire l'intero contenuto della pagina con la risposta (solo i BODY contenuti), ma nella maggioranza dei casi andrà bene.

Answer 3

Questo farà un post xhr sul server e restituirà la vista come dati (risposta) Non naviga, se restituisce html, è necessario impostare un tipo di dati corretto nella richiesta per indicare che si aspetta html indietro dal server:

Data l'azione restituita in html, è possibile inserire l'html restituito nella pagina nella funzione di successo.

postData = "{'ID':'test'}"; 
$.ajax({ 
    type: "POST", 
    url: '/Home/Test', 
    data: postData, 
    dataType: 'html', 
    contentType: 'application/json', 
    traditional: true, 
    success: function (data) { 
     $("#yourdomelement").html(data); 
    } 
}); 

Nella vostra azione;

public ActionResult Test([FromBody]PostData id) 
{ 
    return Content("<p>hello</p>"); 
}