Beruflich Dokumente
Kultur Dokumente
Contents
ACERCA DEL AUTOR . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
9
9
10
22
26
29
29
34
34
38
44
50
CONCLUSIN . . . . . . . . . . . . . . . . . . . . . . . . .
56
INTRODUCCIN PERSONAL
- PORQU UNA GUA
INTRODUCTORIA A MVC
Para nadie es un secreto que .NET Framework de Microsoft es una
plataforma lo suficientemente robusta como para soportar millones
de aplicaciones crticas en las organizaciones, que adems estar
con nosotros por muchsimos aos en el futuro. Con el crecimiento
de la internet, Microsoft ha escuchado a los desarrolladores, empresas y emprendedores, a raz de esto ha orientado el desarrollo
de su Framework hacia algo que hoy en da con .NET 2015 es una
plataforma de desarrollo abierta, inclusiva y multiplataforma.
Sumado a todo esto que se ha ido viendo en los ltimos aos
con la plataforma de Microsoft, est la orientacin de ASP.NET
hacia el software abierto y a cumplir y trabajar agradablemente con
estndares mundiales que otras plataformas implementan. Prueba
de esto fue el nacimiento de ASP.NET MVC, el cual le permite a
los desarrolladores poder separar mejor las responsabilidades de
un sistema, conocer completamente el markup de su aplicacin y
a entender como es la comunicacin entre el cliente y el servidor,
permitiendo optimizar sus sistemas. Es por esto que he tomado la
decisin de aportar a la comunidad hispana con un libro sencillo y
al grano de ASP.NET MVC 6, para ayudarles a esas personas que
apenas estn entrando al mundo de MVC a entender este patrn y
que las personas que ya lo conocen que puedan validar fundamentos
bsicos mientras logran adentrarse un poco ms.
Previo a iniciar a leer este libro sera ideal que ya conozca las
siguientes tecnologas al menos a un nivel bsico:
C#
HTML
CSS
JavaScript
Todo lo presentado en este libro representa mi punto de vista
personal y no busca representar a ningn empleador ni a Microsoft
como corporacin.
Ambiente web
10
ASP.NET MVC 6
Qu mejor forma de comenzar a aprender una tecnologa que ir
directo al cdigo y explorarlo? Pues ese ser el siguiente pas en
este libro. Durante todo el recorrido se irn mencionando algunos
conceptos importantes y al final un par de ejemplos.
11
12
Estructura de solucin
13
.csproj.user o .vbproj.user
Volviendo al tema de ASP.NET MVC el proceso de creacin de
un proyecto basado en una plantilla es sencillo, en Visual Studio
> File/Archivo > New/Nuevo> Project/Proyecto
Nuevo Proyecto
El siguiente paso es seleccionar la plantilla de MVC 6, debe fijarse que seleccione .NET Framework 4.6 y colocar un nombre de
proyecto y de solucin acorde a sus necesidades ya que este ser
el nombre de espacio que seguir su proyecto (orden interno del
proyecto). Usualmente y por estndar de Microsoft se nombra el
nombre de espacio de la siguiente forma
https://msdn.microsoft.com/en-us/library/ms229002(v=vs.110).aspx
14
15
En la imagen anterior se ha resaltado la opcin Change Authentication para dar un poco de nfasis a esta opcin. Si se le da clic a
este botn, aparece la siguiente pantalla.
Cambiar autenticacin
Esta ventana da la opcin de seleccionar la estrategia de autenticacin, por lo cual se debe tener de antemano una idea de la
estrategia de autenticacin y autorizacin del sistema. Esto porque
16
17
Estructura Proyecto
18
Archivo global.json
19
Folder wwwroot
20
Bower
21
El archivo Startup.cs es el que invoca los .json e inyecta dependencias necesarias (ms adelante se conversar un poco ms al
respecto).
Entrando ya en temtica de propia ya de MVC, se pueden observar
los folders Controllers, Views y Models. Para correr inicialmente la
plantilla se debe presionar F5 y se podr observar la nueva plantilla
corriendo. Este template ya tiene incluidas las libreras jQuery y
Bootstrap, adems de otras ms. Por lo cual ya trae un diseo
inicial y unas pginas iniciales que responden solicitudes a travs
de controladores.
Ejecucin bsica
http://jquery.com
http://getbootstrap.com/
22
VISTAS
Lo primero que se ver en esta lnea sern las vistas y cmo
funcionan entre s.
Dnde estn ubicadas? En el folder Views
Qu extensiones tienen? .cshtml o .vbhtml
Qu lenguaje se utiliza? HTML a travs del pre compilador de
HTML llamado Razor
Todo website tiene ciertos componentes que se repiten entre pginas, tipo marco. En Web Forms se le conoca como MasterPage,
en MVC se le conoce como _Layout. Usualmente estas secciones
incluyen partes como encabezados, pie de pgina y mens de
navegacin. Por ejemplo en la imagen de la derecha lo que est en
celeste sera el layout.
Layout
_layout.cshtml
Este archivo incluye todo el marco y plantilla HTML, es decir, tags
como <head>,
Al abrir este archivo se puede apreciar algo nuevo en esta versin de
ASP.NET, el tag environment el cual permite, segn el despliegue
que se realice, agregar unos u otros archivos de scripts y hojas
23
Etiqueta Environment
24
Renderizacin vista
Asignacin Layout
25
Bloque de cdigo
HTML Helper
Vistas de contenido
26
CONTROLADORES
Un controlador se conforma de una clase con funciones que responden solicitudes HTTP. La clase equivale al nombre del controlador
y la funcin equivale al nombre de la accin.
Nombre de Clase = Controlador Nombre de Funcin = Accin
Por ejemplo en el archivo Controllers/HomeController
Clase de controlador
27
28
Plantilla de ruteo
Plantilla de ruteo
29
MODELOS
Los modelos son clases que representan objetos de dominio y
pueden ser utilizados por la lgica de negocio y acceso a datos para
manipular informacin. Estn ubicado en la plantilla en el folder
Models.
EJERCICIOS
Agregar una nueva vista
Para este ejercicio se necesitar una nueva vista que sea retornada
al hacer una consulta HTTP a un url.
1. En el archivo Controllers/HomeController.cs crear una funcin que permita retornar una nueva vista
1
2
3
4
30
31
1
2
3
4
5
6
7
32
[HttpPost]
public IActionResult SubmitForm(string nombre, int eda\
d) {
var nombreRecibido = nombre;
var edadRecibida = edad;
return View("Index");
}
33
CAPTULO CUATRO
CARACTERSTICAS
AVANZADAS
En el captulo anterior se hizo un recorrido inicial por ciertas
funcionalidades principales de ASP.NET MVC 6. En el cual se pudo
conocer lo bsico de cada componente y cmo lograr comunicacin
y empezar a extender el proyecto bsico.
35
36
[HttpPost]
public class Item
{
public int Id { get; set; }
public string Nombre { get; set; }
}
37
return View(items);
@model List<Item>
<ul>
@foreach(var item in Model)
{
<li>id: @item.Id nombre: @item.Nombre</li>
}
</ul>
38
@model List<Item>
<h1>@ViewBag.Mensaje</h1>
<ul>
@foreach(var item in Model)
{
<li>id: @item.Id nombre: @item.Nombre</li>
}
</ul>
Validaciones
En un sistema robusto, deben existir validaciones de datos de
lado cliente y de lado servidor, si bien estas se pueden crear
manualmente, uno a uno, esta tarea puede ser un poco engorrosa
39
using System.ComponentModel.DataAnnotations;
namespace <sunombredeespacio>.Models {
public class Item
{
[Required(ErrorMessage = "El identificador del\
tem es obligatorio")]
public int Id { get; set; }
[Required(ErrorMessage ="El nombre del tem es\
obligatorio")]
[Display(Name ="Nombre de tem")]
[MaxLength(10, ErrorMessage ="El nombre del t\
em no debe superar los 10 caracteres")]
public string Nombre { get; set; }
}
}
40
41
@model Item
<form asp-action="crear" asp-controller="item" method=\
"post" asp-anti-forgery>
<div asp-validation-summary="ValidationSummary.All\
" class="text-danger"></div>
<div>
<label asp-for="Id"></label>
<input asp-for="Id" class="form-control" />
<span asp-validation-for="Id" class="text-dang\
er"></span>
</div>
<div>
<label asp-for="Nombre"></label>
<input asp-for="Nombre" class="form-control" />
<span asp-validation-for="Nombre" class="text-\
danger"></span>
</div>
<button type="submit" class="btn btn-default" >Sub\
mit</button>
</form>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScript\
sPartial"); }
}
42
43
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Crear(Item nuevoItem)
{
if (ModelState.IsValid)
{
// guardar en la base de datos
return RedirectToAction("Index");
}
return View(nuevoItem);
11
44
45
<div class="bannerNoticias">
<p>Noticias</p>
<div class="noticias">
<h4>Costa Rica en el puesto #13 de FIFA</h4>
<p>Est porta ac magna lundium? Amet eros. Lore\
m cum ut auctor vel integer mus tortor, adipiscing plat\
ea penatibus, in placerat, lectus adipiscing! Ultrices \
scelerisque adipiscing parturient!</p>
</div>
<div class="noticias">
<h4>Nuevo ASP.NET 5</h4>
<p>Est porta ac magna lundium? Amet eros. Lore\
m cum ut auctor vel integer mus tortor, adipiscing plat\
ea penatibus, in placerat, lectus adipiscing! Ultrices \
scelerisque adipiscing parturient!</p>
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
46
</div>
<div class="noticias">
<h4>Hololens est aqu!</h4>
<p>Est porta ac magna lundium? Amet eros. Lore\
m cum ut auctor vel integer mus tortor, adipiscing plat\
ea penatibus, in placerat, lectus adipiscing! Ultrices \
scelerisque adipiscing parturient!</p>
</div>
<div class="clearer"></div>
</div>
<style>
.bannerNoticias {
border:solid 1px #aaa;
border-radius:10px;
padding:12px;
}
.bannerNoticias .noticias {
display:inline-block;
float:left;
max-width:200px;
font-size:12px;
}
.clearer{
clear:both;
}
</style>
@RenderBody()
@await Html.PartialAsync("_bannerNoticias")
47
Ejemplo de ViewComponent
En este caso crearemos un viewcomponent que logre lo mismo
que la vista parcial anterior, sin embargo esta vez obtendremos las
noticias desde el cdigo, lo que ms adelante podra ser reemplazado
por datos desde una base de datos. 1. Crear un folder llamado
ViewComponents en la raz del proyecto. 2. Cree una clase llamada
BannerInteractivoViewComponent.cs 3. Reemplace el contenido de
la clase por el siguiente
1
2
3
4
5
6
7
8
9
10
11
using Microsoft.AspNet.Mvc;
using System.Collections.Generic;
using System.Linq;
namespace <sunombredeespacio>.ViewComponents
{
public class BannerInteractivoViewComponent : V\
iewComponent
{
Dictionary<string, string> noticias
= new\
Dictionary<string, string>();
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
48
1. Ahora, cree un folder en la direccin Views/Shared/Components y dentro de ese folder, cree otro llamado BannerInteractivo (Views/Shared/Components/BannerInteractivo) y luego
cree una vista que se llame Default.cshtml, agrege el siguiente
contenido a la vista (el css se agrega en el mismo archivo
solamente por simplicidad, no es una buena prctica bajo
ninguna razn).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
49
50
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Threading.Tasks;
namespace <sunombredeespacio>.ui.Models
{
public class Noticia
{
public int Id { get; set; }
public string Titulo { get; set; }
public string Descripcion { get; set; }
}
}
51
1
2
3
4
5
6
7
8
9
52
using Microsoft.Data.Entity;
namespace wm.website.ui.Models
{
public class NoticiasAppContext : DbContext
{
public DbSet<Noticia> Noticias { get; set; }
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
53
{
"AppSettings": {
"SiteTitle": "wm.website.ui"
},
"Data": {
"DefaultConnection": {
"ConnectionString": "Server=(localdb)\\mss\
qllocaldb;Database=aspnet5-wm.website.ui-a913355d-72f6-\
4d80-892a-19699864e285;Trusted_Connection=True;Multiple\
ActiveResultSets=true"
}
},
"EntityFramework": {
"ConnectionString": "Data Source=INSTANCIA_SQL\
SERVER;Integrated Security=True;Connect Timeout=15;Encr\
ypt=False;TrustServerCertificate=False;ApplicationInten\
t=ReadWrite;MultiSubnetFailover=False"
}
}
using
using
using
using
Microsoft.AspNet.Mvc;
System.Collections.Generic;
System.Linq;
wm.website.ui.Models;
namespace <sunombredeespacio>.ui.ViewComponents
{
public class BannerInteractivoViewComponent : View\
Component
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
54
{
List<Noticia> noticias = new List<Noticia>();
NoticiasAppContext db;
public BannerInteractivoViewComponent(Noticias\
AppContext _context)
{
db = _context;
}
public IViewComponentResult Invoke()
{
// Limpiemos la base de datos
if (db.Noticias.Count() > 0)
db.Noticias.RemoveRange(db.Noticias);
db.SaveChanges();
// Recreemos los 3 archivos
db.Noticias.AddRange(new List<Noticia>() {
new Noticia() { Id=1, Titulo="Costa Ri\
ca en el puesto #13 de FIFA", Descripcion="Est porta ac\
magna lundium? Amet eros. Lorem cum ut auctor vel inte\
ger mus tortor, adipiscing platea penatibus, in placera\
t, lectus adipiscing! Ultrices scelerisque adipiscing p\
arturient!" },
new Noticia() { Id=1, Titulo="Nuevo AS\
P.NET 5", Descripcion="Est porta ac magna lundium? Amet\
eros. Lorem cum ut auctor vel integer mus tortor, adip\
iscing platea penatibus, in placerat, lectus adipiscing\
! Ultrices scelerisque adipiscing parturient!" },
new Noticia() { Id=1, Titulo="Hololen\
s est aqu!", Descripcion="Est porta ac magna lundium?\
Amet eros. Lorem cum ut auctor vel integer mus tortor,\
adipiscing platea penatibus, in placerat, lectus adipi\
scing! Ultrices scelerisque adipiscing parturient!" }
});
45
46
47
48
49
50
55
db.SaveChanges();
return View(db.Noticias.ToList());
}
}
}
CONCLUSIN
Debido a que este libro fue escrito con una versin de Visual Studio
que an no es RTM y con varios componentes que an estn en
preview, estar tratando de actualizarlo en la siguiente direccin
ASP.NET MVC 6 - UNA GUA INTRODUCTORIA.
Dependiendo del xito de este libro, estar tratando de sacar otros
ms avanzados y de los cuales tengo algunos temas en mente, tales
como caractersticas avanzadas en MVC, aplicaciones MVC 6 con
AngularJS, Web API avanzado, Microsoft Azure, entre otros. As
que agradezco si pudieran brindarme feedback de este, mi primer
libro tcnico. Gracias a su feedback estar envindoles a su correo
electrnico cuando saque actualizaciones de esta serie u otros libros
de inters que genere en espaol.
Contacto
Email: waltermontes@outlook.com
Twitter: @tewar93
http://waltermontes.com
http://waltermontes.com
mailto:waltermontes@outlook.com
https://twitter.com/tewar93
http://waltermontes.com