Introduccin a ASP.NET MVC 4Intro to ASP.NET MVC 4PorRick
Anderson|15 De agosto de 2012Este tutorial le ensear los
fundamentos de la creacin de una aplicacin ASP.NET MVC 4 Web
utilizando MicrosoftVisual Studio Express 2012o Visual Web
Developer 2010 Express Service Pack 1.Visual Studio 2012 se
recomienda, no necesitars instalar nada para completar el
tutorial.Si est utilizando Visual Studio 2010, debe instalar los
componentes ms abajo.Puede instalar todas ellas haciendo clic en
los enlaces siguientes: Requisitos visuales Studio Web Developer
Express SP1 Instalador WPI para ASP.NET MVC 4 LocalDB SSDTSi est
utilizando Visual Studio 2010 en lugar de Visual Web Developer
2010, instale elinstalador WPI para ASP.NET MVC 4y el:requisitos
previos de Visual Studio 2010Un proyecto de Visual Web Developer
con cdigo fuente C# est disponible para acompaar a este
tema.Descargar la versin de C#.En el tutorial de ejecutar la
aplicacin en Visual Studio.Tambin puedes la aplicacin disponible en
Internet mediante la implementacin de un proveedor de
hosting.Microsoft ofrece alojamiento web gratis para hasta 10
sitios web en unacuenta de prueba gratis de Windows Azure.Para
obtener informacin sobre cmo implementar un proyecto web de Visual
Studio a un sitio Web de Windows Azure, consultecrear e implementar
un sitio web ASP.NET y base de datos SQL con Visual Studio.Este
tutorial tambin muestra cmo utilizar la entidad marco cdigo primera
migraciones para implementar su base de datos de SQL Server en la
base de datos de SQL Azure del Windows (anteriormente SQL Azure).Lo
que construirsA aplicar una sencilla aplicacin de pelcula-listado
que apoya la creacin, edicin, bsqueda y listado de pelculas de una
base de datos.A continuacin se muestran dos imgenes de la aplicacin
que construirs.Incluye una pgina que muestra una lista de pelculas
desde una base de datos:
La aplicacin tambin le permite agregar, editar y eliminar
pelculas, as como ver detalles sobre los individuales.Todos los
escenarios de entrada de datos incluyen la validacin para
garantizar que los datos almacenados en la base de datos estn
correctos.
Getting StartedInicie Visual Studio Express 2012 o Visual Web
Developer 2010 Express.La mayora de las capturas de pantalla en
esta serie de aplicacin Visual Studio Express 2012, pero usted
puede completar este tutorial con Visual Studio 2010/SP1, 2012 de
Visual Studio, Visual Studio Express 2012 o Visual Web Developer
2010 Express.SeleccioneNuevo proyectoen la pgina deInicio.Visual
Studio es un IDE o entorno de desarrollo integrado.Al igual que
utilizar Microsoft Word para escribir documentos, utilizar un IDE
para crear aplicaciones.En Visual Studio, hay una barra de
herramientas en la parte superior que muestra varias opciones
disponibles para usted.Tambin hay un men que ofrece otra manera
para realizar tareas en el IDE.(Por ejemplo, en lugar de
seleccionar elNuevo proyectode la pgina deInicio, puede utilizar el
men y seleccionearchivo>Nuevo proyecto.)
Crear su primera aplicacinPuede crear aplicaciones usando Visual
Basic o Visual C# como lenguaje de programacin.Seleccione Visual C#
a la izquierda y seleccioneLa aplicacin Web ASP.NET MVC 4.Nombre de
su proyecto "MvcMovie" y haga clic enAceptar.
En el cuadro de dilogoNuevo proyecto de ASP.NET MVC 4,
seleccioneAplicacin de Internet.Deje laafeitadoracomo el motor de
vista predeterminado.
Haga clic enAceptar.Visual Studio utiliza una plantilla
predeterminada para el proyecto de ASP.NET MVC que acaba de crear,
para que tenga una aplicacin de trabajo ahora mismo sin hacer
nada!Se trata de un simple proyecto " Hola mundo!", y es un buen
lugar para comenzar su aplicacin.
Desde el mendepurar, seleccioneIniciar depuracin.
Observe que el mtodo abreviado de teclado para empezar a depurar
es F5.F5 hace que Visual Studio Inicie IIS Express y ejecutar la
aplicacin web.Visual Studio entonces lanza un navegador y abre la
Pgina principal de la aplicacin.Tenga en cuenta que la barra de
direcciones del navegador dicelocalhosty no algo
comoexample.com.Eso es porquelocalhostapunta siempre a su propio
equipo local, que en este caso se ejecuta la aplicacin que usted
slo construido.Cuando se ejecuta un proyecto web en Visual Studio,
un puerto aleatorio se utiliza para el servidor web.En la imagen
siguiente, el nmero de puerto es 41788.Cuando se ejecuta la
aplicacin, probablemente veremos un nmero de puerto distinto.
Sacarlo de la caja esta plantilla predeterminada le da inicio,
contactos y sobre las pginas.Tambin presta apoyo para registrarse y
acceder y enlaces a Facebook y Twitter.El siguiente paso es cambiar
el funcionamiento de esta aplicacin y aprender un poco sobre
ASP.NET MVC.Cerrar el navegador y vamos a cambiar algo de
cdigo.
Aadir un controladorAdding a ControllerPorRick Anderson|28 De
agosto de 2012MVC est parado paramodel-view-controller.MVC es un
patrn para el desarrollo de aplicaciones que son fciles de
mantener, bien diseada y comprobable.Aplicaciones basadas en MVC
contienen: Modelos: clases que representan los datos de la
aplicacin y que usar la lgica de validacin para aplicar reglas de
negocio para los datos. Vaba: archivos de plantilla que la
aplicacin utiliza para generar dinmicamente las respuestas HTML.
Controllers: clases que manejan las solicitudes entrantes de
navegador, recuperar datos de modelo y especificar plantillas de
vista que devuelven una respuesta al navegador.Nosotros ser
cubriendo todos estos conceptos en esta serie de tutoriales y
mostrarle cmo utilizarlos para crear una aplicacin.Vamos a empezar
por crear una clase de controlador.EnExplorador de soluciones, haga
clic derecho en elcontroladorescarpeta y a continuacin,
seleccioneAgregar controlador.
Nombre de su nuevo controlador "HelloWorldController".Dejar la
plantilla predeterminada comocontrolador MVC vacoy haga clic
enAgregar.
AvisoExplorador de solucionesque crea un nuevo archivo ha sido
nombradoHelloWorldController.cs.El archivo est abierto en el
IDE.
Sustituir el contenido del archivo con el cdigo siguiente.using
System.Web;using System.Web.Mvc; namespace MvcMovie.Controllers {
public class HelloWorldController : Controller { // // GET:
/HelloWorld/ public string Index() { return "This is my
default action..."; } // // GET: /HelloWorld/Welcome/ public
string Welcome() { return "This is the Welcome action method..."; }
} }Los mtodos del controlador devolver una cadena de HTML como un
ejemplo.El controlador se denominaHelloWorldControllery se llama el
primer mtodo anteriorIndex.Vamos a invocarlo desde un
navegador.Ejecute la aplicacin (presione F5 o Ctrl + F5).En el
navegador, anexar "HelloWorld" a la ruta en la barra de
direcciones.(Por ejemplo, en la figura de abajo,
eshttp://localhost:1234/HelloWorld.)La pgina en el navegador se ver
como la siguiente pantalla.En el mtodo anterior, el cdigo devuelto
una cadena directamente.Me dijiste que el sistema slo volver
algunos HTML, y as fue!
ASP.NET MVC invoca otro regulador clases (y mtodos de accin
diferentes dentro de ellos) dependiendo de la URL de entrada.La
lgica de enrutamiento de enlace por defecto utilizada por ASP.NET
MVC utiliza un formato como este para determinar qu cdigo para
invocar:/[Controller]/[ActionName]/[Parameters]La primera parte de
la URL determina la clase del controlador para
ejecutar.Tan/HelloWorldasigna a laHelloWorldControllerclase.La
segunda parte de la URL determina el mtodo de accin en la clase a
ejecutar.Tan/HelloWorld/Indexcausara laIndexmtodo de
laHelloWorldControllerclase a ejecutar.Tenga en cuenta que slo
tuvimos que buscar a/HelloWorldy elIndexmtodo fue utilizado por
defecto.Esto es porque un mtodo denominadoIndexes el mtodo por
defecto que se llamar en un controlador, si uno no se especifica
explcitamente.Vaya
ahttp://localhost:xxxx/HelloWorld/Welcome.ElWelcomemtodo funciona y
devuelve la cadena "Este es el mtodo de accin Bienvenido...".La
asignacin de MVC predeterminada
es/[Controller]/[ActionName]/[Parameters].Para esta URL, es el
controladorHelloWorldyWelcomees el mtodo de accin.No has usado
el[Parameters]parte de la URL todava.
Vamos a modificar un poco el ejemplo por lo que puede pasar
alguna informacin del parmetro de la URL al controlador (por
ejemplo,/HelloWorld/bienvenida? nombre = Scott & numtimes =
4).Cambio suWelcomemtodo para incluir dos parmetros como se muestra
a continuacin.Observe que el cdigo utiliza la caracterstica de
parmetro opcional de C# para indicar que elnumTimesparmetro debe
por defecto a 1 si no se pasa ningn valor para ese parmetro.public
string Welcome(string name, int numTimes = 1) { return
HttpUtility.HtmlEncode("Hello " + name + ", NumTimes is: " +
numTimes);}Ejecutar la aplicacin y vaya a la URL de ejemplo
(http://localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4).Puedes
probar diferentes valores paranameynumtimesen la URL.Elsistema de
fijacin de ASP.NET MVC modeloasigna automticamente los parmetros
con nombre de la cadena de consulta en la barra de direcciones para
parmetros en su mtodo.
En tanto estos ejemplos el controlador viene realizando la parte
de "VC" de MVC es decir, la obra vista y controlador.El controlador
est volviendo HTML directamente.Normalmente no quieren
controladores volver HTML directamente, puesto llega a ser muy
incmodo al cdigo.En cambio, normalmente usaremos un archivo de
plantilla de vista separada para ayudar a generar la respuesta
HTML.Echemos un vistazo siguiente en cmo podemos hacer esto.
Agregar una vistaAdding a ViewPorRick Anderson|28 De agosto de
2012En esta seccin vas a modificar la clase
deHelloWorldControllerpara utilizar archivos de plantilla de la
vista para encapsular limpiamente el proceso de generar respuestas
HTML a un cliente.A crear un archivo de plantilla de vista
utilizando elmotor de vistas de maquinilla de afeitarcon ASP.NET
MVC 3.Enfoque basado en la maquinilla de afeitar las plantillas
tienen un.cshtmlextensin del archivo y proporcionar una manera
elegante de crear HTML de salida utilizando C#.Maquinilla de
afeitar minimiza el nmero de caracteres y pulsaciones de teclas
necesarias al escribir una plantilla de vista y permite un fluido
rpido, codificacin de flujo de trabajo.Actualmente el mtodo
deIndexdevuelve una cadena con un mensaje codificado en la clase
del controlador.Cambiar el mtodo deIndexpara devolver un
objetoView, como se muestra en el siguiente cdigo:public
ActionResult Index() { return View(); }El mtodo deIndexanterior
utiliza una plantilla de vista para generar una respuesta HTML al
navegador.Mtodos de controlador (tambin conocido comomtodos de
accin), como el mtodo deIndexanterior, generalmente devuelven
unActionResult(o una clase derivada deActionResult), los tipos
primitivos no como cadena.En el proyecto, agregue una plantilla de
vista que se puede utilizar con el mtodo deIndex.Para ello, haga
clic derecho dentro del mtodo deIndexy haga clic enAgregar ver.
Aparece el cuadro de dilogoAgregar ver.Dejar los predeterminados
de la manera que se haga clic en el botnAgregar:
Se crean la carpetaMvcMovie\Views\HelloWorldy el
archivoMvcMovie\Views\HelloWorld\Index.cshtml.Se los puede ver en
elExplorador de soluciones:
A continuacin muestra el archivoIndex.cshtmlque se cre:
Agregue el siguiente cdigo HTML en la etiqueta.Hello from our
View Template!A continuacin se muestra el archivo completo
deMvcMovie\Views\HelloWorld\Index.cshtml.@{ ViewBag.Title =
"Index";}
Index
Hello from our View Template!Si est utilizando Visual Studio
2012, en el explorador de soluciones, haga clic con el botn derecho
el archivoIndex.cshtmly seleccioneMostrar en la pgina
Inspector.
ElInspector pgina tutorialtiene ms informacin acerca de esta
nueva herramienta.Tambin puede ejecutar la aplicacin y busque el
controladorHelloWorld(http://localhost:xxxx/HelloWorld).El mtodo
deIndexen su controlador no mucho trabajo;simplemente funcion la
declaracinreturn View(), que especifica que el mtodo debe utilizar
un archivo de plantilla de vista para representar una respuesta al
navegador.Porque no especificar explcitamente el nombre del archivo
de plantilla de vista utilizar, ASP.NET MVC por defecto utilizando
elIndex.cshtmlVer archivo en la carpeta\Views\HelloWorld.La imagen
de abajo muestra la cadena "Hola de nuestra plantilla de vista!" en
la vista.
Se ve bastante bien.Sin embargo, observe que barra de ttulo del
navegador muestra "ndice mi A ASP.NET" y el gran enlace en la parte
superior de la pgina dice "logo aqu."A continuacin el enlace de "su
logotipo aqu." registro y entrar en enlaces y por debajo de la que
se vincula a la casa, cerca y pginas de contacto.Vamos a cambiar
algunas de ellas.Cambiar puntos de vista y pginas de diseoEn primer
lugar, usted quiere cambiar el ttulo "tu logo aqu.", en la parte
superior de la pgina.Ese texto es comn a todas las pginas.Realmente
se implementa en un nico lugar en el proyecto, a pesar de que
aparece en cada pgina de la aplicacin.Vaya a la
carpeta/Views/Shareden elExplorador de solucionesy abra el
archivo_Layout.cshtml.Este archivo se llama unapgina de diseoy es
compartido "shell" que utilizan todas las dems pginas.
Las plantillas de diseo permiten especificar el diseo de envase
HTML de su sitio en un solo lugar y luego aplicarlo a travs de
varias pginas en su sitio.Busque la lnea
de@RenderBody().RenderBodyes un marcador de posicin donde todas las
pginas de vista que creas demuestran para arriba, "envueltas" en la
pgina de diseo.Por ejemplo, si selecciona el enlace de sobre, el
punto de vistaViews\Home\About.cshtmlse representa dentro del
mtodoRenderBody.Cambie el encabezado del ttulo de sitio en la
plantilla de diseo de "tu logo aqu" a la pelcula"MVC".
@Html.ActionLink("MVC Movie", "Index", "Home")
Reemplace el contenido del elemento title con el siguiente
marcado:@ViewBag.Title - Movie AppEjecute la aplicacin y observe
que ahora dice "MVC Movie".Haga clic en el enlace desobrey ver cmo
esa pgina muestra "la pelcula MVC", tambin.Hemos sido capaces de
hacer el cambio una vez en la plantilla de diseo y con todas las
pginas en el sitio reflejan el nuevo ttulo.
Ahora, vamos a cambiar el ttulo de la vista de
ndice.AbrirMvcMovie\Views\HelloWorld\Index.cshtml.Hay dos lugares
para hacer un cambio: en primer lugar, el texto que aparece en el
ttulo del navegador y luego en el encabezado secundario (el
elemento).Te haces algo diferente para que pueda ver que poco de
cdigo cambia que parte de la aplicacin.@{ ViewBag.Title = "Movie
List";}
My Movie List
Hello from our View Template!Para indicar el ttulo HTML para
mostrar, el cdigo anterior establece una propiedadTitledel
objetoViewBag(que es en la plantilla de vista de laIndex.cshtml).Si
miras hacia atrs en el cdigo de la plantilla de diseo, usted notar
que la plantilla utiliza este valor en el elemento decomo parte de
la seccindel HTML que modificamos anteriormente.Utilizando este
enfoqueViewBag, fcilmente puede pasar otros parmetros entre la
plantilla de la vista y el archivo de diseo.Ejecute la aplicacin y
vaya ahttp://localhost:xx/HelloWorld.Tenga en cuenta que han
cambiado el ttulo del navegador, el ttulo principal y los ttulos
secundarios.(Si no ve cambios en el navegador, usted puede estar
viendo contenido almacenado en cach.Presione CTRL+F5 en tu
navegador para forzar la respuesta desde el servidor a cargarse).El
ttulo del navegador se crea con laViewBag.Titleque hemos creado en
la plantilla de vista de laIndex.cshtmly el adicional "-pelcula
App" en el archivo de diseo.Tambin se observa cmo el contenido de
la plantilla de vistaIndex.cshtmlse fusion con la plantilla de
vista_Layout.cshtmly una sola respuesta HTML fue enviada al
navegador.Plantillas de diseo hacen realmente fciles de realizar
cambios que afecten a travs de todas las pginas de la
aplicacin.
Nuestro poco de "datos" (en este caso el mensaje "Hola de
nuestra plantilla de vista!") es modificable, sin embargo.La
aplicacin MVC tiene una "V" (ver) y ya tienes una "C"
(controlador), pero no "M" (modelo) todava.Dentro de poco,
caminaremos a travs de cmo crear una base de datos y recuperar
datos de modelo de l.Pasar datos del controlador a la vistaAntes de
ir a una base de datos y hablar de modelos, sin embargo, primero
hablemos pasando informacin del controlador a la vista.Las clases
del controlador se invocan en respuesta a una solicitud de enlace
entrante.Una clase de controlador es donde se escribe el cdigo que
controla el navegador entrante pide, recupera los datos de una base
de datos y en ltima instancia decide qu tipo de respuesta para
enviar hacia el navegador.Plantillas de vista pueden utilizarse
luego de un controlador para generar y dar formato a una respuesta
HTML al navegador.Controladores son responsables de proporcionar
cualquier informacin u objetos son necesaria para una plantilla de
vista representar una respuesta al navegador.Una mejor prctica:una
plantilla de vista nunca debe realizar la lgica de negocio o
interactuar con una base de datos directamente.En cambio, una
plantilla de vista debe trabajar slo con los datos que es
proporcionados por el controlador.Mantener esta "separacin de
preocupaciones" ayuda a mantener el cdigo limpio, comprobables y ms
fcil de mantener.Actualmente, el mtodo de accinWelcomeen la
claseHelloWorldControllertiene unnamey un parmetro denumTimesy
entonces salidas los valores directamente en el navegador.En lugar
de tener el controlador representar esta respuesta como una cadena,
vamos a cambiar el controlador para usar una plantilla de vista en
su lugar.La plantilla de vista generar una respuesta dinmica, por
lo que usted tiene que pasar brocas adecuadas de datos del
controlador a la vista con el fin de generar la respuesta.Puede
hacer esto al tener el controlador de poner los datos dinmicos
(parmetros) que la plantilla de vista en un objetoViewBagque se
puede acceder a la plantilla de la vista.Volver al
archivoHelloWorldController.csy cambiar el mtodo deWelcomepara
agregar un valor deMessageyNumTimesal objetoViewBag.ViewBages un
objeto dinmico, que significa que usted puede poner lo que
quierasel objetoViewBagno tiene ninguna propiedad definida hasta
que ponga algo en su interior.Elsistema de fijacin de ASP.NET MVC
modeloasigna automticamente los parmetros con nombre
(nameynumTimes) de la cadena de consulta en la barra de direcciones
a parmetros en su mtodo.El archivo completo
deHelloWorldController.csse ve as:using System.Web;using
System.Web.Mvc;
namespace MvcMovie.Controllers{ public class
HelloWorldController : Controller { public ActionResult Index() {
return View(); }
public ActionResult Welcome(string name, int numTimes = 1) {
ViewBag.Message = "Hello " + name; ViewBag.NumTimes = numTimes;
return View(); } }}Ahora el objetoViewBagcontiene datos que se
pasarn automticamente a la vista.A continuacin, necesita una
plantilla de vista Bienvenido!En el mengenerar, seleccioneCrear
MvcMoviepara asegurarse de que el proyecto se compila.Luego haga
clic derecho dentro del mtodoWelcomey haga clic enAgregar ver.
Esto es lo que parece el cuadro de dilogoAgregar ver:
Haga clic enAgregary luego agregue el cdigo siguiente debajo del
elemento deen el nuevo archivoWelcome.cshtml.A crear un bucle que
dice "Hola" tantas veces como el usuario dice que debe.A
continuacin se muestra el archivo completo deWelcome.cshtml.@{
ViewBag.Title = "Welcome";}
Welcome
- @for (int i=0; i < ViewBag.NumTimes; i++) {
- @ViewBag.Message }
Ejecute la aplicacin y vaya a la siguiente
URL:http://localhost:XX/HelloWorld/Welcome?name=Scott&numtimes=4Ahora
datos es tomadas de la URL y pasados al controlador usando
lacarpeta del modelo.El controlador paquetes los datos en un
objetoViewBagy pasa ese objeto a la vista.La vista mostrar los
datos como HTML al usuario.
En el ejemplo anterior, utilizamos un objetoViewBagpara pasar
los datos del controlador a la vista.Este ltimo en el tutorial,
usaremos un modelo de vista para pasar datos de un controlador a la
vista.El enfoque del modelo de vista pasando datos se prefiere
generalmente mucho sobre el enfoque de la bolsa de vista.Ver la
entrada de blogDinmico V fuertemente escribi Viewspara obtener ms
informacin.Bueno, era una especie de "M" para el modelo, pero no el
tipo de base de datos.Vamos a hacer lo que has aprendido y crear
una base de datos de pelculas.
Agregar un modeloPorRick Anderson|28 De agosto de 2012En esta
seccin aadiremos algunas clases para gestionar pelculas en una base
de datos.Estas clases ser la parte de "modelo" de la aplicacin
ASP.NET MVC.Usted usar una tecnologa de acceso a datos de .NET
Framework conocida como elEntity Frameworkpara definir y trabajar
con estas clases de modelo.Entity Framework (a menudo denominado
EF) apoya un paradigma de desarrollo llamadoPrimer cdigo.Cdigo
primero permite crear objetos del modelo escribiendo clases
simples.(Estos son tambin conocidos como clases POCO, de "objetos
CLR de llanura de edad.")Con ella podrs tener la base de datos
creada sobre la marcha de sus clases, que permite un flujo de
trabajo de desarrollo muy limpio y rpido.Agregar clases de modeloEn
elExplorador de soluciones, haga clic derecho en la carpeta
demodelos, seleccioneAgregary seleccioneclase.
Introduzca el nombre de laclase"Pelcula".Agregue las siguientes
cinco propiedades a la clase deMovie:public class Movie { public
int ID { get; set; } public string Title { get; set; } public
DateTime ReleaseDate { get; set; } public string Genre { get; set;
} public decimal Price { get; set; }}Vamos a usar la clase
deMoviepara representar pelculas en una base de datos.Cada
instancia de un objeto deMoviecorresponder a una fila de una tabla
de base de datos, y cada propiedad de la clase deMoviese asigne a
una columna en la tabla.En el mismo archivo, agregue la siguiente
clase deMovieDBContext: public class MovieDBContext : DbContext {
public DbSet Movies { get; set; } }La claseMovieDBContextrepresenta
el contexto de la base de datos de pelcula de Entity Framework, que
se encarga de obtener, almacenar y actualizar instancias de la
clase deMovieen una base de datos.ElMovieDBContextse deriva de la
clase baseDbContextde Entity Framework.Con el fin de ser capaces de
referenciaDbContextyDbSet, debe aadir la siguiente
instruccinusingal principio del archivo:using System.Data.Entity;A
continuacin se muestra el archivo completo deMovie.cs.(Varios
usando declaraciones que no sean necesarios han sido
removido.)using System;using System.Data.Entity;
namespace MvcMovie.Models{ public class Movie { public int ID {
get; set; } public string Title { get; set; } public DateTime
ReleaseDate { get; set; } public string Genre { get; set; } public
decimal Price { get; set; } }
public class MovieDBContext : DbContext { public DbSet Movies {
get; set; } }}Crear una cadena de conexin y trabajando con SQL
Server LocalDBLa claseMovieDBContextque creaste encarga de la tarea
de conectar a la base de datos y mapeo de objetos de laMoviea los
registros de la base de datos.Una pregunta, que usted podra
preguntarse, sin embargo, es cmo especificar que se conectar a la
base de datos.Hars agregando informacin de conexin en el
archivoWeb.configde la aplicacin.Abra el archivoWeb.configde la
aplicacin raz.(No el archivoWeb.configen la carpetaViews.)Abra el
archivoWeb.configen rojo.
Aadir la siguiente cadena de conexin para el elementoen el
archivoWeb.config. En el ejemplo siguiente se muestra una porcin
del archivoWeb.configcon la nueva cadena de conexin agregada:
Esta pequea cantidad de cdigo y XML es todo lo que necesita para
escribir para representar y almacenar los datos de la pelcula en
una base de datos.A continuacin, construirs una nueva clase
deMoviesControllerque puede utilizar para mostrar los datos de la
pelcula y permiten a los usuarios crear nueva cartelera.
Acceso a datos de su modelo desde un controladorPorRick
Anderson|28 De agosto de 2012En esta seccin, podr crear una nueva
clase deMoviesControllery escribir cdigo que recupera los datos de
la pelcula y lo muestra en el navegador mediante una plantilla de
vista.Generar la aplicacinantes de pasar al siguiente paso.Haga
clic derecho en la carpetaControllersy crear un nuevo controlador
deMoviesController.Las siguientes opciones no aparecern hasta que
construyes tu aplicacin.Seleccione las siguientes opciones: Nombre
del controlador:MoviesController.(Este es el valor por defecto).
Plantilla:Controlador MVC con acciones de lectura/escritura y
vistas, con Entity Framework. Modelo de clase:pelcula
(MvcMovie.Models). Clase de contexto de datos:MovieDBContext
(MvcMovie.Models). Vistas:maquinilla de afeitar
(CSHTML).(Predeterminado).
Haga clic enAgregar.Visual Studio Express crea los siguientes
archivos y carpetas: MoviesController.cs de unarchivo en la carpeta
decontroladores. Una carpeta "pelculas" en la carpeta del
proyectoViews. Create.cshtml, Delete.cshtml, Details.cshtml,
Edit.cshtmlyIndex.cshtmlen la carpetaViews\Movies.ASP.NET MVC 4
crea automticamente el CRUD (crear, leer, actualizar y eliminar)
mtodos de accin y vistas para usted (la creacin automtica de vistas
y mtodos de accin CRUD es conocida como andamio).Ahora tienes una
aplicacin web completamente funcional que permite crear, lista,
editar y borrar las entradas de la pelcula.Ejecute la aplicacin y
busque el controlador deMoviesaadiendo/Moviesa la URL en la barra
de direcciones del navegador.Porque la aplicacin se basa en el
valor predeterminado enrutamiento (definida en el
archivoGlobal.asax), la peticin de
navegadorhttp://localhost:xxxxx/Moviesse dirige al mtodo de accin
deIndexpredeterminado del controlador deMovies.En otras palabras,
la solicitud de navegadorhttp://localhost:xxxxx/Movieses que
efectivamente igual al navegador
solicitarhttp://localhost:xxxxx/Movies/Index.El resultado es una
lista vaca de pelculas, porque an alguno no ha aadido.
Crear una pelculaSeleccione el vnculoCrear nuevo.Entrar en
algunos detalles acerca de una pelcula y haga clic en el
botncrear.
Haga clic en el botncrearcausa la forma ser publicada en el
servidor donde se guarda la informacin de la pelcula en la base de
datos.Luego est redirigido a la URL/Movies, donde se puede ver la
pelcula recin creada en el listado.
Crear un par ms entradas de cine.Trate deEditar,los
datosyeliminarenlaces, que son todo funcional.Examinar el cdigo
generadoAbra el archivoControllers\MoviesController.csy examinar el
mtodo deIndexgenerado.A continuacin se muestra una porcin del
controlador de la pelcula con el mtodo deIndex.public class
MoviesController : Controller{ private MovieDBContext db = new
MovieDBContext();
// // GET: /Movies/
public ActionResult Index() { return View(db.Movies.ToList());
}La siguiente lnea de la claseMoviesControllercrea un contexto de
base de datos de la pelcula, como se ha descrito
anteriormente.Puede utilizar el contexto de la base de datos de la
pelcula para consultar, editar y borrar peliculas.private
MovieDBContext db = new MovieDBContext();Una solicitud al
controlador deMoviesdevuelve todas las entradas en la tabla
deMoviesde la base de datos de la pelcula y luego pasa los
resultados a la vista deIndex.Modelos inflexible y la palabra clave
de @modelAnteriormente en este tutorial, usted vio cmo un
controlador puede pasar datos u objetos a una plantilla de vista
mediante el objetoViewBag.ElViewBages un objeto dinmico que
proporciona una forma conveniente de enlazados para pasar
informacin a la vista.ASP.NET MVC tambin ofrece la posibilidad de
pasar fuertemente escribe datos u objetos a una plantilla de
vista.Esto inflexible de enfoque permite mejor tiempo de compilacin
de su cdigo y ms rico IntelliSense en el editor de Visual Studio.El
mecanismo de andamios en Visual Studio utiliza este enfoque con las
plantillasMoviesControllerde la clase y ver cuando se crean los
mtodos y las vistas.En el
archivoControllers\MoviesController.csexaminar el mtodo
deDetailsgenerado.A continuacin se muestra una porcin del
controlador de la pelcula con el mtodo deDetails.public
ActionResult Details(int id = 0){ Movie movie = db.Movies.Find(id);
if (movie == null) { return HttpNotFound(); } return
View(movie);}Si se encuentra unaMovie, se pasa una instancia de la
modelo de laMoviea la vista de detalles.Examinar el contenido del
archivoViews\Movies\Details.cshtml.Mediante la inclusin de una
declaracin de@modelen la parte superior del archivo de plantilla de
vista, puede especificar el tipo de objeto que espera de la
vista.Al crear el controlador de la pelcula, Visual Studio incluye
automticamente la siguiente declaracin de@modelen la parte superior
del archivoDetails.cshtml:@model MvcMovie.Models.MovieEsta
directiva de@modelle permite acceder a la pelcula que el
controlador pasa a la vista mediante unModelde objeto que es
inflexible.Por ejemplo, en la plantilla deDetails.cshtml, el cdigo
pasa cada campo de pelcula a losDisplayNameFory ayudantes
deDisplayForHTML con el objeto deModelinflexible.Los mtodos de
crear y editar y vista plantillas tambin pasan un objeto de modelo
de la pelcula.Examinar la plantilla de vista de laIndex.cshtmly el
mtodo deIndexen el archivoMoviesController.cs.Observe cmo el cdigo
crea un objetoListcuando llama al mtodo de ayudante deViewen el
mtodo de accin delIndex.El cdigo pasa esta lista deMoviesdel
controlador a la vista:public ActionResult Index(){ return
View(db.Movies.ToList());}Al crear el controlador de la pelcula,
Visual Studio Express incluye automticamente la siguiente
declaracin de@modelen la parte superior del
archivoIndex.cshtml:@model IEnumerable Esta directiva
de@modelpermite acceder a la lista de pelculas que el controlador
pasa a la vista mediante unModelde objeto que es inflexible.Por
ejemplo, en la plantilla deIndex.cshtml, el cdigo recorre las
pelculas haciendo una instruccinforeachsobre el
objetoModelinflexible:@foreach (var item in Model) {
@Html.DisplayFor(modelItem => item.Title)
@Html.DisplayFor(modelItem => item.ReleaseDate)
@Html.DisplayFor(modelItem => item.Genre)
@Html.DisplayFor(modelItem => item.Price)
@Html.DisplayFor(modelItem => item.Rating)
@Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
@Html.ActionLink("Details", "Details", { id=item.ID }) |
@Html.ActionLink("Delete", "Delete", { id=item.ID }) }Porque el
objeto delModeles inflexible (como un objetoIEnumerable), cada
objeto delitemen el lazo se escribe comoMovie.Entre otros
beneficios, esto significa que puedes Obtn comprobacin en tiempo de
compilacin del cdigo y soporte de IntelliSense en el editor de
cdigo:
Trabajando con SQL Server LocalDBCdigo de entidad marco primera
detect que la cadena de conexin de base de datos que proporcionaron
seal a una base de datos deMoviesque no exista todava, primer cdigo
creado automticamente la base de datos.Se puede comprobar que se ha
creado por mirar en la carpetaApp_Data.Si no ves el
archivoMovies.mdf, haga clic en el botnMostrar todos los archivosen
la barra de herramientas delExplorador de soluciones, haga clic en
el botnActualizary continuacin, expanda la carpetaApp_Data.
Haga doble clic enMovies.mdfpara abrir elExplorador de base de
datos, a continuacin, expanda la carpetatablaspara ver la tabla de
pelculas.
Nota: Si no aparece el explorador de base de datos, en el
menHerramientas, seleccioneconectar a la base de datosy cancelar el
cuadro de dilogoElegir origen de datos.Esto forzar abrir el
explorador de base de datos.Nota: Si usted est usando VWD o Visual
Studio 2010 y sale un error similar a cualquiera de las siguientes
opciones siguientes: La base de datos '
C:\Webs\MVC4\MVCMOVIE\MVCMOVIE\APP_DATA\MOVIES.MDF' no se puede
abrir porque es versin 706.Este servidor compatible con la versin
anterior y 655.No se admite un camino de descenso de categora.
"Excepcin InvalidOperation fue no controlada por el cdigo de
usuario" el SqlConnection suministrado no especifica un catlogo
inicial.Es necesario instalar lasHerramientas de datos de SQL
ServeryLocalDB.Verificar la cadena de
conexinMovieDBContextespecificada en la pgina anterior.Haga la
tablaMoviesy seleccioneMostrar datos de la tablapara ver los datos
que creaste.
Haga la tablaMoviesy seleccioneAbrir definicin de tablapara ver
la estructura de la tabla que entidad marco cdigo primer creado
para usted.
Observe cmo el esquema de los mapas de la tabla deMoviesa la
clase deMovieque cre anteriormente.Cdigo de entidad marco primera
crea automticamente este esquema para usted, basado en la clase
deMovie.Cuando haya terminado, cierre la conexinMovieDBContextde
clic derecho y seleccionandoCerrar la conexin.(Si no cierra la
conexin, usted podra obtener un error la prxima vez que ejecute el
proyecto).
Ahora tienes la base de datos y una pgina de listado simple para
mostrar el contenido de ella.En el siguiente tutorial, a examinar
el resto del cdigo escalonado y aadir un mtodo deSearchIndexy una
vista deSearchIndexque le permite buscar pelculas en esta base de
datos.
Examinar los mtodos de editar y editar vistaExamining the Edit
Methods and Edit ViewPorRick Anderson|28 De agosto de 2012En esta
seccin, podr examinar los mtodos de accin generados y vistas para
el controlador de la pelcula.Entonces aades una pgina de bsqueda
personalizada.Ejecute la aplicacin y busque el controlador
deMoviesaadiendo/Moviesa la URL en la barra de direcciones del
navegador.Mantenga el puntero del ratn sobre un enlaceEditarpara
ver la direccin URL que enlaza con.
El enlaceEditarfue generado por el mtodo deHtml.ActionLinken la
vista deViews\Movies\Index.cshtml:@Html.ActionLink("Edit", "Edit",
new { id=item.ID })
El objetoHtmles un ayudante que se expone utilizando una
propiedad en la clase baseSystem.Web.Mvc.WebViewPage.El
mtodoActionLinkde la ayudante facilita generar dinmicamente
hipervnculos HTML que vinculan a los mtodos de accin en los
controladores.El primer argumento al mtodoActionLinkes el enlace de
texto para representar (por ejemplo,Edit Me).El segundo argumento
es el nombre de invocar el mtodo de accin.El argumento final es
unobjeto Annimoque genera los datos de la ruta (en este caso, el ID
de 4).El vnculo generado que se muestra en la imagen anterior
eshttp://localhost:xxxxx/Movies/Edit/4.La ruta por defecto
(establecida enApp_Start\RouteConfig.cs) toma el patrn de
URL{controller}/{action}/{id}.Por lo tanto, ASP.NET se traduce
ahttp://localhost:xxxxx/Movies/Edit/4en una solicitud para el mtodo
de accinEditdel controlador deMoviescon el parmetroIDigual a
4.Examine el cdigo siguiente en el
archivoApp_Start\RouteConfig.cs.public static void
RegisterRoutes(RouteCollection routes){
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute( name: "Default", url:
"{controller}/{action}/{id}", defaults: new { controller = "Home",
action = "Index", id = UrlParameter.Optional } );}Tambin puede
pasar parmetros de mtodo de accin utilizando una cadena de
consulta.Por ejemplo, la
URLhttp://localhost:xxxxx/Movies/Edit?ID=4tambin pasa el
parmetroIDde 4 para el mtodo de accinEditdel controlador
deMovies.
Abrir el controlador deMovies.Los dos mtodos de accinEditse
muestran a continuacin.//// GET: /Movies/Edit/5
public ActionResult Edit(int id = 0){ Movie movie =
db.Movies.Find(id); if (movie == null) { return HttpNotFound(); }
return View(movie);}
//// POST: /Movies/Edit/5
[HttpPost]public ActionResult Edit(Movie movie){ if
(ModelState.IsValid) { db.Entry(movie).State =
EntityState.Modified; db.SaveChanges(); return
RedirectToAction("Index"); } return View(movie);}Aviso el segundo
mtodo de accinEdites precedido por el atributoHttpPost.Este
atributo especifica que la sobrecarga del mtodoEditpuede ser
invocado slo para solicitudes POST.Se podra aplicar el
atributoHttpGetpara el primer mtodo de edicin, pero que no es
necesario porque es el valor por defecto.(Nos referiremos a los
mtodos de accin que implcitamente se asignaron el
atributoHttpGetcomoHttpGetmtodos).El mtodo deEditHttpGettoma el
parmetro ID de pelcula, levanta la pelcula usando el mtodo de
Entity FrameworkFindy devuelve la pelcula seleccionada a la vista
de edicin.El parmetro ID especifica unvalor predeterminadode cero
si se llama al mtodoEditsin un parmetro.Si no se encuentra una
pelcula, se devuelveHttpNotFound.Cuando el sistema de andamios crea
la vista Edit, examin la clase deMoviey crea cdigo para representar
elementosypara cada propiedad de la clase.En el ejemplo siguiente
se muestra la vista Edit generado:@model MvcMovie.Models.Movie
@{ ViewBag.Title = "Edit";}
Edit
@using (Html.BeginForm()) { @Html.ValidationSummary(true)
Movie
@Html.HiddenFor(model => model.ID)
@Html.LabelFor(model => model.Title) @Html.EditorFor(model
=> model.Title) @Html.ValidationMessageFor(model =>
model.Title)
@Html.LabelFor(model => model.ReleaseDate)
@Html.EditorFor(model => model.ReleaseDate)
@Html.ValidationMessageFor(model => model.ReleaseDate)
@Html.LabelFor(model => model.Genre) @Html.EditorFor(model
=> model.Genre) @Html.ValidationMessageFor(model =>
model.Genre)
@Html.LabelFor(model => model.Price) @Html.EditorFor(model
=> model.Price) @Html.ValidationMessageFor(model =>
model.Price)
}
@Html.ActionLink("Back to List", "Index")
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")}Observe cmo la plantilla de
vista tiene una declaracin de@model MvcMovie.Models.Movieen la
parte superior del archivo, especifica que la vista espera que el
modelo de la plantilla de vista de tipoMovie.El cdigo escalonado
utiliza variosmtodos auxiliarespara optimizar el cdigo HTML.El
ayudante deHtml.LabelFormuestra el nombre del campo ("Title",
"ReleaseDate", "Gnero" o "Precio").El ayudante
deHtml.EditorForrepresenta un elemento HTML.El ayudante
deHtml.ValidationMessageFormuestra los mensajes de validacin
asociados con esa propiedad.Ejecute la aplicacin y vaya a la
URL/Movies.Haga clic en un enlace deEditar.En el navegador, ver el
origen de la pgina.A continuacin se muestra el cdigo HTML del
elemento de formulario. Movie
Title
ReleaseDate
Genre
Price
Los elementosse encuentran en un elemento HTML decuyo atributo
deactionse establece a la URL/Movies/Edit.Los datos del formulario
se registrar en el servidor cuando se hace clic en el
botnEditar.Procesar la peticin POSTEl listado siguiente muestran la
versinHttpPostdel mtodo de accinEdit.[HttpPost] public ActionResult
Edit(Movie movie) { if (ModelState.IsValid) { db.Entry(movie).State
= EntityState.Modified; db.SaveChanges(); return
RedirectToAction("Index"); } return View(movie); }Lacarpeta del
modelo ASP.NET MVCtoma los valores de forma publicada y crea un
objeto deMovieque se pasa como parmetro delmovie.El
mtodoModelState.IsValidverifica que los datos presentados en forma
pueden usarse para modificar (edicin o actualizacin) un objeto
deMovie.Si los datos son vlidos, los datos de la pelcula se
guardarn en la coleccin deMoviesde ladb(MovieDBContextinstance).Los
nuevos datos de la pelcula se guardan en la base de datos llamando
al mtodoSaveChangesdeMovieDBContext.Despus de guardar los datos, el
cdigo redirige al usuario al mtodo de accin delIndexde la
claseMoviesController, que muestra la de coleccin de pelculas,
incluyendo los cambios que acaba de hacer.Si los valores publicados
no vlidos, ellos se volvern a Mostrar en el formulario.Los
ayudantes deHtml.ValidationMessageForen la plantilla de vista
deEdit.cshtmlcuidar de Mostrar mensajes de error apropiado.
Notapara apoyar la validacin de jQuery para no-Ingls locales que
usan una coma (",") para un punto decimal, debe incluir
laglobalize.jsy su archivo
especficocultures/globalize.cultures.js(dehttps://github.com/jquery/globalize)
y JavaScript para utilizarGlobalize.parseFloat.El cdigo siguiente
muestra las modificaciones en el archivo Views\Movies\Edit.cshtml
para trabajar con la cultura "fr-FR":@section Scripts {
@Scripts.Render("~/bundles/jqueryval") $.validator.methods.number =
function (value, element) { return this.optional(element) ||
!isNaN(Globalize.parseFloat(value)); } $(document).ready(function
() { Globalize.culture('fr-FR'); });
jQuery.extend(jQuery.validator.methods, { range: function (value,
element, param) { //Use the Globalization plugin to parse the value
var val = $.global.parseFloat(value); return this.optional(element)
|| ( val >= param[0] && val
