Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Manual MVC
Manual MVC
- 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:
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.
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:
MiPrimeraAplicacionMVC/mostrarelemento.aspx?id=U1
MiPrimeraAplicacionMVC/elemento/mostrar/U1
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:
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 .
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;
}
}
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);
}
return View();
}
}
}
@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>
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:
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:
En la Vista:
Mi nombre es @ViewBag.nombreCompleto
En la página:
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:
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:
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
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
@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
@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
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:
@{
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>
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
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
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]
[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; }
...
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.
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.
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="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";
}
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>
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()
{
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
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; }
}
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
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
@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
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
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"));
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"));
}
}
}
...
@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
}
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