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 más organizada a la que se tenía con los
formularios web (Web Forms), lo cual ha tenido como resultado poder tener aplicaciones
más veloces.

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

Este artículo 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 propia 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.

3.- 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 .

4.- 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í:

5- 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

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 página:

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

6.- 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 más 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

7.- 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 using System.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.

8.- 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 = "for
m-control" } })
</div>
<div class="form-group">
<label for="password">Contraseña</label>
@Html.EditorFor(m => m.contrasena, new { htmlAttributes = new { @class = "fo
rm-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:
9 - Creación de un contador de palabras en Asp.net MVC,

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 !importan
t; height: 150px;" })</p>
<p><input type="submit" class="btn btn-primary btn-lg" value="Contabiliz
ar" /></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

10 9.- 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 más 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 !importan
t; height: 150px;" })</p>
<p><input type="submit" class="btn btn-primary btn-lg" value="Contabiliz
ar" /></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/fwli
nk/?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", U
pdateTargetId = "divResultado" }))
{
<div style="width:600px; float:left">
<p class="lead">Ingresa un texto</p>
<p>@Html.TextAreaFor(m => m.Texto, new { style = "width: 400px !importan
t; height: 150px;" })</p>
<p><input type="submit" class="btn btn-primary btn-lg" value="Contabiliz
ar" /></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