CREAR EN VISUAL STUDIO UNA APLICACIÓN WEB EN MVC.

Este es el primer paso de nuestro tutorial para aprender Asp.Net MVC

en 10 sencillos pasos, en este articulo tocaremos aspectos teóricos
necesarios para entender la lógica que lleva el esquema MVC y así
comprendas el por que de las cosas.

Primero hablemos del significado MVC, el cual es Modelo - Vista -

Controlador, estas piezas encajan de la siguiente manera:

- Modelo: Representa al objeto que tiene todos los datos con los
cuales se va a trabajar, este objeto sera utilizado por la vista y
controlador.

- Vista: Es la interfaz que pintara y mostrara los datos que contiene el

modelo.

- Controlador: Es el encargado de tomar el control del flujo, ya que

tiene interacción con el modelo y al final dirige este modelo a una vista
en especifica.

El flujo de una aplicación en MVC seria el siguiente, cuando

realizamos una petición, el encargado de manejar la misma, es el
controlador en primera instancia, después el controlador mediante un
modelo, pasara los datos a la vista correspondiente, ya que la vista
leerá el contenido del modelo enviado y mostrara los datos

Este esquema permite tener de forma separada los datos, la lógica de

negocio y la presentación, permitiendo una programación mas
organizada a la que se tenia con los formularios web (Web Forms), lo
cual ha tenido como resultado poder tener aplicaciones mas veloces.

Una vez entendido lo anterior, pasaremos a crear una aplicación web

en MVC.
Este articulo es parte de un tutorial para aprender MVC en sencillos
pasos y en español, el cual te recomiendo revisar, una vez
mencionado lo anterior, comencemos, a continuación te mostrare
todos y cada uno de los pasos para crear una aplicación en MVC en
Visual Studio, los cuales son los siguientes:

1.- Abrir el Visual Studio y crear un nuevo proyecto

2.- De las plantillas de proyectos, seleccionar dentro del árbol de

"Web" la que dice "Aplicación web ASP.Net"

3.-  Una vez guardado el proyecto, te mostrara una pantalla con las
plantillas de proyectos web ASP.Net disponibles, de esta pantalla
seleccionaremos la plantilla de "MVC" y daremos click a aceptar
4.- A continuación veras que Visual Studio empezara a generar todos
los archivos necesarios para la creación de nuestro proyecto, entre
estos se generan y guardan todas las librerías que vamos a utilizar,
así como la estructura archivos propios de un proyecto de ASP MVC,
al finalizar te deberá mostrar una pantalla como la siguiente:
5.- Hablemos un poco de la estructura de archivos de un proyecto de
ASP MVC, como era de suponerse, se crearon las carpetas de los
controladores, modelos y vistas (Controllers, Models y Views), aparte
estas 3 tenemos varias que ha generado el Visual Studio para tener
todo organizado, por ejemplo tenemos la carpeta de Content, que es
donde meteremos todos aquellos recursos como imágenes, estilos
(css), tambien tenemos una carpeta exclusiva para meter todos
aquellos scripts necesarios (js), de la misma manera tenemos una
llamada Fonts que almacenara todas los archivos de fuentes que
necesitemos, si nos llegaran a faltar carpetas, podemos agregarlas
dando click secundario sobre el proyecto y luego "Agregar" - "Nueva
Carpeta", como por ejemplo nos falta una carpeta en la cual meter
todos los archivos de recursos (como ya sabemos los archivos de
recursos (.resx) son aquellos que nos sirven para meter los textos
mostrados en la aplicación y que nos ayudan mucho cuando
necesitamos un sitio multi idioma)

6.- Como este es un proyecto nuevo, por default se utiliza la versión

de ISS Express (nos damos cuenta por que en la url se muestra algo
como "http://localhost:1760" es decir, con puerto), para modificar esto
y hacer que corra sobre la versión de ISS Local, debemos abrir las
propiedades del proyecto (Click secundario sobre el proyecto
"MiPrimeraAplicacionMVC" - "Propiedades"), luego en el tab de "Web"
debemos de buscar donde estén las opciones de "Servidores", y en el
combo seleccionar "ISS Local" veremos que al realizar esta cambio el
campo de "URL del proyecto" cambiara a
"http://localhost/MiPrimeraAplicacionMVC", es decir, aparecerá
localhost sin el puerto, ahora solo debemos dar click en el botón de
"Crear directorio virtual" (Si despues de esto te sale un error de
diciendo que no tienes acceso, es por que necesitas abrir el Visual
Studio con permisos de administrador), y con esto tendremos
corriendo nuestra aplicación con la versión de ISS Local, después esto
es importante guardar el proyecto para que conserve los cambios
realizados al proyecto

Una vez entendido lo anterior, tenemos una idea mas clara de como
esta distribuido un proyecto en ASP MVC, ahora lo que falta es verlo
en funcionamiento, para esto solo tenemos que dar click en el botón
de play para que se ejecute en el navegar de nuestra preferencia, te
debería de aparecer algo similar a la siguiente pantalla, si tuvieras
dudas en algunos de los pasos por favor hazlo notar en los
comentarios en la parte de abajo, los cuales revisamos tan pronto
como podemos

 
Explicación de las rutas generadas en MVC (Routing)

Hablemos acerca de las rutas que se generan para los proyectos de

MVC, si venimos de un entorno de desarrollo de web forms,
notaremos que al acceso a los recursos se realizan de una forma
diferente, ya que en web forms, prácticamente la ruta de la pagina era
la dirección física de la pagina o recurso, esto en MVC cambia, ya que
de acuerdo al formato de ruta o routing que tengamos especificado, se
mostrara una acción u otra, a continuación en ejemplo de esto:

En webforms para ver un elemento podríamos tener un URL como la

siguiente:

MiPrimeraAplicacionMVC/mostrarelemento.aspx?id=U1

Con MVC podríamos tener una ruta como la siguiente

MiPrimeraAplicacionMVC/elemento/mostrar/U1

La ruta en mvc esta obedeciendo el patron siguiente:

{Controlador} / {Acción} / {Id}

Lo que realizará el sistema, será entrar al controlador "elemento", y

ejecutará la función "mostrar", y tomara como parámetro id el valor
"U1", esta definición de patrones de la URL la encontramos dentro de
nuestro proyecto en la carpeta de "App_Start", el archivo se llama
"RouteConfig.cs"
 

Es en este archivo, donde se definen todos los formatos de las rutas,

por default en los proyectos nuevos, siempre aparecerá el que te he
mostrado, los parámetros de definición del formato de la ruta son los
siguientes:

Name: En este parámetro definimos el nombre del formato de la ruta

URL: Aqui especificamos el formato

Default: definimos el objeto que tomara los valores por defecto del
formato de la ruta, por ejemplo en la definición de la captura, de dice
que por default, se va entrar al controlador "Home" y ejecutar la
función "Index", y se le indica que el parámetro ID es opcional, por lo
tanto no hace falta definirlo

Una vez entendido lo anterior, podríamos crear fácilmente otro formato

de ruta, por ejemplo, si requiriéramos que se acceda directamente a
una función en el controlador "Home" que se llame "MostrarElemento",
con un id como parámetro, pero que no se accediera con la
url MiPrimeraAplicacionMVC/Home/MostrarElemento/u1 si no con la
url MiPrimeraAplicacionMVC/Mostrar/u1, tendríamos que tener la
clase de la siguiente manera:

public class RouteConfig

  {
    public static void RegisterRoutes(RouteCollection routes)
    {
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(
          name: "Nueva",
          url: "Mostrar/{id}",
          defaults: new { controller = "Home", action = "MostrarElemento"}
      );

      routes.MapRoute(
          name: "Default",
          url: "{controller}/{action}/{id}",
          defaults: new { controller = "Home", action = "Index", id =
UrlParameter.Optional }
      );
    }
  }

Ahora que hemos entendido como funcionan los formatos de las rutas
y la manera de agregar otros, podemos pasar al siguiente punto, para
conocer cual es el orden de ejecución de un proyecto en ASP MVC  

Orden de ejecución del código en Asp.net MVC

En esta parte del tutorial veremos cual es el flujo del programa, cuales
son los puntos por donde pasa la ejecución de nuestro código, esto
para entender un poco mas a profundidad como es que una aplicación
en MVC trabaja, te recomiendo visitar el primer post de este
tutorial para tener mas info del modelo MVC

Los pasos por los que pasa la ejecución de nuestra aplicación en MVC
es el siguiente:

- El primer lugar que toca la ejecución de la aplicación al recibir una

petición (un request), es en el archivo Global.asax.cs, en el cual
podemos encontrar la función Application_Start()
- Después de pasar por el Global.asax, el proceso sigue y pasa por
otros 2 puntos que son transparentes para el programador, que es
donde se crea el RequestContext, mismo que es pasado al
MVCHandler que es quien llama al controlador (Controller), y de ahi
ejecuta el método correspondiente, por ejemplo, en nuestro proyecto
si entráramos a la URL:
localhost/MiPrimeraAplicacionMVC/Home/Index lo que
realizaría nuestra aplicación es ejecutar el método "Index" de la clase
"HomeController", hay que tomar en cuenta lo que se explico en el
paso anterior del tutorial donde se habla de las rutas, donde vimos que
el controlador es indicado en el segundo parámetro de la URL, hay
que tomar en cuenta que si en la url dice Home, fisicamente el archivo
se tendrá que llamar HomeController

- Dentro de la ejecución de este método, es donde vamos a utilizar el

modelo (Model) para guardar en el los datos que enviaremos a la vista
(View) para que esta ultima los muestre, empecemos por explicar el
modelo, el cual encontraremos en la carpeta "Models" de nuestro
proyecto, el modelo es una clase que define la estructura de los datos
que enviaremos a nuestra vista, la cual encontraremos dentro de la
carpeta "Views" de nuestro proyecto, a continuacion el modelo que
utilizaremos en nuestro ejemplo:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MiPrimeraAplicacionMVC.Models
{
    public class MiModelo
    {
        public string Nombre;
        public string Apellidos;
        public int Edad;
    }
}

Esta clase la deberemos guardar dentro de la carpeta "Models":

 
El modelo anterior lo utilizaremos para mandarle datos de nuestro
controlador a nuestra vista, el método del controlador que ocuparemos
para nuestro ejemplo es el "Index", en el cual crearemos un objeto de
tipo "MiModelo", lo llenaremos y lo mandaremos a la vista para su
visualización, teniendo de esta manera nuestro controlador:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MiPrimeraAplicacionMVC.Models;

namespace MiPrimeraAplicacionMVC.Controllers
{
  public class HomeController : Controller
  {
    public ActionResult Index()
    {
      var m = new MiModelo();
      m.Nombre = "Pancho";
      m.Apellidos = "Perez";
      m.Edad = 30;
      return View(m);
    }

    public ActionResult About()

    {
      ViewBag.Message = "Your application description page.";
      return View();
    }

    public ActionResult Contact()

    {
      ViewBag.Message = "Your contact page.";

      return View();
    }
  }
}

Como podemos observar en el código anterior, instanciamos el

modelo, lo llenamos y lo mandamos a la vista, para mandar el modelo
a la vista solo es necesario ponerlo como parámetro en la función
"View(Modelo)", automáticamente .Net sabe cual es el modelo a
invocar ya que buscara dentro de la carpeta "Views" una carpeta
dentro de esta con el nombre del controlador actual, el cual es
"Home", y dentro de esta buscara el archivo .schtml con el nombre del
método actual, es decir Index.schtml, ahora, dentro de este archivo,
vamos a modificar el contenido para mostrar el contenido del modelo,
quedándonos algo así:
@using MiPrimeraAplicacionMVC.Models
@model MiModelo

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>Ejemplo de modelo</h1>   
    <p>@Html.LabelFor(m => m.Nombre) : @Model.Nombre </p>
    <p>@Html.LabelFor(m => m.Apellidos) : @Model.Apellidos</p>
    <p>@Html.LabelFor(m => m.Edad) : @Model.Edad</p>
</div>

Si probamos nuestro proyecto en este momento, tendremos que ver la

vista index, mostrando el contenido de el modelo que recibió,
apareciendo algo mas o menos así:
Formas de almacenar datos temporales en Asp.net MVC (ViewData,
ViewBag, Session, TempData)

En esta parte del tutorial trataremos las formas en las cuales puedes
pasar datos entre un request y otro, pasar datos del controlador a la
vista, etc, para esto podemos usar ViewData, ViewBag, TempData o
Session, ahora la cuestión es cuando y como usar cada uno de ellos,
a continuación lo explicamos

ViewData
El ViewData es utilizado para pasar datos del controller a la vista, ya
que su duración es solo durante el actual request, una vez que este
termina, este dato se abra borrado, de ahi que su uso es solo
temporal, comúnmente es usado para mandar mensajes de error a la
vista, otro dato importante en cuanto su uso, es que lo utilizar como si
fuera un arreglo, aquí un ejemplo

En el controller:

ViewData["nombre"] = "Pedro";
ViewData["apellido"] = "Pérez";

En la vista:

Mi nombre es @ViewData["nombre"] @ViewData["apellido"]

En la pagina:

Mi nombre es Pedro Pérez

ViewBag
 

El ViewBag se utiliza, al igual que el ViewData, para pasar datos del

controller a la vista, su duración también es solo durante el request
actual, y una vez terminado este, el dato es borrado, a diferencia del
ViewData, este se utiliza para pasar objetos, es decir se utiliza
directamente y no se necesita tratar como arreglo

En el controller:
ViewBag.nombreCompleto= “Pedro Pérez”

En la Vista:

Mi nombre es @ViewBag.nombreCompleto

En la pagina:

Mi nombre es Pedro Pérez

TempData
 

Como vimos en los dos anteriores, tanto el ViewData como el

ViewBag tiene una duración de un solo request, pero que pasa cuando
queremos pasar datos de un request a otro, pues es aquí donde entra
el TempData, ya que esa es su especial cualidad, la duración hasta el
siguiente request, es decir que si estamos en una acción (dentro del
controller), podemos guardar el dato y utilizarlo en el siguiente request,
al igual que el ViewData, este se utiliza como un vector, aquí un
ejemplo:

En el controller:

 public ActionResult Index()
 {
    TempData[“nombreCompleto”] = "Pedro Pérez";
    return RedirectToAction("MuestraNombre");
}

El request anterior invoca a la acción MuestraNombre:

public ActionResult MuestraNombre()
{
    string miNombre;
    miNombre = TempData["nombreCompleto"].ToString();
    return View(miNombre);
}

Session
 

El sesión a diferencia de los 3 anteriores, persiste por mas tiempo,

este no muere en los siguientes request’s, al igual de los anteriores, se
puede guardar cualquier dato y este se almacena, su uso seria el
siguiente:

En el controller:

 public ActionResult Index()
 {
System.Web.HttpContext.Current.Session["nombreCompleto "] = "Pedro
Pérez";
    return RedirectToAction("MuestraNombre");
}

El request anterior invoca a la acción MuestraNombre:

public ActionResult MuestraNombre()
{
    string miNombre;
    miNombre = System.Web.HttpContext.Current.Session["nombreCompleto
"].ToString();
    return View(miNombre);
}

Ahora que ya entendemos para que sirven estos metodos para pasar
datos de forma temporal, podemos seguir con el siguiente punto, en el
cual veremos el manejo de los helpers en Asp.net MVC
Manejo de los Helpers en Asp.net MVC

En esta parte del tutorial veremos que son los helpers de html en
Asp.net MVC y como se usan, para definirlos de forma rápida y
sencilla son funciones las cuales nos regresan una cadena, es decir
un string con las cuales nos podemos ayudar para crear controles en
nuestra vista de forma sencilla, por ejemplo, hay helpers que nos
ayudan a crear los inputs, combos, radio botones, etc, a continuación
una lista con los helpers de html mas usados que ya vienen incluidos
con el framework:

Html.Beginform
Html.EndForm
Html.ActionLink
Html.Hidden
Html.Label
Html.Password
Html.CheckBox
Html.RadioButton
Html.ListBox
Html.DropDownLis
t Html.TextArea
Html.TextBox

Aquí la forma de usarlos en la vista:

@Html.Label("Nombre")
@Html.TextBox("txtNombre")

Se renderiza en el navegador:
y el código html:

<label for="Nombre">Nombre</label>
<input id="txtNombre" name="txtNombre" type="text" value="">

La lista anterior solo te ayuda a crear el elemento como tal, es decir,

no se enlaza con una propiedad del modelo, y por lo tanto no se
realiza una validación del mismo, si lo que queremos es que esto se
realice, utilizaremos los siguientes (los reconoceremos fácilmente por
que generalmente terminan con un For)

Html.HiddenFor
Html.LabelFor
Html.PasswordFor 
Html.CheckBoxFor
Html.RadioButtonFor
Html.DropDownListFor
Html.ListBoxFor
Html.TextBoxFor
Html.TextAreaFor

A continuación vemos la forma de utilizarlos en la vista

@Html.LabelFor(m=>m.Nombre)
@Html.TextBoxFor(m => m.Nombre)

Se renderiza en el navegador:
y en el código html:

<label for="Nombre">Nombre</label>
<input id="Nombre" name="Nombre" type="text" value="">

Para ejemplificarlo y comprenderlo de una mejor manera como

funcionan los helpers, realicemos un proyecto de ejemplo donde
probemos este segundo grupo de helpers, donde crearemos un
formulario el cual utilizara un modelo, y nos ayudaremos con los
helpers de html para realizar mas fácilmente esta tarea

Primeramente necesitamos crear un modelo, al cual le pondremos

“Persona”, y que tendrá las siguientes propiedades:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace HelpersMVC.Models
{
public class Persona
{
public string Nombre { get; set; }
public string Apellidos { get; set; }
 public string Sexo { get; set; }
public string Edad { get; set; }
public bool Vive { get; set; }
}
}

Ahora creamos el controller en el cual tendremos 2 acciones, las

cuales llamaremos index, una es la que realizara la primera petición
para mostrar por primera vez la vista, y la segunda que es donde
recibiremos el objeto con los datos que fueron llenados por el usuario,
nos quedaría una clase similar a la siguiente:

using System.Web;
using System.Web.Mvc;
using HelpersMVC.Models;

namespace HelpersMVC.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}

[HttpPost]
public ActionResult Index(Persona p)
{
return View(p);
}

}
}

Una vez teniendo el modelo anterior, en la vista crearemos, tanto el

formulario como los controles mediante helpers, mismos que estarán
ligados al modelo, lo cual realizaremos de la siguiente forma:
@model HelpersMVC.Models.Persona  // <- Modelo que utiliza la vista

@{
    ViewBag.Title = "Home Page";
    var lstValores = new List<SelectListItem>(); 
    for (int i=0;i<100;i++)
    {
        lstValores.Add(new SelectListItem() { Value = i.ToString(), Text =
i.ToString() });
    }
}

<div class="jumbotron">
    <h1>Datos de ejemplo</h1>
    <br />
    <br />
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        @Html.LabelFor(m => m.Nombre)
        @Html.TextBoxFor(m => m.Nombre)
        <br />
        @Html.LabelFor(m => m.Apellidos)
        @Html.TextBoxFor(m => m.Apellidos)
        <br />
        @Html.Label("Hombre")
        @Html.RadioButtonFor(m => m.Sexo, "Hombre", new { value = "Hombre" })
        @Html.Label("Mujer")
        @Html.RadioButtonFor(m => m.Sexo, "Mujer", new { value = "Mujer" })
        <br />
        @Html.LabelFor(m => m.Edad)
        @Html.DropDownListFor(m => m.Edad, lstValores)
        <br />
        @Html.LabelFor(m => m.Vive)
        @Html.CheckBoxFor(m => m.Vive)
        <br />
        <input type="submit" value="Submit" />
    }
</div>

Lo cual se renderiza en el navegador se la siguiente forma:

Al utilizar los helpers de esta forma, los datos que ingresemos en
estos controles, automáticamente se vaciaran a nuestro modelo, y al
dar click en el submit, estos se enviaran a la acción correspondiente,
en nuestro ejemplo se mandara al método post de la acción index en
el controlador home, si inspeccionamos el contenido de la variable p
que recibe el index por parámetros veremos que vienen los valores
que el usuario ingreso en el formulario

A continuación te dejo los links tanto del proyecto como de la versión

en línea de este proyecto:

Ver la pagina en ejecución

Descargar el código fuente del ejemplo

Ya que hemos entendido el uso y manejo de los helpers, podemos

pasar al siguiente punto donde veremos la validación del modelo en
Asp.net MVC (Data Annotations)

Validación del modelo en Asp.net MVC (Data Annotations)

En esta etapa del tutorial, veremos cual es la forma de realizar la

validación del modelo en MVC, para esto retomaremos el ejemplo del
ultimo punto, si todavía no lo haz leído, aqui te dejo el link
Recordando un poco como tenemos el ejemplo el anterior, en el
modelo tenemos lo siguiente:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace HelpersMVC.Models
{
public class Persona
{
public string Nombre { get; set; }
public string Apellidos { get; set; }
public string Sexo { get; set; }
public string Edad { get; set; }
public bool Vive { get; set; }
}
}

Algo importante, es que para usar los Data Anotations debemos de

incluir el usingSystem.ComponentModel.DataAnnotations;

Como podemos ver, solo tenemos las propiedades de la clase

Persona, hasta aqui todo bien, ahora que pasa si queremos realizar
alguna validación sobre estos campos, lo que tendríamos que hacer
es mediante etiquetas que se llaman Data Anotations realizaremos
dichas validaciones, por ejemplo, si queremos que no se permitan
tener valores varios en el Nombre y el Apellido agregaríamos la
etiqueta [Required], quedando de la siguiente manera: 

[Required]
public string Nombre { get; set; }
[Required]
public string Apellidos { get; set; }

Como recordaremos, en el ejemplo anterior creamos la vista, con las

propiedades del modelo con el método que bindeaba los controles con
el modelo utilizando los
TextBoxFor, RadioButtonFor, DropDownListFor, etc, razón por la cual
el framework automáticamente realizara la magia de validar estos
campos con tan solo incluir estas etiquetas en el modelo, adicional a lo
anterior tenemos que agregar en la vista la seccion en la cual se
mostraran los errores, esto lo hacemos con la etiqueta
@Html.ValidationSummary("", new { @class = "text-danger" }), la vista
quedaria mas o menos asi:

@model HelpersMVC.Models.Persona

@{
    ViewBag.Title = "Home Page";
    var lstValores = new List<SelectListItem>(); 
    for (int i=0;i<100;i++)
    {
        lstValores.Add(new SelectListItem() { Value = i.ToString(), Text =
i.ToString() });
    }
}

<div class="jumbotron">
    <h1>Datos de ejemplo</h1>
    <br />
    <br />
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        @Html.ValidationSummary("", new { @class = "text-danger" })
        <br />
        @Html.LabelFor(m => m.Nombre)
        @Html.TextBoxFor(m => m.Nombre)
        <br />
        @Html.LabelFor(m => m.Apellidos)
        @Html.TextBoxFor(m => m.Apellidos)
...

Si realizamos una prueba, en donde dejemos los campos vacíos

veremos lo siguiente:
  

 Existen varios data anotations, los cuales puedes utilizar para realizar
las validaciones, a continuación una lista con los mas comunes:

 Required: El campo tiene que llenarse obligatoriamente

 Range: Define un valor máximo y mínimo en valores numéricos
 DisplayName: Especifica el nombre al mostrar para el campo
 MinLength: Indica el largo mínimo de una cadena de texto
 MaxLength: Indica el largo máximo de una cadena de texto
 EmailAddress: Valida que la cadena sea un email valido en su
formato 
Aqui un ejemplo utilizando varias de las anteriores

...
[Required]
[MinLength(length:1)]
[MaxLength(length:50)]
public string Nombre { get; set; }
[Required]
[MinLength(length: 1)]
[MaxLength(length: 50)]
public string Apellidos { get; set; }
...

De igual manera, los Data Annotations, tienen varios parámetros, entre

ellos la personalización del mensaje de error, esto lo definimos
utilizando la propiedad ErrorMessage, aqui un ejemplo:

...
[Required(ErrorMessage ="El campo Nombre no puede estar vacio")]
[MinLength(length:1)]
[MaxLength(length:50)]
public string Nombre { get; set; }
...

Lo cual se vería mas o menos así:

Como vemos los Data Annotations nos hacen la vida mas fácil al tratar
los temas de validación, a continuación te dejo los links con el ejemplo
funcionando para que lo puedas probar

Ver la pagina en ejecución

Descargar el código fuente del ejemplo

Uso de vistas parciales

En este punto del tutorial, veremos la utilización de las vistas parciales,

las cuales nos ayudan a tener organizadas nuestras vistas, ya que con
estas seccionamos el contenido de nuestra pagina, así como para
cuando se rendericé la pagina, por ejemplo cuando realizamos una
llamada en Ajax, solo se devuelva el contenido de la vista parcial y no
toda la pagina, cosa que veremos mas adelante, por el momento
veremos su uso básico

Por ejemplo, imaginemos que tenemos una pagina, donde mostraremos

informacion de registro, del lado izquierdo la imagen del usuario y del
lado derecho su información, para tener esto organizado, utilizaremos
vistas parciales, una para la parte izquierda y otra para la parte derecha,
lo cual realizaremos de la siguiente manera.

Primeramente, crearemos nuestro modelo, el cual llamaremos Persona

y seria se la siguiente forma:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace VistasParciales.Models
{
    public class Persona
    {
        public string imagen { get; set; }
        public string nombre { get; set; }
        public string apellido { get; set; }
        public string direccion { get; set; }
        public string contrasena { get; set; }
    }
}

Ya que tenemos el modelo, podemos definir las 2 vistas parciales, una

donde mostraremos la imagen del usuario y otra donde mostraremos
los datos del usuario, esto utilizando el mismo modelo que definimos
anteriormente, empecemos por la vista parcial izquierda, la cual
quedaría de la siguiente forma:

@model VistasParciales.Models.Persona
@{
    ViewBag.Title = "Mi Página";
}

<div class="container__child signup__thumbnail">

    <div class="thumbnail__logo">
        <img src="@Url.Content(Model.imagen)" alt="Sample Image"
width="350px" style="padding-top:40px" />
        <h1 class="logo__text">Usuario Actual</h1>
    </div>

    <div class="signup__overlay"></div>
</div>

Como vemos en la vista izquierda, tiene el formato de una vista común,

ahora realizaremos la vista parcial derecha, la cual nos quedaría de la
siguiente forma:

@model VistasParciales.Models.Persona
@{
    ViewBag.Title = "Mi Página";
}

<div class="container__child signup__form">

    <form action="#" style="padding-top: 20px;">
        <div class="form-group">
            <label for="username">Nombre</label>
            @Html.EditorFor(m => m.nombre, new { htmlAttributes = new
{ @class = "form-control" } })
        </div>
        <div class="form-group">
            <label for="email">Apellidos</label>
            @Html.EditorFor(m => m.apellido, new { htmlAttributes = new
{ @class = "form-control" } })
        </div>
        <div class="form-group">
            <label for="email">Dirección</label>
            @Html.EditorFor(m => m.direccion, new { htmlAttributes = new
{ @class = "form-control" } })
        </div>
        <div class="form-group">
            <label for="password">Contraseña</label>
            @Html.EditorFor(m => m.contrasena, new { htmlAttributes = new
{ @class = "form-control", @type = "password" } })
        </div>
        <div class="m-t-lg">
            <ul class="list-inline" style="padding-left: 90px;padding-top:
30px;">
                <li>
                    <input class="btn btn--form" type="submit"
value="Registrar" />
                </li>
            </ul>
        </div>
    </form>
</div>
Ahora viene la parte interesante, y esta es la invocación, la cual
realizaremos sobre la vista index, donde utilizaremos la función
Html.Partial(), mandando como parámetro el nombre de la vista parcial
a cargar, así como el modelo que esta utilizara, aqui en
código:@model VistasParciales.Models.Persona

@{
    ViewBag.Title = "Mi Página";
}

<div class="signup__container">

    @Html.Partial("Izquierda", Model)
    @Html.Partial("Derecha", Model)

</div>

Para complementar todo lo anterior, en nuestro controller, vamos a

inicializar el modelo y especificar los datos, quedando de la siguiente
manera: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using VistasParciales.Models;

namespace VistasParciales.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {

            var m = new Persona();

            m.imagen = "~/Content/pic.jpg";
            m.nombre = "Pedro";
            m.apellido = "Perez";
            m.direccion = "No conocida";
            m.contrasena = "nolasabes";

            return View(m);
        }
    }
}
Como pudiste ver, el uso de vistas parciales es relativamente fácil, la
organización es uno de sus usos, pero el mayor provecho se saca al
combinarlo con Ajax, para la recarga de partes de la pagina, lo cual
tocaremos en un punto mas adelante, ahora si, es tiempo de ver el
resultado final:

A continuación los links para ver el proyecto en producción y el link de

descarga

Ver la pagina en ejecución

Descargar el código fuente del ejemplo

Creación de un contador de palabras en Asp.net MVC, en donde

explicaremos:

En este punto, tenemos todo el conocimiento básico para crear una

aplicación en ASP MVC, por lo tanto, empleando lo anterior, crearemos
una aplicación, por ejemplo, realizaremos un contador de palabras en el
cual aparte de mostrarnos el total de palabras, nos de la densidad de las
palabras usadas, es decir, cuantas veces se reporte cada una, cabe
 mencionar que esta aplicación de ejemplo nos servirá para explicar los
siguientes puntos del tutorial

Comenzamos a programar, lo primero que necesitamos es definir el

modelo, en donde necesitaremos primeramente una clase la cual
contenga una propiedad para el texto,  total de palabras y una mas
donde guardaremos la lista de la densidad de las palabras, para la
densidad tambien realizaremos una clase mas para guardar la palabra y
la cantidad de veces repetidas, lo cual nos quedaría de la siguiente
manera

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ContadorPalabras.Models
{
    public class MiModelo
    {
        public string Texto { get; set; }
        public int TotalPalabras { get; set; }
        public List<Densidad> DensidadPalabras { get; set; }
    }

    public class Densidad

    {
        public string Palabra { get; set; }
        public int Cantidad { get; set; }
    }
}

Ahora seguiremos con la programación del controller, realizaremos todo

en el index, primeramente en el request inicialiaremos el modelo y lo
pasaremos en la vista, y en en la parte del request o del post es donde
se realizara la lógica, en donde tendremos que hacer lo siguiente:

 Crear una lista de delimitadores, que serán los caracteres por los
cuales se van a identificar las palabras, por ejemplo, el espacio, la coma,
el salto de linea
 Ya que tenemos las palabras en una lista, asignamos el total en la
propiedad total del modelo
 Con la misma lista anterior, mediante linq, crearemos una query
donde agrupemos las palabras y saquemos la densidad de cada una para
ver la cantidad que se repite cada palabra, con esta info llenamos la lista
del modelo de densidad de palabras
Lo anterior quedaría de la siguiente manera:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ContadorPalabras.Models;
using System.Linq;

namespace ContadorPalabras.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var modelo = new MiModelo();
            modelo.TotalPalabras = 0;
            modelo.DensidadPalabras = new List<Densidad>();          

            return View(modelo);
        }

        [HttpPost]
        public ActionResult Index(MiModelo modelo)
        {
            var palabras = new List<string>();
            if (!string.IsNullOrEmpty(modelo.Texto))
            {
                var Delimitador= new List<char>();
                Delimitador.Add(' ');
                Delimitador.Add(',');
                Delimitador.Add('\n');
                palabras =
modelo.Texto.Split(Delimitador.ToArray()).ToList();                
                modelo.TotalPalabras = palabras.Count();
                var query = palabras.GroupBy(c => c.ToString()).Select(grupo
=> new Densidad
                {
                    Palabra = grupo.Key,
                    Cantidad = grupo.Count()
                }).OrderByDescending(x => x.Cantidad);

                modelo.DensidadPalabras = query.ToList();
            }

            return View(modelo);
        }
    }
}

Ahora lo único que nos falta es la vista, en la cual básicamente

tendremos dos columnas, una donde sera la captura del texto, y otra
donde mostraremos el total de palabras y la densidad de las mismas con
su respectiva cantidad de repeticiones

Para la primera columna, realizaremos el formulario con el BeginForm,

dentro de este definiremos el TextAreaFor para capturar el texto y de la
misma manera meteremos el botón correspondiente para realizar el
submit

Y en la siguiente columna, meteremos los labels para indicar el total de

las palabras, asi como un for each para mostrar todas las palabras con
su densidad

@model ContadorPalabras.Models.MiModelo
@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    <div style="overflow:hidden">
    <div style="width:600px; float:left">
        <p class="lead">Ingresa un texto</p>
        <p>@Html.TextAreaFor(m => m.Texto, new { style = "width: 400px !
important; height: 150px;" })</p>
        <p><input type="submit" class="btn btn-primary btn-lg"
value="Contabilizar" /></p>        
    </div>
        <div style="width:400px; float:right">
            <p>Total de palabras = @Model.TotalPalabras </p>
            <p>Densidad de palabras:</p>
            @if (Model.DensidadPalabras !=null &&
Model.DensidadPalabras.Any()) {
                foreach (var item in Model.DensidadPalabras)
                {
                    <p style="text-indent: 3em">"@item.Palabra" -
@item.Cantidad repedita(s)</p>
                }
            }
        </div>
    </div>
}
</div>

Listo, ahora podemos probar nuestra aplicación y se deberá ver mas o

menos así:

A continuación te dejo los link tanto del proyecto como para que lo
pruebes directamente, ahora que tenemos un ejemplo funcional de una
aplicación en Asp.net MVC, podemos seguir con el siguiente punto
donde veremos como realizar una llamada asíncrona con Ajax  

Ver la pagina en ejecución

Descargar el código fuente del ejemplo

Realizar una llamada asíncrona con Ajax en Asp.net MVC 

Hemos llegado al punto donde veremos algo que es muy usual en una
aplicación que se diga que tiene buena velocidad, y esto son las
llamadas asíncronas con Ajax, que como sabras, se utilizan para
refrescar la información de una cierta parte de la página, esto para no
tener que cargarla completamente y hacer así el proceso mas rápido y
óptimo

Por ejemplo, en el ejemplo anterior donde creamos un contador de

palabras, el cual podrás ver aqui, veras que cuando se hace el submit al
dar click en el botón, la pagina realiza una redirección completa, es decir
se carga toda la página, esto lo podemos optimizar, para que no se
cargue toda la pagina, solo una sección, por ejemplo la parte que
muestra el resultado de la contabilización, es decir la columna derecha,
lo cual podremos realizar de la siguiente manera

En un principio, ocupamos el BeginForm, en donde este contemplaba

las dos columnas, la del cuadro donde capturamos el texto, y la columna
que muestra la cantidad de palabras:

@using (Html.BeginForm("Index", "Home", FormMethod.Post))

{
    <div style="overflow:hidden">
    <div style="width:600px; float:left">
        <p class="lead">Ingresa un texto</p>
        <p>@Html.TextAreaFor(m => m.Texto, new { style = "width: 400px !
important; height: 150px;" })</p>
        <p><input type="submit" class="btn btn-primary btn-lg"
value="Contabilizar" /></p>        
    </div>
        <div style="width:400px; float:right">
            <p>Total de palabras = @Model.TotalPalabras </p>
            <p>Densidad de palabras:</p>
            @if (Model.DensidadPalabras !=null &&
Model.DensidadPalabras.Any()) {
                foreach (var item in Model.DensidadPalabras)
                {
                    <p style="text-indent: 3em">"@item.Palabra" -
@item.Cantidad repedita(s)</p>
                }
            }
        </div>
    </div>
}

Lo que ahora aremos, sera utilizar la función Ajax.BeginForm, ya que

esta función nos permitirá realizar llamadas asíncronas, así no
tendremos la necesidad de recargar toda la pagina, si no la parte que
nos interesa, pero antes de poderla utilizar deberemos de cargar la
referencia, lo cual realizaremos de la siguiente manera:

- Para agregar la referencia, primero debemos abrir NuGet, esto lo

hacemos dando click secundario en el nombre del proyecto

 - En la ventana que salga, buscar "jquery unobtrusive ajax", seleccionar

el paquete que marca la captura y dar click en instalar
- Una vez instalado, veras los siguientes scripts:

Para poder utilizar la referencia del script anterior, primero tenemos

que modificar el archivo Bundles, y ahi cargar el script de
"jquery.unobtrusive-ajax.js" el cual nos debería de quedar así:
using System.Web;
using System.Web.Optimization;

namespace ContadorPalabras
{
    public class BundleConfig
    {
        // For more information on bundling, visit
https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/ajax").Include(
                       "~/Scripts/jquery.unobtrusive-ajax.js"));

            // Utilice la versión de desarrollo de Modernizr para desarrollar

y obtener información. De este modo, estará
            // ready for production, use the build tool at
https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));           

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

Ya que esta en el Bundles, necesitamos agregar la referencia en la vista

del layout, esto en la ultima parte de la vista, casi al final, como se
muestra a continuación:

...
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/ajax")
    @RenderSection("scripts", required: false)

</body>

</html>
Ahora ya tenemos todo listo para utilizarlo, entonces lo que
realizaremos, sera cambiar el Html.BeginForm por Ajax.BeginForm, al
utilizar esta función, debemos especificar mas parámetros, entre ellos,
el mas importante es definir el div a actualizar, ya que esta, es la única
parte de la página que se refrescara y así no cargara toda la página, en
nuestro caso, al div de la segunda columna, lo llamamos divResultado

Para que solo se cargue, esa unica parte, pasaremos esa parte de la
vista a una Partial View, que es una vista parcial, esto para que cuando
se renderise, solo se renderise esta parte, esto lo realizamos creando
una nueva vista en la misma carpeta donde esta el index, la cual
nombramos como "Resultado", esta nueva vista tendrá este contenido:

@model ContadorPalabras.Models.MiModelo

<p>Total de palabras = @Model.TotalPalabras </p>

<p>Densidad de palabras:</p>
@if (Model.DensidadPalabras != null && Model.DensidadPalabras.Any())
{
                foreach (var item in Model.DensidadPalabras)
    {
        <p style="text-indent: 3em">"@item.Palabra" - @item.Cantidad
repedita(s)</p>
    }

Teniendo la vista parcial anterior, ahora solo tenemos que realizar la

modificacion de nuestra vista Index, para que cargue la vista parcial, y
esto lo aremos con la función Html.Partial, donde en los parámetros
especificaremos la vista parcial a cargar así como el modelo que va a
utilizar como se muestra a continuación:

@model ContadorPalabras.Models.MiModelo

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <div style="overflow:hidden">
@using (Ajax.BeginForm("Index", "Home", new AjaxOptions { HttpMethod =
"POST", UpdateTargetId = "divResultado" }))
{
    <div style="width:600px; float:left">
        <p class="lead">Ingresa un texto</p>
        <p>@Html.TextAreaFor(m => m.Texto, new { style = "width: 400px !
important; height: 150px;" })</p>
        <p><input type="submit" class="btn btn-primary btn-lg"
value="Contabilizar" /></p>        
    </div>
}
    <div id="divResultado" style="width:400px; float:right">
            @Html.Partial("Resultado",Model)
    </div>

</div>
</div>

Solo nos resta, modificar el controller, para que, al hacer la funcion de

POST solo devuelva la vista parcial y no toda la pagina, para esto
tendremos que cambiar el return View() por el return PartialView(),
quedando como se muestra:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ContadorPalabras.Models;
using System.Linq;

namespace ContadorPalabras.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var modelo = new MiModelo();
            modelo.TotalPalabras = 0;
            modelo.DensidadPalabras = new List<Densidad>();          

            return View(modelo);
        }

        [HttpPost]
        public ActionResult Index(MiModelo modelo)
        {
            var palabras = new List<string>();
            if (!string.IsNullOrEmpty(modelo.Texto))
            {
                var Delimitador= new List<char>();
                Delimitador.Add(' ');
                Delimitador.Add(',');
                Delimitador.Add('\n');
                palabras =
modelo.Texto.Split(Delimitador.ToArray()).ToList();                
                modelo.TotalPalabras = palabras.Count();
                var query = palabras.GroupBy(c => c.ToString()).Select(grupo
=> new Densidad
                {
                    Palabra = grupo.Key,
                    Cantidad = grupo.Count()
                }).OrderByDescending(x => x.Cantidad);
                modelo.DensidadPalabras = query.ToList();
            }

            return PartialView("Resultado",modelo);
        }
    }
}

Como pudiste ver, el uso es bastante simple, sin embargo se gana

mucho en cuestión de optimización realizando pequeños cambios, a
continuación te dejo los links para que bajes el proyecto a si como la url
para ver corriendo la página

Ver la pagina en ejecución

Descargar el código fuente del ejemplo

Control de usuarios y permisos en Asp.net MVC