MVC jQuery przesłać formularz (bez odświeżania strony) z funkcji JavaScript

Question

Jestem całkiem nowy na to wszystko. Używam ASP.NET MVC C# LINQ to SQL.

Mam stronę edycji, która ładuje autorów i wszystkie ich książki. Księgi ładowane są za pomocą wywołania Ajax.

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

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

Ta część działa bez zarzutu. Obciążenia stronę z informacją Autor, wówczas obciążenia Książki (częściowy widok w div id = „Książki”, właśnie z kategorią Book i Book tytuł):

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

teraz, w głównym widoku Strona I chcesz mieć link. Po kliknięciu łącza chcę zrobić kilka rzeczy za pomocą JavaScript/jQuery/Ajax/cokolwiek. Pierwszą rzeczą, którą chcę zrobić, jest przesłanie formularza Książki (id = booksform) z widoku częściowego, a następnie przejście do następnej funkcji jQuery. Klikam więc link, który wywołuje funkcję JavaScript. Ta funkcja powinna wywoływać/wykonywać/wykonywać wysyłanie formularza Książek.

Czuję, że wypróbowałem wszystko, ale nie mogę pobrać formularza książki do przesłania i przetworzenia bez pełnego przesłania/odświeżenia strony. (Uwaga: kiedy ma miejsce pełne przesłanie, operacje, których oczekuję w kontrolerze, zostaną pomyślnie przetworzone). Chcę, aby proces/akcja kontrolera zwracał tylko pozory sukcesu/porażki. (Mogę wtedy nazywamy „LoadBooks();”.? Ponownie, aby odświeżyć DIV na stronie

Wszelkie pomysły

Answer 1

To jak to zrobić z 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 

} 

Sądziłem, że btnClicked jest wewnątrz formularza:

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

jeśli Link:

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

Jeśli link jest nie wewnątrz formularza, wystarczy użyć selektorów jquery, aby go znaleźć. Można ustawić identyfikator do formularza, a następnie znaleźć tworzą tak:

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

Answer 2

Czy Twój „onclick” funkcji JavaScript wykonać i problem jest to, że cała strona złożyć/odświeżania dzieje także? W tym przypadku problemem jest to, że nie kończy swoją funkcję JavaScript z return false.

Albo jest problem, że twój „onclick” funkcji JavaScript nie jest nazywany w ogóle? Wtedy trudno powiedzieć bez patrzenia na kod ... Jeśli używasz selektora JQuery - to prawdopodobnie link nie zostanie wybrany przez selektor

Answer 3

Czy Ajax.BeginForm że trzeba użyć, nie Html.BeginForm.

Answer 4

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

Jak powiedziałem wcześniej, powinien być

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

Answer 5

Jest to „jeśli to może pomóc komuś” odpowiedź, ponieważ jestem bardzo późno do gry, ale można również użyć:

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

Po zaksięgowaniu daty strona nie zostanie odświeżona.

UWAGA

Ty MUST dodać jquery.unobtrusive-ajax.js aby to zadziałało. Uwaga: w projekcie szablonu ASP.NET MVC5 ten skrypt jest domyślnie zawarty w nie, należy go dodać ręcznie lub dodać za pomocą menedżera pakietów Nuget.
Nie jest powiązany z jquery.validate.unobtrusive.js, który jest domyślnie dołączony.