A continuación se muestra unos ejemplos de uso de ajax.BeginForm():
Primero mediante nuget es necesario descargar la librería "jquery.unobtrusive-ajax.min.js" e incluirla a nivel global y local en el documento en cuestión.
Se procede a crear el documento donde se plasma la sintaxis de como llamar a un Ajax.BeginForm:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Ajax Begin Form</title>
</head>
<body>
<div>
<h3>1. Ejemplo Con Ajax Form</h3>
@using (Ajax.BeginForm("Duplicador", "Home", null, new AjaxOptions()
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "spanDuplicado"
}))
{
<input type="number" data-val="true" data-val-required="Campo requerido" name="cantidad" class="form-control" /> <input style="margin-top: 10px; margin-bottom: 10px;" type="submit" value="Duplicar" class="btn btn-primary" />
}
Resultado: <span id="spanDuplicado"></span>
</div>
@section Scripts{
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
}
</body>
</html>
Se crea el método Post que recibe la petición y devuelve la respuesta:
[HttpPost]
public ActionResult Duplicador(int cantidad)
{
var duplicado = cantidad * 2;
return Json(duplicado);
}
A continuación se detalla un ejemplo ajax con mas opciones del metodo BeginForm():
Dentro del metodo Ajax.BeginForm se detallan los metodos adicionales que se pueden utilizar
@using (Ajax.BeginForm("Duplicador", "Home", null, new AjaxOptions()
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "spanDuplicado",
LoadingElementId = "loading",
Confirm = "Estas seguro que deseas duplicar el número?",
OnBegin = "onBegin",
OnSuccess = "onSuccess",
OnComplete = "onComplete",
OnFailure = "onFailure"
}))
{
<input type="number" data-val="true" data-val-required="Campo requerido" name="cantidad" class="form-control" />
<div id="loading" style="display:none;">cargando</div>
<input style="margin-top: 10px; margin-bottom: 10px;" type="submit" value="Duplicar" class="btn btn-primary" />
}
Resultado: <span id="spanDuplicado"></span>
Este es el resultado, siendo que las funciones on, llaman a métodos de console.log:
No hay comentarios.:
Publicar un comentario