MVC jQuery soumettre formulaire (sans actualisation de la page) de la fonction JavaScript

Question

Je suis assez nouveau à tout cela. J'utilise ASP.NET MVC C# LINQ to SQL.

J'ai une page d'édition qui charge les auteurs et tous leurs livres. Les livres sont chargés via un appel Ajax.

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

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

Cette partie fonctionne correctement. La page se charge avec les informations de l'auteur, la charge des livres (une vue partielle dans un id DIV = « Livres », juste avec la catégorie Livre et Titre du livre):

<%@ 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> 
    <% } %> 

Maintenant, sur la page principale de vue I vouloir avoir un lien. Lorsque le lien est cliqué, je veux faire quelques choses via JavaScript/jQuery/Ajax/peu importe. La première chose que je veux arriver est de soumettre le formulaire Books (id = booksform) de la vue partielle, puis passer à la fonction jQuery suivante. Donc, je clique sur un lien qui appelle une fonction JavaScript. Cette fonction devrait appeler/faire/exécuter la soumission du formulaire Livres. J'ai l'impression d'avoir tout essayé, mais je n'arrive pas à soumettre et traiter mon formulaire de livres sans soumettre une soumission/actualisation complète de la page. (Notez que lorsque l'envoi complet est effectué, les actions que j'attends du contrôleur sont traitées avec succès). Je veux que le processus/l'action du contrôleur ne renvoie rien d'autre qu'une indication de succès/échec. (Je peux alors appeler « LoadBooks(); ».? Nouveau pour rafraîchir la DIV sur la page

Toutes les idées

Answer 1

Voilà comment je le fais avec 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 

} 

Je suppose que btnClicked est à l'intérieur de la forme:

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

si le lien:

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

Si le lien est pas à l'intérieur pour la forme que vous avez juste à utiliser des sélecteurs jquery pour le trouver. Vous pouvez définir id à la forme et retrouver la forme comme ceci:

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

Answer 2

Votre « onclick » fonction JavaScript execute et le problème est que la page complète soumettre/rafraîchissement se produit ainsi? Dans ce cas, le problème est que vous ne finissez pas votre fonction JavaScript avec return false.

Ou est le problème que votre « onclick » fonction JavaScript n'est pas appelé tout? Alors il est difficile dire sans regarder le code ... Si vous utilisez JQuery selector - alors probablement le lien n'est pas choisi par le sélecteur

Answer 3

Est-ce que Ajax.BeginForm vous devez utiliser, non Html.BeginForm.

Answer 4

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

Comme je l'ai dit, devrait être

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

Answer 5

Ceci est un « si elle peut aider quelqu'un » réponse, parce que je suis très en retard dans le jeu, mais vous pouvez également utiliser:

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

Lorsque la date sera affichée, la page ne sera pas actualisée.

NOTE S'IL VOUS PLAÎT

Vous MUST ajouter jquery.unobtrusive-ajax.js pour que cela fonctionne. Attention, dans le projet modèle ASP.NET MVC5, ce script est et non inclus par défaut, vous devez l'ajouter manuellement ou l'ajouter via le gestionnaire de paquets Nuget. Il n'est pas associé à jquery.validate.unobtrusive.js, qui est inclus par défaut.