web-dev-qa-db-fra.com

Formulaire de soumission MVC jQuery (sans actualisation de page) à partir de la fonction JavaScript

Je suis assez nouveau dans tout ça. 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 bien. La page se charge avec les informations de l'auteur, puis les livres se chargent (une vue partielle dans un DIV id = "Books", juste avec la catégorie et le 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 d'affichage principale, je veux 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) à partir de la vue partielle, puis de passer à la fonction jQuery suivante. Donc, je clique sur un lien qui appelle une fonction JavaScript. Cette fonction doit appeler/faire/exécuter la soumission du formulaire Livres.

J'ai l'impression d'avoir tout essayé, mais je n'arrive pas à envoyer et à traiter mon formulaire Livres sans qu'une page complète ne soit soumise/actualisée. (Remarque: lorsque la soumission complète a lieu, les actions que j'attends du contrôleur sont correctement traitées). Je souhaite que le processus/l'action du contrôleur ne renvoie rien d'autre qu'une sorte d'indication de réussite/d'échec. (Je peux alors appeler à nouveau "LoadBooks ();" pour rafraîchir le DIV sur la page.

Des idées?

jqueryasp.net-mvcajaxform-submit
31
johnnycakes

Voici comment je fais ça 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

}

J'ai supposé que btnClicked est à l'intérieur du formulaire:

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

si lien:

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

Si le lien n'est pas à l'intérieur du formulaire, il vous suffit d'utiliser des sélecteurs jquery pour le trouver. Vous pouvez définir id sur le formulaire, puis rechercher un formulaire comme celui-ci:

var $form = $("#theformid");
60
Misha N.

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

3
tuanvt

Votre fonction JavaScript "onclick" s'exécute-t-elle et le problème est que la soumission/actualisation de la page complète se produit également ? Dans ce cas, le problème est que vous ne terminez pas votre fonction JavaScript avec return false.

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

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

Comme je l'ai déjà dit, devrait être

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

Il s'agit d'une réponse "si cela peut aider quelqu'un", car 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 publiée, la page ne sera pas actualisée.


VEUILLEZ NOTER

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

1
AlexB