MVC jQuery Formular senden (ohne Seitenaktualisierung) von JavaScript-Funktion

Question

Ich bin ziemlich neu zu all dem. Ich benutze ASP.NET MVC C# LINQ to SQL.

Ich habe eine Bearbeitungsseite, die Autoren und alle ihre Bücher lädt. Die Bücher werden über einen Anruf Ajax geladen.

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

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

Dieser Teil funktioniert gut. Die Seite lädt mit dem Autor Info, dann die Bücher Last (eine Teilansicht in einem DIV id = „Bücher“, nur mit dem Buch Kategorie und Buchtitel):

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

nun auf der Hauptansicht Seite I möchte einen Link haben. Wenn der Link angeklickt wird, möchte ich ein paar Dinge über JavaScript/jQuery/Ajax/was auch immer tun. Als erstes möchte ich das Books-Formular (id = booksform) aus der Teilansicht einreichen und dann mit der nächsten jQuery-Funktion fortfahren. Also klicke ich auf einen Link, der eine JavaScript-Funktion aufruft. Diese Funktion sollte die Einreichung des Books-Formulars aufrufen/ausführen.

Ich habe das Gefühl, dass ich alles versucht habe, aber ich kann mein Books-Formular nicht einreichen und verarbeiten, ohne dass eine vollständige Seite einreichen/aktualisieren stattfindet. (Beachten Sie, dass die Aktionen, die ich im Controller erwarten würde, erfolgreich ausgeführt werden, wenn die vollständige Übertragung stattfindet). Ich möchte, dass der Controller-Prozess/Aktion nichts anderes zurückgibt als irgendeine Art von Erfolgs-/Fehleranzeige. (Ich kann anrufen „LoadBooks();“ dann.? Erneut die DIV auf der Seite zu aktualisieren

Irgendwelche Ideen

Answer 1

Dies ist, wie ich das mit 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 

} 

ich davon aus, dass btnClicked Innenseite der Form ist:

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

wenn Link:

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

Wenn Link nicht innerhalb des Formulars müssen Sie nur jquery Selektoren verwenden, um es zu finden. Sie können id Form gesetzt und dann wie diese finden bilden:

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

Answer 2

Gibt es in Ihrem „Onclick“ JavaScript-Funktion ausführen und das Problem ist, dass die vollständige Seite einreichen/Refresh geschieht auch? In diesem Fall ist das Problem ist, dass Sie mit return false beenden Sie Ihre JavaScript-Funktion nicht.

Oder ist das Problem, dass Ihre „Onclick“ JavaScript-Funktion nicht aufgerufen wird, dann ist es schwer, zu sagen, ohne auf den Code zu schauen ... Wenn Sie JQuery-Selektor verwenden - dann wird der Link wahrscheinlich nicht vom Selektor ausgewählt

Answer 3

Ist das Ajax.BeginForm, die Sie verwenden müssen, nicht Html.BeginForm.

Answer 4

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

Wie ich schon sagte, sollte

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

Answer 5

sein Dies ist eine Antwort „wenn es jemand helfen kann“, weil ich sehr spät, um das Spiel bin, aber Sie können auch verwenden:

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

Wenn das Datum gebucht wird, wird die Seite nicht aktualisiert.

BITTE BEACHTEN

Sie MUSTjquery.unobtrusive-ajax.js hinzufügen, um diese zu arbeiten. Seien Sie vorsichtig, in ASP.NET MVC5 Vorlage Projekt ist dieses Skript nicht standardmäßig enthalten, müssen Sie es manuell hinzufügen oder es über Nuget Packet Manager hinzufügen.
Es bezieht sich nicht auf jquery.validate.unobtrusive.js, die standardmäßig enthalten ist.