tutoriales informáticos ¿Cómo crear un sitio Web? Aprende a dominar Wordpress Incrementa tu visibilidad (SEO) Servicios de alojamiento web L'actualité, guides et tutoriaux du moment
HébergementWebs.com : L'actualités, guides et tutoriaux du moment
Nuestros servicios
SEO
Wordpress
Sitio Web
Tutoriales

ÁSPID. NET Core: formulario de edición de Razor

Tutorial principal de asp.net
2020-11-20 03:22:38

ASP.NET Core - Formulario de edicion de Razor


En este capitulo, continuaremos discutiendo los ayudantes de etiquetas. Tambien agregaremos una nueva funcion en nuestra aplicacion y le daremos la capacidad de editar los detalles de un empleado existente. Comenzaremos agregando un enlace al lado de cada empleado que ira a una accion Editar en el HomeController.

@model HomePageViewModel @ {ViewBag.Title = "Home}

¡Bienvenido!

@foreach (empleado var en Model.Employees) {}
@ employee.Name Detalles Editar

Aun no tenemos la accion Editar, pero necesitaremos un ID de empleado que podamos editar.cree una nueva vista haciendo clic con el boton derecho en la carpeta Vistas → Inicio y seleccionando Agregar → Nuevos elementos .

En el panel central, seleccione la vista de pagina MVC; llame a la pagina Edit.cshtml. Ahora haga clic en el Boton Agregar.

Agregue el siguiente codigo al archivo Edit.cshtml .

@model Employee @ {ViewBag. Titulo = $ "Editar {Model.Name}}

Editar @ Model.Name

Para el titulo de esta pagina podemos decir que queremos editar y luego proporcionar el nombre del empleado.

  • El signo de dolar delante de Editar permitira que el tiempo de ejecucion reemplace Model.Name con un valor que este en esta propiedad como el nombre del empleado.

  • Dentro de la etiqueta del formulariopodemos usar ayudantes de etiquetas como asp-action y asp-contr oller. para que cuando el usuario envie este formulario, vaya directamente a una accion especifica del controlador.

  • En este caso, queremos ir a la accion Editar en el mismo controlador y queremos decir explicitamente que para el metodo en este formulario debe usar un HttpPost .

  • El metodo predeterminado para un formulario es GET, y no queremos editar a un empleado mediante una operacion GET.

  • En la etiqueta de etiqueta, hemos utilizado el asistente de etiquetas asp-for que indica que se trata de una etiqueta para la propiedad Name del modelo. Este asistente de etiquetas puede configurar el atributo Html.For para que tenga el valor correcto y establecer el texto interno de esta etiqueta para mostrar realmente lo que queremos, como el nombre de la etiqueta. empleado.

Vayamos a la class HomeController yagreguemos la accion Editar que devuelve la vista que le da al usuario un formulario para editar un empleado, luego necesitaremos una segunda accion Editar que respondera a un HttpPost como se muestra a continuacion abajo.

[HttpGet] Public IActionResult Edit (int id) {var context = new FirstAppDemoDbContext SQLEmployeeData sqlData = new SQLEmployeeData (contexto); var modelo = sqlData.Get (id); if (modelo == null) {return RedirectToAction ( "Index "); } return View (modelo); }

Primero, necesitamos una accion de edicion que responda a una solicitud GET. Necesitara una identificacion de empleado. El codigo aqui sera similar al codigo que tenemos en la accion Detalles. Primero extraeremos los data del empleado que el usuario quiere modificar. Tambien debemos asegurarnos de que el empleado realmente exista. Si no existe, redirigiremos al usuario a la vista de indice. Pero cuando un empleado thxist, renderizaremos la vista Editar.

Tambien debemos responder al HttpPost que enviara el formulario.

Agreguemos una nueva class en HomeController .cs como se muestra en el siguiente programa.

public class EmployeeEditViewModel {[Required, MaxLength (80)] public string Name {get; juntos; }}

En la accion de edicion que respondera al HttpPost se tomara un EmployeeEditViewModel, pero no un empleado en si, ya que solo queremos capturar los elementos que tienen forma en el archivo de edicion. cshtml.

La siguiente es la implementacion de la accion Editar.

[HttpPost] public IActionResult Edit (int id, entrada EmployeeEditViewModel) {var context = new FirstAppDemoDbContext SQLEmployeeData sqlData = new SQLEmployeeData (contexto); empleado var = sqlData.Get (id); if (employee! = null && ModelState.IsValid) {employee.Name = input.Name; context.SaveChanges return RedirectToAction ( "Detalles ", nuevo {id = employee.Id}); } return View (empleado); }

El formulario de edicion siempre debe enviarse desde una URL que tenga una identificacion en la URL de acuerdo con nuestras reglas de enrutamiento, algo asi como / home / edit / 1 .

  • El formulario siempre sera devuelto a esta misma URL, /home/edit/1.

  • El marco MVC puede extraer este ID de la URL y pasarlo como parametro.

  • Siempre debemos verificar si ModelState es valido y tambien asegurarnos de que este empleado este en la base de data y que no sea nulo antes de realizar una operacion de actualizacion en la base de data.

  • Si nada de esto es cierto, devolveremos una vista y permitiremos que el usuario vuelva a intentarlo. Aunque en una aplicacion real con usuarios concurrentes, si el empleado es nulo, puede ser porque faltan los data del empleado.ha sido eliminado por alguien.

  • Si este empleado no existe, digale al usuario que el empleado no existe.

  • De lo contrario, marque ModelState. Si ModelState no es valido, devuelve una vista. Esto corrige el cambio y hace que ModelState sea valido.

  • Copie el nombre de la plantilla de la vista de entrada al empleado extraido de la base de data y guarde los cambios. El metodo SaveChagnes () volcara todas estas modificaciones en la base de data.

La siguiente es la implementacion completa de HomeController.

usando Microsoft.AspNet.Mvc; utilizando FirstAppDemo.ViewModels; utilizando FirstAppDemo.Services; utilizando FirstAppDemo.Entities; utilizando FirstAppDemo.Models; utilizando System.Collections.Generic; utilizando System.Linq; utilizando System.ComponentModel.DataAnnotations; espacio de nombres FirstAppDemo.Controllers {class publica HomeController: Controller {public ViewResult Index () {var model = new HomePageViewModel usando (var context = new FirstAppDemoDbContext ()) {SQLEmployeeData sqlData = new SQLEmployeeData (contexto); model.Employees = sqlData.GetAll } return View (modelo); } Detalles publicos IActionResult (int id) {var context = new FirstAppDemoDbContext SQLEmployeeData sqlData = new SQLEmployeeData (contexto); var model = sqlData.Get (id) if (model == null) {return RedirectToAction ( "Index "); } return View (modelo); } [HttpGet] edicion publica de IActionResult (int id) {var context = new FirstAppDemoDbContext SQLEmployeeData sqlData = new SQLEmployeeData (contexto); var modelo = sqlData.Get (id); if (modelo == null) {return RedirectToAction ( "Index "); } return View (modelo); } [HttpPost] Public IActionResult Edit (int id, entrada EmployeeEditViewModel) {var context = new FirstAppDemoDbContext SQLEmployeeData sqlData = new SQLEmployeeData (contexto); empleado var = sqlData.Get (id); si (empleado! = nulo && ModelState.IsValid) {employee.Name = input.Name; context.SaveChanges return RedirectToAction ( "Detalles ", nuevo {id = employee.Id}); } return View (empleado); }} class publica SQLEmployeeData {FirstAppDemoDbContext privado _context {get; juntos; } public SQLEmployeeData (contexto FirstAppDemoDbContext) {_context = contexto; } public void Add (Empleado emp) {_context.Add (emp); _context.SaveChanges } Public Employee Get (ID int) {return _context.Employees.FirstOrDefault (e => e.Id == ID); } public IEnumerable GetAll () {return _context.Employees.ToList }} Public class HomePageViewModel {publico IEnumerable Empleados {get; juntos; }} public class EmployeeEditViewModel {[Requerido, MaxLength (80)] cadena publica Name {get; juntos; }}}

Compilemos el programa y ejecutemos la aplicacion.

ASP .NET Core - Formulario de edicion de Razor

Ahora tenemos un enlace de edicion disponible;Editemos los detalles de Josh haciendo clic en el enlace Editar.

Cambiemos el nombre a Josh Groban.

 ASP.NET Core - Formulario de edicion de Razor

Haga clic en el boton Guardar.

Puede ver que el nombre se ha cambiado a Josh Groban como se muestra arriba en la captura d 'pantalla Ahora hagamos clic en el enlace de Inicio.

En la pagina de inicio, ahora vera el nombre actualizado.

ÁSPID. NET Core: excepciones ÁSPID. NET Core: excepciones

ÁSPID. NET Core: excepciones

  • 2020-11-20 13:44:02 | Tutorial principa...

ASP. NET Core: excepcionesEn este capítulo, discutiremos las excepciones y el manejo de errores. Cuando se producen errores en su aplicación ASP. NET Core, hay varias formas de manejarlos. Veamos otro middleware disponible a través del paquete de diagnóstico. Este middleware nos ayudará a solucionar...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core: archivos estáticos ÁSPID. NET Core: archivos estáticos

ÁSPID. NET Core: archivos estáticos

  • 2020-11-20 13:43:47 | Tutorial principa...

ASP. NET Core: archivos estáticosEn este capítulo aprenderemos a trabajar con archivos. Una característica importante que casi todas las aplicaciones web necesitan es la capacidad de servir archivos (archivos estáticos) desde el sistema de archivos. Los archivos estáticos como archivos JavaScript, i...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core: Guía rápida ÁSPID. NET Core: Guía rápida

ÁSPID. NET Core: Guía rápida

  • 2020-11-20 03:40:45 | Tutorial principa...

ASP. NET Core: Guía rápidaASP. NET Core: descripción generalASP. NET Core es el nuevo marco web de Microsoft. Ha sido completamente rediseñado para ser rápido, flexible, moderno y funcionar en diferentes plataformas. En el futuro, ASP. NET Core es el marco que se puede utilizar para el desarrollo we...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core: configurar MVC ÁSPID. NET Core: configurar MVC

ÁSPID. NET Core: configurar MVC

  • 2020-11-20 03:26:48 | Tutorial principa...

ASP. NET Core: configurar MVCEn este capítulo, configuraremos el marco MVC en nuestra aplicación FirstAppDemo. Haremos esto mediante la creación de una aplicación web sobre ASP. NET Core y, más específicamente, el marco ASP. NET Core MVC. Técnicamente, podemos construir una aplicación completa usand...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core - Patrón de diseño MVC ÁSPID. NET Core - Patrón de diseño MVC

ÁSPID. NET Core - Patrón de diseño MVC

  • 2020-11-20 03:26:27 | Tutorial principa...

ASP. NET Core - Plantilla de diseño MVCEl patrón de diseño MVC (Model-View-Controller) es un patrón de diseño que ha existido durante algunas décadas y se ha utilizado en muchas tecnologías diferentes, desde Smalltalk hasta C ++, Java y ahora C # y. NET como plantilla de diseño para usar al crear un...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core: enrutamiento ÁSPID. NET Core: enrutamiento

ÁSPID. NET Core: enrutamiento

  • 2020-11-20 03:26:12 | Tutorial principa...

ASP. NET Core: enrutamientoEn el marco MVC, tenemos tres componentes, cada uno con su propio enfoque en una parte específica del trabajo. Para que esto funcione, necesitamos encontrar una manera de enviar estas solicitudes HTTP al controlador correcto. En ASP. NET Core MVC, este proceso se denomina ...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core: rutas de atributos ÁSPID. NET Core: rutas de atributos

ÁSPID. NET Core: rutas de atributos

  • 2020-11-20 03:25:45 | Tutorial principa...

ASP. NET Core: rutas de atributosEn este capítulo aprenderemos otro enfoque del enrutamiento y ese es el enrutamiento basado en atributos. Con el enrutamiento basado en atributos, podemos usar atributos de C # en nuestras clases de controlador y en los métodos internamente en esas clases. Estos atri...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core: resultados de la acción ÁSPID. NET Core: resultados de la acción

ÁSPID. NET Core: resultados de la acción

  • 2020-11-20 03:25:27 | Tutorial principa...

ASP. NET Core: resultados de la acciónEn este capítulo discutiremos los resultados de las acciones. En los capítulos anteriores, usamos clases de C # simples y directas como controladores. Estas clases no se derivan de una clase base y puede usar este enfoque con MVC, pero es más común derivar un co...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core - Vistas ÁSPID. NET Core - Vistas

ÁSPID. NET Core - Vistas

  • 2020-11-20 03:25:08 | Tutorial principa...

ASP. NET Core - VistasEn una aplicación ASP. NET Core MVC, nada como una página, y tampoco incluye nada que corresponda directamente a una página cuando especifica una ruta en la URL. Lo más parecido a una página en una aplicación ASP. NET Core MVC se llama vista. Como sabe en la aplicación ASP. NET...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core: configurar Entity Framework ÁSPID. NET Core: configurar Entity Framework

ÁSPID. NET Core: configurar Entity Framework

  • 2020-11-20 03:24:49 | Tutorial principa...

ASP. NET Core: configuración de Entity FrameworkEn este capítulo, instalaremos y configuraremos nuestra aplicación para registrar y leer datos de una base de datos de SQL Server. Para trabajar con una base de datos, usaremos Entity Framework, que se ha reescrito recientemente para funcionar con el n...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core - DBContext ÁSPID. NET Core - DBContext

ÁSPID. NET Core - DBContext

  • 2020-11-20 03:24:34 | Tutorial principa...

ASP. NET Core - DBContextEntity Framework le permite consultar, insertar, actualizar y eliminar datos utilizando objetos Common Language Runtime (CLR) llamados entidades. Entity Framework asigna las entidades y relaciones definidas en su modelo a una base de datos. También proporciona funcionalidad ...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core - Vistas de diseño de Razor ÁSPID. NET Core - Vistas de diseño de Razor

ÁSPID. NET Core - Vistas de diseño de Razor

  • 2020-11-20 03:23:59 | Tutorial principa...

ASP. NET Core - Vistas de diseño de RazorEn este capítulo, entenderemos las vistas de diseño de Razor. La mayoría de los sitios web y aplicaciones web querrán crear páginas que tengan algunos elementos en común. Por lo general, tiene un área superior en cada página donde muestra un logotipo y un men...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core: inicio de la vista Razor ÁSPID. NET Core: inicio de la vista Razor

ÁSPID. NET Core: inicio de la vista Razor

  • 2020-11-20 03:23:36 | Tutorial principa...

ASP. NET Core: inicio de vista de RazorEn este capítulo, tenemos el inicio de Razor View. Razor View Engine en MVC tiene una convención en la que buscará cualquier archivo con el nombre _ViewStart. cshtml y ejecutará el código dentro de ese archivo. antes de ejecutar el código en una vista individua...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core: importación de la vista Razor ÁSPID. NET Core: importación de la vista Razor

ÁSPID. NET Core: importación de la vista Razor

  • 2020-11-20 03:23:20 | Tutorial principa...

ASP. NET Core: importación de la vista RazorEn este capítulo, tenemos la importación de Razor View. Además del archivo ViewStart, también hay un archivo ViewImports que el marco MVC buscará al renderizar una vista. Al igual que el archivo ViewStart, podemos eliminar ViewImports. cshtml en una carpet...

  • facebook
  • twitter
  • xing
  • linkedin
ÁSPID. NET Core - Ayuda de la etiqueta Razor ÁSPID. NET Core - Ayuda de la etiqueta Razor

ÁSPID. NET Core - Ayuda de la etiqueta Razor

  • 2020-11-20 03:23:01 | Tutorial principa...

ASP. NET Core: ayudantes de etiquetas de RazorLos asistentes de etiquetas permiten que el código del lado del servidor participe en la creación y representación de elementos HTML en archivos Razor. Los asistentes de etiquetas son una nueva característica similar a los asistentes de HTML, que nos ayu...

  • facebook
  • twitter
  • xing
  • linkedin