A continuación se muestra eun ejemplo de $.get en el ccual se obtiene un listado de personas.
Se crea el html y el método get que hará la petición al servidor.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Obtener listado de personas</title>
</head>
<body>
<div style="margin-top: 20px">
<input type="number" id="Edad" value="0" class="form-control" />
<br />
<input type="button" id="obtenerListado" class="btn btn-primary" value="Obtener Listado" />
</div>
<div id="resultado" style="margin-top: 10px;"></div>
@section Scripts{
<script>
$(function () {
$("#obtenerListado").click(function () {
var url = "@Url.Action("ObtenerPersona", "Home")";
var Edad = $("#Edad").val();
var data = { Edad: Edad };
$.get(url, data).done(function (data) {
$("#resultado").html(data);
});
});
});
</script>
}
</body>
Se crea un método en el servidor que recibe la petición y genera una vista parcial que formatea y devuelve el resultado.
[HttpGet]
public ActionResult ObtenerPersona(int Edad = 0)
{
var persona = new List<Persona> {
new Persona{ Nombre = "Carlos Flores", Edad = 30},
new Persona{ Nombre = "Jhosef Flores", Edad = 29},
new Persona{ Nombre = "Jenny Fonseca", Edad = 26},
new Persona{ Nombre = "Camila Ramirez", Edad = 10},
new Persona{ Nombre = "Marjeory Galvez", Edad = 52},
new Persona{ Nombre = "David Flores", Edad = 30},
};
if(Edad > 0)
{
persona = persona.Where(x => x.Edad >= Edad).ToList();
}
return PartialView("_ObtenerPersonaParcial", persona);
}
Se crea la vista que recibe y formatea la información.
@model IEnumerable<JavaScriptEsencial.Models.Persona>
<table class="table table-bordered table-striped">
<tr>
<td>@Html.DisplayNameFor(model => model.Nombre)</td>
<td>@Html.DisplayNameFor(model => model.Edad)</td>
</tr>
@foreach (var persona in Model)
{
<tr>
<td>@Html.DisplayFor(model => persona.Nombre)</td>
<td>@Html.DisplayFor(model => persona.Edad)</td>
</tr>
}
</table>
Se muestra el resultado final donde al dar clic se muestra el listado de usuarios.
No hay comentarios.:
Publicar un comentario