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


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

Tengo una página de edición que carga Autores y todos sus Libros. Los Libros se cargan mediante 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 parte está funcionando bien. La página se carga con la información del Autor, luego se cargan los Libros (una vista parcial en un DIV id="Books", solo con la Categoría del libro y el Título del libro):

<%@ 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 página de la vista principal quiero tener un enlace. Cuando se hace clic en el enlace quiero hacer un pocas 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 con la siguiente función jQuery. Por lo tanto, 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.

Siento que lo he intentado todo, pero no puedo obtener mi formulario de Libros para enviar y procesar sin una página completa enviar/actualizar teniendo lugar. (Nota, cuando el envío completo se lleva a cabo, las acciones que esperaría en el controlador se procesan con éxito). Quiero que el proceso/acción del controlador no devuelva nada más que algún tipo de indicación de éxito / fracaso. (Luego puedo llamar a "LoadBooks ();" de nuevo para actualizar el DIV en la página.

¿Alguna idea?

Author: Peter Mortensen, 2009-11-12

5 answers

Así 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

}

Asumí que btnClicked está dentro de la forma:

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

Si enlace:

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

Si el enlace no está dentro del formulario, solo tiene que usar selectores jquery para encontrarlo. Puede establecer id a la forma y luego encontrar la forma de esta manera:

var $form = $("#theformid");
 55
Author: Misha N.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-11-12 15:17:43

Es que Ajax.BeginForm que necesitas usar, no Html.BeginForm.

 3
Author: tuanvt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-11-12 13:06:37

¿Se ejecuta su función JavaScript" onclick " y el problema es que se realiza el envío/actualización de la página completa también? En este caso, el problema es que no termina su función JavaScript con return false.

¿O es el problema que su función JavaScript "onclick" no se llama en absoluto? Entonces es difícil decirlo sin mirar el código... Si utiliza jQuery selector - entonces probablemente el enlace no es elegido por el selector

 1
Author: Felix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-11-12 07:04:01
<a href = "javascript: SaveProperties();">Save properties</a>
SaveProperties() { $('#bevpropform').submit(); }

Como dije antes, debe ser

SaveProperties() { $('#bevpropform').submit(); return false; }
 1
Author: Felix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-11-12 22:30:47

Esta es una respuesta "si puede ayudar a alguien", porque llego muy tarde al juego, pero también puedes usar :

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

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


TENGA EN CUENTA

Usted DEBE agregar jquery.unobtrusive-ajax.js para que esto funcione. Ten cuidado, en ASP.NET Proyecto de plantilla MVC5, este script está no incluido de forma predeterminada, debe agregarlo manualmente o agregarlo a través de Nuget packet manager.
No está relacionado con jquery.validate.unobtrusive.js, que se incluye predeterminada.

 0
Author: AlexB,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-20 17:00:07