Come pubblicare il modulo Ajax MVC ASP.NET utilizzando JavaScript piuttosto che il pulsante di invio

Ho un semplice modulo creato usando Ajax.BeginForm :

  Description: 

Il controller è cablato e restituisce una vista parziale che aggiorna il DescriptionDiv . E tutto funziona perfettamente.

Ora vorrei poter inviare questo modulo senza avere il pulsante di invio (tramite un clic su un collegamento o su un’immagine o altro). Sfortunatamente questo piccolo frammento di jQuery non fa il lavoro:

 $('form#AjaxForm').submit(); 

Presenta il modulo, ma fa (suppongo non sorprendentemente) un post-back regolare e non uno Ajax.

Per semplicità, il jQuery di cui sopra è cablato in questo modo:

 submit 

Onsubmit del modulo sta utilizzando Sys.Mvc.AsyncForm.handleSubmit (), ma l’invio di jQuery sembra ignorarlo.

PS. Sto cercando una soluzione in questo particolare approccio. So come ottenere lo stesso usando un modulo normale e pubblicandolo usando AJAX + jQuery. Sono interessato a questa particolare soluzione però.

Presumo che la mancanza di virgolette attorno al selettore sia solo un errore di trascrizione, ma dovresti comunque controllarlo. Inoltre, non vedo dove stai effettivamente dando il modulo un id. Solitamente lo fai con il parametro htmlAttributes. Non ti vedo usare la firma che ce l’ha. Anche in questo caso, tuttavia, se il modulo viene inviato, potrebbe trattarsi di un errore di trascrizione.

Se il selettore e l’id non sono il problema, sospetto che possa essere dovuto al fatto che il gestore di clic viene aggiunto tramite markup quando si utilizza l’estensione Ajax BeginForm. Potresti provare a utilizzare $ (‘form’). Trigger (‘submit’) o, nel peggiore dei casi, fare in modo che il gestore di clic sull’ancora crei un pulsante di invio nascosto nel modulo e fare clic su di esso. O anche creare la tua presentazione ajax utilizzando jQuery puro (che è probabilmente quello che farei).

Infine, dovresti rendertene conto che sostituendo il pulsante di invio, lo interromperà totalmente per le persone che non hanno javascript abilitato. Il modo per aggirare questo è anche avere un pulsante nascosto usando un tag noscript e gestire sia i messaggi AJAX che quelli non-AJAX sul server.

A proposito, è consuetudine considerare la prassi standard, che Microsoft non regge, di aggiungere i gestori tramite javascript non tramite markup. Ciò mantiene il tuo javascript organizzato in un unico posto in modo da poter vedere più facilmente cosa sta succedendo sul modulo. Ecco un esempio di come utilizzerei il meccanismo di trigger.

  $(function() { $('form#ajaxForm').find('a.submit-link').click( function() { $('form#ajaxForm').trigger('submit'); }).show(); } <% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id }, new AjaxOptions { UpdateTargetId = "DescriptionDiv", HttpMethod = "post" }, new { id = "ajaxForm" } )) {%> Description: <%= Html.TextBox("Description", Model.Description) %>
<% } %>

Un semplice esempio, in cui una modifica in un elenco a discesa triggers un modulo ajax: invia per ricaricare un datagrid:

 
<% using (Ajax.BeginForm("UserSearch", "Home", new AjaxOptions { UpdateTargetId = "pnlSearchResults" }, new { id="UserSearchForm" })) { %> UserType: <%: Html.DropDownList("FilterUserType", Model.UserTypes, "--", new { onchange = "$('#UserSearchForm').trigger('submit');" })%> <% } %>

Il trigger (‘onsubmit’) è la cosa fondamentale: chiama la funzione onsubmit che MVC ha innestato sul modulo.

NB. Il controller UserSearchResults restituisce un PartialView che esegue il rendering di una tabella utilizzando il Modello fornito

 
<% Html.RenderPartial("UserSearchResults", Model); %>

Sfortunatamente l’triggerszione di onsubmit o invio di eventi non funziona su tutti i browser.

  • Funziona in IE e Chrome: # (‘form # ajaxForm’) trigger (‘onsubmit’);
  • Funziona con Firefox e Safari: # (‘form # ajaxForm’) trigger (‘submit’);

Inoltre, se attivi (“invia”) in Chrome o IE, fa sì che l’intera pagina venga pubblicata anziché eseguire un comportamento AJAX.

Ciò che funziona per tutti i browser sta rimuovendo il comportamento dell’evento onsubmit e semplicemente chiamando submit () sul modulo stesso .

  <% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id }, new AjaxOptions { UpdateTargetId = "DescriptionDiv", HttpMethod = "post" }, new { id = "ajaxForm" } )) {%> Description: <%= Html.TextBox("Description", Model.Description) %>
Save <% } %>

Inoltre, il collegamento non deve essere contenuto nel modulo affinché funzioni.

Ho provato alcune volte a far funzionare correttamente il modulo ajax, ma ho sempre incontrato errori completi o troppi compromessi. Ecco un esempio di pagina che utilizza il plug-in jQuery Form all’interno di una pagina MVC per aggiornare un elenco di progetti (utilizzando un controllo parzialmente sottoposto a rendering) mentre l’utente digita in una casella di input:

  
<% Html.RenderPartial ("ProjectList", Model); %>

E sul lato controller:

 public ActionResult SearchByName (string projectName) { var service = Factory.GetService (); var result = service.GetProjects (projectName); if (Request.IsAjaxRequest ()) return PartialView ("ProjectList", result); else { TempData["Result"] = result; TempData["SearchCriteria"] = projectName; return RedirectToAction ("Index"); } } public ActionResult Index () { IQueryable projects; if (TempData["Result"] != null) projects = (IQueryable)TempData["Result"]; else { var service = Factory.GetService (); projects = service.GetProjects (); } ViewData["projectName"] = TempData["SearchCriteria"]; return View (projects); } 

Ajax.BeginForm sembra essere un fallimento.

Usando un normale Html.Begin per, questo fa proprio il trucco:

 $('#detailsform').submit(function(e) { e.preventDefault(); $.post($(this).attr("action"), $(this).serialize(), function(r) { $("#edit").html(r); }); }); 

Prova in questo modo:

  Go 

Piuttosto che usare JavaScript, forse provare qualcosa di simile

    

Basta posizionare il pulsante normale indide Ajax.BeginForm e fare clic su Trova modulo padre e invio normale. Modulo Ajax in Razor:

 @using (Ajax.BeginForm("AjaxPost", "Home", ajaxOptions)) { 
}

e Javascript:

 function submitParentForm(sender) { var $formToSubmit = $(sender).closest('form'); $formToSubmit.submit(); }