31.Entity Framework: Creamos vista para editar
- Hola a todos. En este curso, analizaremos todos los conceptos básicos, intermedios y avanzados de ASP.NET Core que nos ayudan a crear aplicaciones web basadas en datos.Al final de este curso, podremos realizar todas las operaciones de un CRUD, es decir, crear, leer, actualizar y eliminar datos utilizando SQL Server como nuestra base de datos.
- En este vídeo veremos como implementar la vista Editar para modificar los datos existentes.Queremos mostrar los datos de los amigos existentes en la vista de edición. El usuario puede cambiar los detalles y hacer clic en el botón Actualizar para actualizar los datos en nuestra base de datos.
- Cuando se hace clic en el botón Editar, queremos redirigir a la vista Editar por lo que enlazamos de la siguiente manera:
- Nos creamos además la siguiente clase para los datos que necesitara utilizar nuestra vista EditarAmigoModelo que hereda de la CrearAmigoModelo. Utilizamos el enfoque de herencia para no duplicar el código Además de las propiedades que heredamos de la clase CrearAmigoModelo, también necesitamos Id y una propiedad con la ruta de la foto existente
public class EditarAmigoModelo:CrearAmigoModelo
{
public int Id { get; set; }
public string rutaFotoExistente { get; set; }
}
- Además añadimos en el controlador el siguiente código:
public ViewResult Edit(int id)
{
Amigo amigo = amigoAlmacen.dameDatosAmigo(id);
EditarAmigoModelo amigoEditar = new EditarAmigoModelo
{
Id = amigo.Id,
Nombre = amigo.Nombre,
Email = amigo.Email,
Ciudad = amigo.Ciudad,
rutaFotoExistente = amigo.rutaFoto
};
return View(amigoEditar);
}
Y en la vista edit.cshtml
@model EditarAmigoModelo
@{
ViewBag.Title = "Editar Amigo";
//El operador de uso combinado de NULL ?? devuelve el valor del operando izquierdo si no es null; en caso contrario,
//evalúa el operando derecho y devuelve su resultado.
var rutafoto = "~/images/" + (Model.rutaFotoExistente ?? "ChicaCodigo.jpg");
}
<form asp-controller="home" asp-action="edit" enctype="multipart/form-data" method="post" class="mt-3">
<div asp-validation-summary="All" class="text-danger">
</div>
@*Guardamos en elemtos hidden el id y la ruta de la foto exxistente*@
<input hidden asp-for="Id" />
<input hidden asp-for="rutaFotoExistente" />
@*Enlazamos los datos correspondientes para mostrarlos en los controles*@
<div class="form-group row">
<label asp-for="Nombre" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="Nombre" class="form-control" placeholder="Name">
<span asp-validation-for="Nombre" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Email" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="Email" class="form-control" placeholder="Email">
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Ciudad" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<select asp-for="Ciudad" class="custom-select mr-sm-2"
asp-items="Html.GetEnumSelectList<Provincia>()">
<option value="">Please Select</option>
</select>
<span asp-validation-for="Ciudad" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Foto" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<div class="custom-file">
<input asp-for="Foto" class="custom-file-input form-control">
<label class="custom-file-label">Click para modifcar al imagen</label>
</div>
</div>
</div>
@*Mostramos la foto del empleado*@
<div class="form-group row col-sm-4 offset-4">
<img class="imageThumbnail" src="@rutafoto" asp-append-version="true" />
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Editar</button>
<a asp-action="index" asp-controller="home" class="btn btn-primary">Volver</a>
</div>
</div>
@section Scripts {
<script>
$(document).ready(function () {
$('.custom-file-input').on("change", function () {
var fileName = $(this).val().split("\\").pop();
$(this).next('.custom-file-label').html(fileName);
});
});
</script>
}
</form>
En el controlador añadimos el siguiente código:
[HttpPost]
public IActionResult Edit(EditarAmigoModelo model)
{
//Comprobamos que los datos son correctos
if (ModelState.IsValid)
{
// Obtenemos los datos de nuestro amigo de la BBDD
Amigo amigo = amigoAlmacen.dameDatosAmigo(model.Id);
// Actualizamos los datos de nuestro objeto del modelo
amigo.Nombre = model.Nombre;
amigo.Email = model.Email;
amigo.Ciudad = model.Ciudad;
if (model.Foto != null)
{
//Si el usuario sube una foto.Debe borrarse la anterior
if (model.rutaFotoExistente != null)
{
string ruta = Path.Combine(hosting.WebRootPath,"images", model.rutaFotoExistente);
System.IO.File.Delete(ruta);
}
//Guardamos la foto en wwwroot/images
amigo.rutaFoto = SubirImagen(model);
}
Amigo amigoModificado = amigoAlmacen.modificar(amigo);
return RedirectToAction("index");
}
return View(model);
}
private string SubirImagen(EditarAmigoModelo model)
{
string nombreFichero = null;
if (model.Foto != null)
{
string carpetaSubida = Path.Combine(hosting.WebRootPath, "images");
nombreFichero = Guid.NewGuid().ToString() + "_" + model.Foto.FileName;
string ruta = Path.Combine(carpetaSubida, nombreFichero);
using (var fileStream = new FileStream(ruta, FileMode.Create))
{
model.Foto.CopyTo(fileStream);
}
}
return nombreFichero;
}
}
No hay comentarios:
Publicar un comentario