Segundo Reto

Clase 30 de 35 • Curso de ASP.NET Core

Contenido del curso

Introducción a ASP.NET Core

Mi primera aplicación ASP.Net Core

Modelo Vista Controlador a nivel básico

Vistas Plantillas y modelo

Entity Framework Core

Ajuste de vistas y formularios

Atributos de validación y bases de datos

Diseño de vistas y controladores optimizado

Deploy del sitio

Tomar examen

Comentarios

Alexander Armúa Abregu

student•

Ejemplo de uso para jQuery Unobtrusive Validation:

Brandon Ramsel Vite Delgadillo

student•

Excelente aporte, gracias!!

Equipo Produccion

student•

jQuery Unobtrusive Validation

Andres Felipe Campos Peñaranda

student•

validación en modelo curso ![](

validación en vista create curso

![](

Alexander Armúa Abregu

student•

Para utilizar las validaciones de Jquery modifiqué el campo nombre, dejo un ejemplo del archivo “/curso/Create.cshtml”

<style>
    .invalid-feedback {
        display: block; /* Bootstrap oculta este campo a menos que el formulario tenga otras clases, por eso el workaround */
    }
</style>
<form method="POST">
    <div class="form-row">
        <div class="form-group">
            @Html.LabelFor(x => x.Nombre)
            @Html.TextBoxFor(x => x.Nombre, new { @class = "form-control" } )
            <!-- Aca muestra el mensaje de error -->
            @Html.ValidationMessageFor(x => x.Nombre, "", new { @class = "invalid-feedback" })
        </div>
    </div>
   <!-- Resto del formulario -->
</form>

José Guadalupe Hernández Rosas

student•

Todo bien en las documentaciones de la validacion con jquery, pero me trabo en la parte del web.config ¿Dónde está eso? ¿es parte de algún script o es un script aparte en las carpetas?

Daniel Benjamín Portada Zecua

student•

el archivo web.config siempre está en la raiz de tu proyecto .NET, es el equivalente al archivo .htaccess para los sitios hechos con php

Carlos Javier Bazan Huaman

student•

el reto es muy largo jajajaja, pero esta bueno para practicar, a darle con el reto.

Gustavo Olmedo

student•

Excelente la recomendación para validar del lado del cliente usando los modelos ya creados, lo implemente en el proyecto y funciona muy bien.

Oscar Jaramillo

student•

Excelente!

Luis Abdel Rangel Castro

student•

Utilizando Unobtrusive Validation

No logro que al hacer click en el boton submit solo haga la validación local. Siempre envía los datos al servidor.

Que me recomiendan?

Oscar Eduardo Palomino Cárdenas

student•

Solución del reto.

Julián Mejia

student•

que bueno.

Janer Tegue

student•

Es StringLength

Cristhian Coaquira

student•

Agregue en mi vista parcial validaciones por campos asi:

@model SchoolBase
&lt;form asp-action=@ViewData[&quot;Method&quot;] method=&quot;post&quot;&gt;
    &lt;input type=&quot;hidden&quot; asp-for=&quot;Id&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label asp-for=&quot;Name&quot;&gt;&lt;/label&gt;
        &lt;input asp-for=&quot;Name&quot; class=&quot;form-control&quot;&gt;
        &lt;span asp-validation-for=&quot;Name&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
    @if (Model is Course)
    {
        var aux = Model as Course;
        @Html.Hidden(&quot;SchoolId&quot;, aux.SchoolId)
        &lt;div class=&quot;form-group&quot;&gt;
            @Html.LabelFor(model =&gt; aux.Address)
            @Html.TextBox(&quot;Address&quot;, aux.Address, null, new { @class = &quot;form-control&quot;})
            @Html.ValidationMessage(&quot;Address&quot;, null, new { @class = &quot;text-danger&quot; })
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            @Html.LabelFor(model =&gt; aux.Schedule)
            @Html.DropDownList(&quot;Schedule&quot;, Html.GetEnumSelectList&lt;Schedules&gt;(), null, new { @class=&quot;form-control&quot; })
            @Html.ValidationMessage(&quot;Schedule&quot;, null, new { @class = &quot;text-danger&quot; })
        &lt;/div&gt;
    }else if (Model is Student || Model is Subject)
    {
        var aux = Model as Student;
        &lt;div class=&quot;form-group&quot;&gt;
            @Html.LabelFor(model =&gt; aux.CourseId)
            @Html.DropDownList(&quot;CourseId&quot;, ViewBag.CourseId, null, new { @class=&quot;form-control&quot; })
            @Html.ValidationMessage(&quot;CourseId&quot;, null, new { @class = &quot;text-danger&quot; })
        &lt;/div&gt;
    }    
    &lt;input type=&quot;submit&quot; class=&quot;btn btn-success&quot; value=&quot;Send&quot;&gt;
    &lt;a asp-action=&quot;Index&quot; class=&quot;btn btn-secondary&quot;&gt;Return&lt;/a&gt;
&lt;/form&gt;

Y no pude agregar la importacion de la libreria unobtrusive en la vista parcial por que el diseño de .net core no te permite cargar @section en vistas parciales por lo que tuve que agregar las librerias en las vistas asi

@model Course
@{
    ViewData[&quot;Title&quot;] = &quot;Create Course&quot;;
    ViewData[&quot;Method&quot;] = &quot;Create&quot;;
}
&lt;h1&gt;@ViewData[&quot;Title&quot;]&lt;/h1&gt;
&lt;partial name=&quot;FormSchoolBase&quot; view-data=&quot;ViewData&quot; /&gt;
@section Scripts {
    @{await Html.RenderPartialAsync(&quot;_ValidationScriptsPartial&quot;);}
}

Carlos Orjuela

student•

Aquí mi aporte: _

Modelo: _

public class Curso : ObjetoBase
    {
        [Required(ErrorMessage = &quot;Campo nombre requerido&quot;)] // Campo requerido
        [StringLength(8)] // Longitud maxima del nombre
        [MinLength(3)] // Longitud minima del nombre
        ///[DivisibleEntreAtributos(ErrorMessage = &quot;Correo no valido&quot;)]
        public override string Nombre { get; set; } // override: Al ser este un campo virtual de la clase padre, es necesario indicar que vamos a sobre escribir su comportamiento, para eso usamos: override
        public string EscuelaId { get; set; } /// Autoaticamente el motor, por convención infiere que me estoy relacionando al 'Id' de la 'Escuela'
        public Escuela Escuela { get; set; }
        public TiposJornada Jornada { get; set; }
        public List&lt;Asignatura&gt; Asignaturas { get; set; }
        public List&lt;Alumno&gt; Alumnos { get; set; }

        [Display(Prompt = &quot;Dirección correspondencia&quot;, Name = &quot;Address&quot;)] // Prompt =&gt; Marca de agua que describe el contenido en una caja de texto, Name =&gt; nombrea  mostrar en un label que mapea el campo (Eje:&lt;label asp-for=&quot;Dirección&quot;&gt;&lt;/label&gt;)
        [Required(ErrorMessage = &quot;Dirección requerida&quot;)] // Campo requerido, con mensaje de exepción personalizado
        [MinLength(5, ErrorMessage = &quot;Longitud minima requerida es 5&quot;)] // Longitud minima del nombre
        public string Dirección { get; set; }

    }

_ Vista _

@using HolaMundoMVC.Models.ModelosProyectoEscuela
@using HolaMundoMVC.Models.ModelosProyectoEscuela.Enumeradores
@model Curso

@{ 
   ViewData[&quot;Title&quot;] = &quot;Formulario para la creación de Cursos&quot;;
   Layout = &quot;_Layout&quot;; 
}

@*Aquí en Html.Beginform estamos pasando: el nombre de Vista (Índice), el nombre del Controlador (Inicio) y declaramos formMethod = Post Method.*@
@using (Html.BeginForm(&quot;CrearCurso&quot;, &quot;Curso&quot;, FormMethod.Post))  
{   
   &lt;div&gt;
      @Html.LabelFor(model =&gt; model.Nombre)
      @Html.TextBoxFor(model =&gt; model.Nombre, new { @class = &quot;form-control&quot;})
      @*Aca muestra el mensaje de error --&gt;*@
      @Html.ValidationMessageFor(model =&gt; model.Nombre, &quot;&quot;, new { @class = &quot;text-danger&quot; })

      @*&lt;label asp-for=&quot;Nombre&quot;&gt; &lt;/label&gt;
         &lt;input asp-for=&quot;Nombre&quot; /&gt;*@
   &lt;/div&gt;
   &lt;div&gt;
      &lt;label asp-for=&quot;Dirección&quot;&gt;&lt;/label&gt;
      &lt;input asp-for=&quot;Dirección&quot; /&gt;
   &lt;/div&gt;
   &lt;div&gt;
      &lt;label asp-for=&quot;Jornada&quot;&gt;&lt;/label&gt;
      &lt;!-- Usamos los  HTML Helpers, para mostrar una lista desplegable en la interfaz con los tipo de la enumeración correspondiente --&gt;
      @Html.DropDownList(
         &quot;JornadasCursos&quot;, /// Nombre de la lista
         Html.GetEnumSelectList&lt;TiposEntesSistema.TiposJornada&gt;(), /// Enumeración asociada a la lista
         &quot;Seleccionar Jornada&quot;, /// Item por defecto de la lista
         new {@class = &quot;form-control&quot;} /// Estilo de la lista (usamos una clase de bootstrap)
      )
      &lt;br&gt;      
   &lt;/div&gt;   

   &lt;input type=&quot;submit&quot;&gt;  
}  

&lt;p&gt;&lt;i&gt;@ViewBag.Fecha&lt;/i&gt;&lt;/p&gt;

Jimmy Kleber Peñafiel Salvatierra

student•

Asignatura:

namespace platzi_asp_net_core.Models { public class Curso:ObjetoEscuelaBase { [Required(ErrorMessage = "El nombre del curso es requerido")] [StringLength(5)] public override string Nombre { get; set; } public TiposJornada Jornada { get; set; } public List<Asignatura> Asignaturas{ get; set; } public List<Alumno> Alumnos{ get; set; }

    [Display(Prompt = "Direccion correspondencia", Name="Addre" )]
    [Required(ErrorMessage= "Se requiere incluir una direccion")]
    [MinLength(10, ErrorMessage="La longitud minima de la direccion es 10")]
    public string Dirección { get; set; }

    public string EscuelaId { get; set; }

    public Escuela Escuela { get; set; }


}

}

<style>
    .invalid-feedback {
        display: block; /* Bootstrap oculta este campo a menos que el formulario tenga otras clases, por eso el workaround */
    }
</style>
<form method="POST">
    <div class="form-row">
        <div class="form-group">
            @Html.LabelFor(x => x.Nombre)
            @Html.TextBoxFor(x => x.Nombre, new { @class = "form-control" } )
            <!-- Aca muestra el mensaje de error -->
            @Html.ValidationMessageFor(x => x.Nombre, "", new { @class = "invalid-feedback" })
        </div>
    </div>
   <!-- Resto del formulario -->
</form>

@model SchoolBase
&lt;form asp-action=@ViewData[&quot;Method&quot;] method=&quot;post&quot;&gt;
    &lt;input type=&quot;hidden&quot; asp-for=&quot;Id&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label asp-for=&quot;Name&quot;&gt;&lt;/label&gt;
        &lt;input asp-for=&quot;Name&quot; class=&quot;form-control&quot;&gt;
        &lt;span asp-validation-for=&quot;Name&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
    @if (Model is Course)
    {
        var aux = Model as Course;
        @Html.Hidden(&quot;SchoolId&quot;, aux.SchoolId)
        &lt;div class=&quot;form-group&quot;&gt;
            @Html.LabelFor(model =&gt; aux.Address)
            @Html.TextBox(&quot;Address&quot;, aux.Address, null, new { @class = &quot;form-control&quot;})
            @Html.ValidationMessage(&quot;Address&quot;, null, new { @class = &quot;text-danger&quot; })
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            @Html.LabelFor(model =&gt; aux.Schedule)
            @Html.DropDownList(&quot;Schedule&quot;, Html.GetEnumSelectList&lt;Schedules&gt;(), null, new { @class=&quot;form-control&quot; })
            @Html.ValidationMessage(&quot;Schedule&quot;, null, new { @class = &quot;text-danger&quot; })
        &lt;/div&gt;
    }else if (Model is Student || Model is Subject)
    {
        var aux = Model as Student;
        &lt;div class=&quot;form-group&quot;&gt;
            @Html.LabelFor(model =&gt; aux.CourseId)
            @Html.DropDownList(&quot;CourseId&quot;, ViewBag.CourseId, null, new { @class=&quot;form-control&quot; })
            @Html.ValidationMessage(&quot;CourseId&quot;, null, new { @class = &quot;text-danger&quot; })
        &lt;/div&gt;
    }    
    &lt;input type=&quot;submit&quot; class=&quot;btn btn-success&quot; value=&quot;Send&quot;&gt;
    &lt;a asp-action=&quot;Index&quot; class=&quot;btn btn-secondary&quot;&gt;Return&lt;/a&gt;
&lt;/form&gt;

@model Course
@{
    ViewData[&quot;Title&quot;] = &quot;Create Course&quot;;
    ViewData[&quot;Method&quot;] = &quot;Create&quot;;
}
&lt;h1&gt;@ViewData[&quot;Title&quot;]&lt;/h1&gt;
&lt;partial name=&quot;FormSchoolBase&quot; view-data=&quot;ViewData&quot; /&gt;
@section Scripts {
    @{await Html.RenderPartialAsync(&quot;_ValidationScriptsPartial&quot;);}
}

public class Curso : ObjetoBase
    {
        [Required(ErrorMessage = &quot;Campo nombre requerido&quot;)] // Campo requerido
        [StringLength(8)] // Longitud maxima del nombre
        [MinLength(3)] // Longitud minima del nombre
        ///[DivisibleEntreAtributos(ErrorMessage = &quot;Correo no valido&quot;)]
        public override string Nombre { get; set; } // override: Al ser este un campo virtual de la clase padre, es necesario indicar que vamos a sobre escribir su comportamiento, para eso usamos: override
        public string EscuelaId { get; set; } /// Autoaticamente el motor, por convención infiere que me estoy relacionando al 'Id' de la 'Escuela'
        public Escuela Escuela { get; set; }
        public TiposJornada Jornada { get; set; }
        public List&lt;Asignatura&gt; Asignaturas { get; set; }
        public List&lt;Alumno&gt; Alumnos { get; set; }

        [Display(Prompt = &quot;Dirección correspondencia&quot;, Name = &quot;Address&quot;)] // Prompt =&gt; Marca de agua que describe el contenido en una caja de texto, Name =&gt; nombrea  mostrar en un label que mapea el campo (Eje:&lt;label asp-for=&quot;Dirección&quot;&gt;&lt;/label&gt;)
        [Required(ErrorMessage = &quot;Dirección requerida&quot;)] // Campo requerido, con mensaje de exepción personalizado
        [MinLength(5, ErrorMessage = &quot;Longitud minima requerida es 5&quot;)] // Longitud minima del nombre
        public string Dirección { get; set; }

    }

@using HolaMundoMVC.Models.ModelosProyectoEscuela
@using HolaMundoMVC.Models.ModelosProyectoEscuela.Enumeradores
@model Curso

@{ 
   ViewData[&quot;Title&quot;] = &quot;Formulario para la creación de Cursos&quot;;
   Layout = &quot;_Layout&quot;; 
}

@*Aquí en Html.Beginform estamos pasando: el nombre de Vista (Índice), el nombre del Controlador (Inicio) y declaramos formMethod = Post Method.*@
@using (Html.BeginForm(&quot;CrearCurso&quot;, &quot;Curso&quot;, FormMethod.Post))  
{   
   &lt;div&gt;
      @Html.LabelFor(model =&gt; model.Nombre)
      @Html.TextBoxFor(model =&gt; model.Nombre, new { @class = &quot;form-control&quot;})
      @*Aca muestra el mensaje de error --&gt;*@
      @Html.ValidationMessageFor(model =&gt; model.Nombre, &quot;&quot;, new { @class = &quot;text-danger&quot; })

      @*&lt;label asp-for=&quot;Nombre&quot;&gt; &lt;/label&gt;
         &lt;input asp-for=&quot;Nombre&quot; /&gt;*@
   &lt;/div&gt;
   &lt;div&gt;
      &lt;label asp-for=&quot;Dirección&quot;&gt;&lt;/label&gt;
      &lt;input asp-for=&quot;Dirección&quot; /&gt;
   &lt;/div&gt;
   &lt;div&gt;
      &lt;label asp-for=&quot;Jornada&quot;&gt;&lt;/label&gt;
      &lt;!-- Usamos los  HTML Helpers, para mostrar una lista desplegable en la interfaz con los tipo de la enumeración correspondiente --&gt;
      @Html.DropDownList(
         &quot;JornadasCursos&quot;, /// Nombre de la lista
         Html.GetEnumSelectList&lt;TiposEntesSistema.TiposJornada&gt;(), /// Enumeración asociada a la lista
         &quot;Seleccionar Jornada&quot;, /// Item por defecto de la lista
         new {@class = &quot;form-control&quot;} /// Estilo de la lista (usamos una clase de bootstrap)
      )
      &lt;br&gt;      
   &lt;/div&gt;   

   &lt;input type=&quot;submit&quot;&gt;  
}  

&lt;p&gt;&lt;i&gt;@ViewBag.Fecha&lt;/i&gt;&lt;/p&gt;

    [Display(Prompt = "Direccion correspondencia", Name="Addre" )]
    [Required(ErrorMessage= "Se requiere incluir una direccion")]
    [MinLength(10, ErrorMessage="La longitud minima de la direccion es 10")]
    public string Dirección { get; set; }

    public string EscuelaId { get; set; }

    public Escuela Escuela { get; set; }


}

Segundo Reto

Introducción a ASP.NET Core

Todo lo que aprenderás sobre ASP.NET Core

Herramientas y prerrequisitos

La importancia del middleware en el entorno web

Mi primera aplicación ASP.Net Core

Habilitar certificados, planillas preinstaladas

Revisión detalladas de la estructura de directorios

¿Qúé es el patrón MVC?

Nuestro Proyecto

Modelo Vista Controlador a nivel básico

Vista y controlador

Modelo a nivel básico

Razor Syntax

Vistas Plantillas y modelo

Vistas, plantillas, Archivos de inicio

Importación de modelos

Vistas para listar asignaturas

Vistas parciales

Mostrando otras listas de objetos

Actualizando la versión de bootstrap

Entity Framework Core

Introducción a entity framework

Conectando la solución con Entity Framework Core

Sembrando datos en la base de datos

Optimizando siembra de datos

Refactoring del Modelo para un ORM

Implementando cambios en el modelo

Refactoring siembra de datos

Ajuste de vistas y formularios

Ajuste de enrutamiento

Ajuste de vistas y controladores

Creando un formulario

Validaciones de formularios

Tu primer Reto

Atributos de validación y bases de datos

Data annotations

Segundo Reto

Usando una Base de Datos de verdad

Diseño de vistas y controladores optimizado

Scaffolding o borrón y cuenta nueva

Tercer Reto

Deploy del sitio

Publicando el website

Conclusiones