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?
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");
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.
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
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; }
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.
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