A continuacion se uestra un ejemplo en el cual el usuario envia nombre y edad y el servidor valida que la edad sea mayor o igual a 18, si es asi devuelva la respuesta "Ok", caso contrario devuelve un error.
Se crea el contenido html y el contenido ajax para llamar al metodo del controlador del servidor.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Crear persona meediante Ajax</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3>Crear Una Persona</h3>
<form action="/" method="post">
<div class="col-lg-12" style="margin-bottom: 20px;">
<div>
<span>Ingresa tu nombre: </span>
<input type="text" id="nombre" class="form-control" required="required" />
</div>
<div>
<span>Ingresa tu edad: </span>
<input type="number" id="edad" class="form-control" required />
</div>
<div>
<input style="margin-top: 10px;" type="button" ID="guardarPersona" value="Guardar Persona" class="btn btn-primary" />
</div>
</div>
</form>
</div>
<div class="col-lg-12">
<div id="resp" class="jumbotron"></div>
</div>
</div>
</div>
@section Scripts{
<script>
$(function () {
$("#guardarPersona").click(function () {
var url = "@Url.Action("CrearPersona", "Home")";
var nombre = $("#nombre").val();
var edad = $("#edad").val();
var data = { Nombre: nombre, Edad: edad };
$(document).ajaxStart(function () {
$("#resp").html("Cargando...");
});
$.post(url, data).done(function (data) {
$("#resp").html(data.Mensaje);
}).fail(function (response) {
$("#resp").html(response.responseText);
});
});
});
</script>
}
</body>
</html>
Se crea la función post que recibirá la data y que la procesara.
[HttpPost]
public JsonResult CrearPersona(Persona persona)
{
var resp = new BaseMensaje();
try
{
if(persona.Nombre == null || persona.Edad <= 0)
{
throw new ApplicationException("Algun elemento de la persona se encuentra vacio");
}
if(persona.Edad < 18)
{
throw new ApplicationException("La edad de la persona debe ser mayor o igual a 18 años");
}
resp.OK = true;
resp.Mensaje = "Transacción realizada correctamente";
} catch(Exception ex)
{
resp.OK = false;
resp.Mensaje = ex.Message;
}
return Json(resp);
}
No hay comentarios.:
Publicar un comentario