MVC jQuery enviar formulario (sin actualización de página) desde la función de JavaScript

Question

Soy bastante nuevo en todo esto. Estoy usando ASP.NET MVC C# LINQ to SQL.

Tengo una página de edición que carga los autores y todos sus libros. Los libros se cargan a través de una llamada Ajax.

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

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

Esta pieza funciona bien. Se carga la página con la información del autor, entonces la carga Books (una vista parcial en un div id = "Libros", simplemente con la categoría de libro y libro Título):

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

Ahora, en la vista de página principal quiero tener un enlace. Cuando se hace clic en el enlace, quiero hacer algunas cosas a través de JavaScript/jQuery/Ajax/lo que sea. Lo primero que quiero que suceda es enviar el formulario de Libros (id = booksform) desde la vista parcial, luego continuar a la siguiente función jQuery. Entonces, hago clic en un enlace que llama a una función de JavaScript. Esta función debe llamar/hacer/ejecutar el envío del formulario de Libros.

Creo que lo he intentado todo, pero no puedo enviar el formulario de mi libro para enviarlo y procesarlo sin que se haya enviado o actualizado la página completa. (Tenga en cuenta que, cuando se realiza la presentación completa, las acciones que esperaría en el controlador se procesan correctamente). Quiero que el proceso/acción del controlador devuelva nada más que algún tipo de indicación de éxito/falla. (Entonces puedo llamar "LoadBooks();".? De nuevo para actualizar la DIV en la página

Cualquier idea

Answer 1

Esto es como lo hago 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 

} 

que supone que btnClicked está dentro de la forma:

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

Si el enlace:

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

Si el enlace es no dentro de la forma, solo tienes que usar los selectores de jquery para encontrarlo. Es posible programar una ID a la forma y luego encontrar formar de esta manera:

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

Answer 2

¿Su "onclick" JavaScript ejecutar la función y el problema es que la página completa submit/actualización ocurre así? en este caso el problema es que usted no termina su función de JavaScript con return false.

O es el problema de que su "onclick" función de JavaScript no se llama en absoluto, entonces es difícil decir sin mirar el código ... Si usa el selector JQuery, entonces probablemente el selector no elija el enlace

Answer 3

Es eso Ajax.BeginForm que tiene que utilizar, no Html.BeginForm.

Answer 4

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

Como he dicho antes, debe ser

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

Answer 5

Ésta es una respuesta "si puede ayudar a alguien", porque soy muy tarde para el juego, pero también se puede utilizar:

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

Cuando se publique la fecha, la página no se actualizará.

NOTA

Usted MUST añadir jquery.unobtrusive-ajax.js con el fin de que esto funcione. Tenga cuidado, en el proyecto de plantilla ASP.NET MVC5, este script es no incluido de manera predeterminada, debe agregarlo manualmente o agregarlo a través del administrador de paquetes Nuget. No está relacionado con jquery.validate.unobtrusive.js, que está incluido por defecto.