MVC jQuery invia modulo (senza aggiornamento pagina) dalla funzione JavaScript

Question

Sono abbastanza nuovo a tutto questo. Sto usando ASP.NET MVC C# LINQ to SQL.

Ho una pagina di modifica che carica gli autori e tutti i loro libri. I libri vengono caricati tramite una chiamata Ajax.

<script type="text/javascript"> 
     $(document).ready(function() { 
      LoadBooks(); 
     }); 

     function LoadBooks() { 
      $(".Books").hide(); 
      $(".Books").load("/Books/Edit/<%= Model.AuthorID %>"); 
      $(".Books").show('slow'); 
     } 
    </script> 

Questa parte funziona correttamente. Il caricamento della pagina con informazioni Autore, quindi il carico di libri (una vista parziale in un id DIV = "Libri", solo con la categoria Libro e Titolo libro):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Solution.Controllers.BooksController+BooksViewModel>" %> 
    <% using (Html.BeginForm(null,null, FormMethod.Post,new { id = "bookform" })) 
     {%> 
      <fieldset> 
       <legend>Books</legend> 
       <%int i = 0; 
        foreach (var book in Model.Books) 
        {%> 
         <%= book.BookID%> 
         <%= Html.Hidden("book[" + i + "].BookID", book.BookID) %> 

         <%= Html.DropDownList("book[" + i + "].CatID", new SelectList(Model.Categories, "CatID", "CatTitle", book.CatID))%> 
         <%= Html.ValidationMessage("CatID", "*")%> 

         <%= Html.TextBox("book[" + i + "].BookTitle", book.BookTitle)%> 
         <%= Html.ValidationMessage("BookTitle", "*")%> 
         <br /> 
         <%i++; 
        } %> 
      </fieldset> 
    <% } %> 

Ora, la visualizzazione della pagina principale che ho voglio avere un link. Quando si fa clic sul collegamento, voglio fare alcune cose tramite JavaScript/jQuery/Ajax/qualunque. La prima cosa che voglio succedere è di inviare il modulo Libri (id = booksform) dalla vista parziale, quindi passare alla successiva funzione jQuery. Quindi, faccio clic su un collegamento che chiama una funzione JavaScript. Questa funzione dovrebbe chiamare/fare/eseguire la presentazione del modulo Libri.

Mi sento come se avessi provato tutto, ma non riesco a ottenere il mio modulo Libri per inviare ed elaborare senza un invio/aggiornamento di una pagina completa in corso. (Nota, quando si esegue l'invio completo, le azioni che mi aspetto nel controller procedono correttamente). Voglio che il processo/azione del controller non restituisca altro che una qualche indicazione di successo/fallimento. (Posso quindi chiamare "LoadBooks();".? Di nuovo per aggiornare la DIV nella pagina

Tutte le idee

Answer 1

Ecco come lo faccio con jQuery:

function DoAjaxPostAndMore(btnClicked) 
{ 
     var $form = $(btnClicked).parents('form'); 

     $.ajax({ 
      type: "POST", 
      url: $form.attr('action'), 
      data: $form.serialize(), 
      error: function(xhr, status, error) { 
        //do something about the error 
      }, 
      success: function(response) { 
       //do something with response 
       LoadBooks(); 

      } 
     }); 

    return false;// if it's a link to prevent post 

} 

ho pensato che btnClicked si trova all'interno del modulo:

<input type="button" value="Submit" onclick="DoAjaxPostAndMore(this)"/> 

se link:

<a href="/url/something" onclick="return DoAjaxPostAndMore(this)">linktext</a> 

Se LINK è non dentro per il modulo devi solo usare i selettori jquery per trovarlo. È possibile impostare id per il modulo e quindi trovare a formare in questo modo:

var $form = $("#theformid"); 

Answer 2

Il vostro "onclick" funzione JavaScript eseguire e il problema è che a piena pagina presentare/aggiornamento avviene così? In questo caso il problema è che non si finisce la vostra funzione JavaScript con return false.

O è il problema che il vostro "onclick" non è chiamato funzione JavaScript a tutti? Allora è difficile per dire senza guardare il codice ... Se si usa il selettore JQuery, probabilmente il link non viene selezionato dal selettore

Answer 3

È che Ajax.BeginForm che è necessario utilizzare, non Html.BeginForm.

Answer 4

<a href = "javascript: SaveProperties();">Save properties</a> 
SaveProperties() { $('#bevpropform').submit(); } 

Come ho detto prima, dovrebbe essere

SaveProperties() { $('#bevpropform').submit(); return false; } 

Answer 5

Questa è una risposta "se può aiutare qualcuno", perché sono molto in ritardo al gioco, ma è anche possibile utilizzare:

@using (Ajax.BeginForm("Method", "Controller", new AjaxOptions { HttpMethod = "POST" })) 
{ 
} 

Quando la data verrà pubblicata, la pagina non verrà aggiornata.

NOTA

È MUST aggiungere jquery.unobtrusive-ajax.js per far funzionare tutto questo. Fai attenzione, nel progetto di template ASP.NET MVC5, questo script è non incluso di default, devi aggiungerlo manualmente o aggiungerlo tramite Nuget packet manager.
Non è correlato a jquery.validate.unobtrusive.js, che è incluso per impostazione predefinita.