Segundo Reto

Clase 30 de 35 • Curso de ASP.NET Core

Clase anteriorSiguiente clase

Alexander Armúa Abregu

student•

Ejemplo de uso para jQuery Unobtrusive Validation:

https://exceptionnotfound.net/asp-net-mvc-demystified-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. Repositorio.

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; }


}

}