ASP

ASP.
NET MVC3 Razor Con jQuery para

principiantes
Tabla de contenidos
Introduccin
Fondo
Utilizando el cdigo
1. MVC Estructura del proyecto
2. Modelo
3. Ver
4. Controlador
5. jQuery
Creacin de su primera aplicacin MVC
1. Lista / Pgina principal
2. Detalles de la pgina
3. Editar pgina
4. Crear una pgina
5. Eliminar funcionalidad
6. Buscar
7. Validacin
Temas avanzados
1. Enrutamiento
2. reas
3. Ver bolsa
4. Las plantillas personalizadas ver
5. Mtodos de extensin
6. Mtodos auxiliares
Conclusin

Introduccin
En este artculo encontrars la manera ms simple de crear tu primera aplicacin ASP.NET
MVC. Este es un tutorial para principiantes absolutos a ASP.NET MVC. El nico requisito para
seguir este tutorial es que usted sabe cmo utilizar Visual Studio y entender HTML y sintaxis de
C #. Adems, yo te mostrar brevemente cmo se puede utilizar un poco de jQuery plug-ins
por lo que sera de gran ayuda si usted sabe algo de sintaxis jQuery. Si usted no est
familiarizado con jQuery, no es un problema, usted puede saltarse las partes, ya que son
mejoras opcionales.
Fondo
Qu es el MVC (Model-View-Controller)? MVC es una arquitectura simple donde todos los
componentes se separan en tres clases:
1. Modelo - Las clases que contienen datos que se mostrarn al usuario.
2. Ver - Componentes que mostrar el modelo para el usuario.
3. Controller - Componentes que se encargar de cualquier interaccin con el usuario.
En el marco web, el usuario introduzca un URL a la aplicacin ASP.NET MVC, y el controlador, el
modelo y la vista se encargar de esta solicitud y volver a dejar el cdigo HTML para el
usuario. La interaccin entre el navegador y el servidor que tiene modelo, vista y controlador
de componentes se muestra en la siguiente figura:

Este escenario sencillo de procesar una solicitud de MVC se describe en los pasos siguientes:
1. El usuario entra en el navegador de algunas URL que se enva al servidor, por
ejemplo, http://localhost/Product/List .
2. La peticin del usuario es analizada por el marco con el fin de determinar qu controlador
debe ser llamado.
3. El controlador toma los parmetros que el usuario ha enviado, llama al modelo para obtener
algunos datos, y carga el modelo de objetos que se debe mostrar.
4. El controlador pasa el objeto de modelo a la vista.
5. La vista obtiene los datos del modelo, lo pone en la plantilla HTML y enva la respuesta de
vuelta al navegador del usuario.
6. El navegador muestra la pgina HTML que se recibe desde el servidor.
En este ejemplo, voy a mostrar cmo se puede crear una sencilla aplicacin que le permite
listar y gestionar los datos de los usuarios que utilizan ASP.NET MVC utilizando la sintaxis
Razor.
En primer lugar, cul es la maquinilla de afeitar? Cuando se crea un componente de vista que
se traduce en C # los objetos de datos a la vista HTML, puede utilizar la sintaxis de plantilla
varios. Razor es una sintaxis agradable y limpio para la combinacin de C # y el cdigo
HTML. En el siguiente listado, se puede ver un ejemplo sencillo de la sintaxis de Razor:
@ {
string name = "Jovan";
var = new {DateOfBirth da = 8, Mes = 12, Ao = 1980};
string [] = new habilidades string [] {"MVC", "C #", "JQuery", "ASP.NET"};
}

< h2 > @ name < / h2 >
< p > Nacido en el ao: @ dateOfBirth.Year < / p >
< ul >
@ Foreach (destreza en habilidades) {
< li > destreza < / li >
}
< / ul >
En la primera parte, he definido algunas variables de C #, y luego me los han inyectado en el
cdigo HTML. La salida HTML resultante se muestra en el siguiente listado:
Collapse |
< p > Nacido en el ao: 1980 < / p >
< ul >
< li > MVC < / li >
< li > C # < / li >
< li > JQuery < / li >
< li > ASP.NET < / li >
< / ul >
Como se puede ver, el cdigo C # se descarta y slo los valores de cdigo que se inyectar en
la plantilla HTML. Poniendo C # datos en HTML con sintaxis Razor es fcil - slo hay que poner
el nombre de la variable de C # con el prefijo @. Esto funciona tanto con los tipos simples y los
campos de los objetos. Incluso si usted tiene un procesamiento ms complejo como la salida
de la lista de elementos con algn lazo, la sintaxis es muy limpio.
Si usted no est familiarizado con la maquinilla de afeitar, se puede ver una referencia rpida
aqu o una referencia completa en el sitio de ASP.NET MVC .
Tenga en cuenta que en este ejemplo, C # de datos se define directamente en la vista.Sin
embargo, en el cdigo real, datos C # vendr del modelo que es proporcionado por el
controlador (vase la figura anterior).
Utilizando el cdigo
Para comenzar con este cdigo, usted tendr que tener Visual Studio o al menos Desarrollador
Web. Si no lo tiene, puede instalarlo desde el ASP.NET MVC sitio. All usted puede encontrar
todos los requisitos necesarios para la instalacin del framework MVC.
Una vez que instale Web Developer, la creacin de una aplicacin MVC es fcil. Slo tienes que
ir a Archivo / Nuevo proyecto, seleccione ASP.NET MVC aplicacin Web y el asistente le guiar
a travs del proceso de configuracin.

Aqu se debe poner el nombre de su proyecto y determinar donde ser colocado.Puede utilizar
la configuracin predeterminada, si quieres. En las secciones siguientes se explica la estructura
y los elementos del proyecto creado MVC.
MVC Estructura del proyecto
Al crear la aplicacin web MVC, se organiza en las siguientes carpetas:
Modelo que contiene las clases del modelo.
Controlador de donde se colocan las clases denominadas como Controlador <CONTROLLER-
NAME>. Estas clases contienen el mtodo de accin que se llama cuando una peticin HTTP se
enva.
Visitas - En esta carpeta se colocan los archivos de plantillas que se utilizarn para generar
HTML como respuesta. Las opiniones estn divididas en subcarpetas. Cada controlador tiene su
propia subcarpeta llamada de la misma manera como el controlador de puntos de vista donde
el controlador se coloca.
Archivos CSS y las imgenes se colocarn en el contenido de carpetas.
Archivos JavaScript se colocarn en las secuencias de comandos de carpetas.
Un ejemplo de ese tipo de estructura se muestra en la figura siguiente:

En esta figura, se puede ver todos los componentes descritos anteriormente. Tenemos dos
controladores de usuario y la escuela y sus puntos de vista en las Vistas / / Escuela y/ Views /
Usuario carpetas. Las vistas que se colocan en los / Views / Shared carpetas se comparten entre
todos los controladores y vistas. Tenga en cuenta que las opiniones de tener una .
cshtml extensin de archivo. Esto significa que estn utilizando la sintaxis de Razor para las
plantillas de vista (esta sintaxis se utiliza en este tutorial).
Modelo
Modelo puede ser cualquier clase que define una estructura de datos que se muestra al
usuario. Puede ser una simple clase de C #, un modelo de Entity Framework generada a partir
de una base de datos, incluso un conjunto de datos (aunque no se recomienda su uso en
MVC). En este ejemplo, voy a utilizar una lista simple de los objetos como una simulacin del
repositorio de datos. Los ejemplos de este artculo se mostrar una tabla de usuarios de la lista,
mostrar / editar los detalles de un objeto de usuario de la lista, y le permiten aadir / eliminar
usuarios de la lista. La clase de modelo utilizado en la aplicacin se muestra en el siguiente
listado:
Collapse | Copy Code
public partial class User
{
public int UserID { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string Town { get; set; }
public string County { get; set; }
public string Country { get; set; }
public string Email { get; set; }
public DateTime DoB { get; set; }
public bool IsActive { get; set; }
public string UserName { get; set; }
public string Password { get; set; }
public int Rating { get; set; }
}
Este ejemplo no utilizar el almacenamiento de datos persistentes (por ejemplo, bases de
datos). Voy a poner el usuario objeto en una lista simple y la aplicacin va a usar para
mostrar los datos de los usuarios. Un ejemplo de ese tipo de "depsito" se muestra en el
siguiente ejemplo:
Collapse | Copy Code
public class UserRepository
{
public static List<User> Users = new List<User>();
}

Aunque no voy a explicar las tcnicas avanzadas de acceso de datos, utilizar algunos simples
consultas LINQ para encontrar los datos de usuario de la lista. El siguiente listado muestra las
consultas LINQ que encuentran los usuarios:
Collapse | Copiar cdigo
var user = userList.First (x => x.UserID == id);
var = bestUsers userList.Where (x => x.Rating> 8 );
La primera lnea de cdigo busca el primer objeto de la lista de usuarios que tiene la
propiedad UserID igual a la variable de identificacin (por ejemplo, encuentra un usuario por
ID). La segunda lnea encuentra todos los usuarios con nominal mayor que 8.
El parmetro de forma => expresin es una funcin en lnea (expresin lambda) que se utiliza
para definir el criterio para encontrar usuarios de la lista. Es simplemente una versin ms corta
de la funcin en lnea que se vera as:
funcin (parmetros) { retorno de expresin;}
Puede encontrar ms informacin acerca de las consultas LINQ en el uso de LINQ
Consultas artculo.
Ver
Ver es un fichero plano que define una plantilla que se utilizar para mostrar el modelo de
datos. En el caso ms simple, se puede imaginar Ver como cdigo HTML plano donde se
colocan las posiciones donde se inyectan las propiedades del modelo. Un ejemplo de ese tipo
de visualizacin se muestra en el siguiente listado:
<fieldset>
<legend>User</legend>
<div class="display-label">Name</div>
<div class="display-field">@Model.Name</div>
<div class="display-label">Address</div>
<div class="display-field">@Model.Address</div>
</fieldset>
En este Ciew se define una estructura HTML que se mostrar al usuario, y los lugares en los
datos del modelo se colocar. El ejemplo inyectar el Modelo Nombre y
Direccin propiedades en el cdigo HTML. La sintaxis @ Model. << >>
PropertyName define un lugar donde se realizar la propiedad Model colocado en la vista. Si
tiene valores "Jane Smith" para el nombre y el "Regent Street 12, London" para la direccin, el
resultado HTML siguiente se genera:
< fieldset >
< legend > Usuario < / legend >
< div clase = " display-label " > Nombre < / div >
< div clase = " display-field " > Jane Smith < / div >
< div clase = " display etiqueta " > Direccin < / div >
< div clase = " display-field " > Regent Street 12, London < / div >
< / fieldset >
Al generar elementos complejos tales como la forma ENTRADA , TEXTAREA , etc, se puede
utilizar el mismo enfoque que el del ejemplo anterior. Usted puede colocar el cdigo HTML
para ENTRADA e inyectar una cierta caracterstica del modelo directamente en el valor del
atributo. Un ejemplo se muestra en el siguiente listado:
< input nombre = " direccin " id = " direccin " valor = " @ Model.Address " clase
= " tamao medio " / >
Sin embargo, en lugar de HTML plano, puede utilizar una serie de mtodos integrados de
extensin de la clase HTML.
@ Html.TextBox ("direccin", Model.Address)
@ Html.TextBoxFor (model => model.Address)
El primer parmetro es el nombre / ID de la caja de texto, y el segundo parmetro especifica el
valor que debera tener. Este mtodo auxiliar se observa una ENTRADAetiqueta y el type =
"text" atributo. En el segundo ejemplo se utiliza laTextBoxFor mtodo en el que se hace
pasar una expresin lambda que especifique la Direccin de propiedad. En este caso no es
necesario especificar explcitamente el nombre / id del campo de entrada - el mtodo de ayuda
se tarda desde el nombre de la propiedad. Hay otros mtodos auxiliares que pueden ser
utilizados para generar otros elementos de formulario:
Html.DropDownListFor ()
Html.CheckboxFor ()
Html.RadioButtonFor ()
Html.ListBoxFor ()
Html.PasswordFor ()
Html.HiddenFor ()
Html.LabelFor ()
Tambin puede aadir sus propios mtodos que hacen parte de su cdigo HTML
personalizado como Html.Table () , Html.Calendar () , etc Usted puede consultar ms
detalles en Creacin de ayudantes personalizadas en el sitio de MVC.Tambin puede generar
HTML sin especificar el tipo utilizando los Html.DisplayFory Html.EditorFor mtodos. Un
ejemplo se muestra en el siguiente listado:
@ Html.DisplayFor (model => model.Address)
@ Html.EditorFor (model => model.Address)
En estos mtodos, que no ha especificado el tipo de entrada en absoluto, ya que se determina
basndose en el tipo de la propiedad que debe ser mostrado. Como ejemplo, si el tipo de la
propiedad es una cadena, EditorFor va a generar la entrada de texto. Un ejemplo ms
interesante es cuando se pasa un objeto a EditorFor . Por defecto, el EditorFor mtodo
generar una ENTRADA elemento para cada propiedad del objeto en funcin del tipo (por
ejemplo, la introduccin de texto para la cadena, casilla de verificacin para boolean,
etc.) DisplayFor har lo mismo, excepto que har que no editable marcado. Puede encontrar
ms detalles sobre las plantillas de pantalla aqu . Sin embargo, el verdadero poder de estos
mtodos se puede ver cuando se crea plantillas personalizadas para distintos tipos de
objetos. Este es un tema ms avanzado, pero si usted est interesado en esto, puedes ver este
artculopara ms detalles.
Ahora, de vuelta a lo bsico - cmo agregar una nueva vista? En la estructura de la carpeta
anterior, se puede ver el Vistas de carpeta y las subcarpetas llamadas del
usuario , Escuela , compartido , etc Slo tienes que hacer clic derecho sobre la carpeta en la que
desea colocar la Vista, vaya a Agregar nueva vista, y el siguiente cuadro de dilogo se mostrar
a usted:

Aqu puede introducir el nombre de la vista (por lo general es el mismo que el nombre de la
accin del controlador) y el tipo del objeto modelo que se mostrar. Adems, se puede aadir
una vista de vaco y empezar a programar, o puede seleccionar alguna de las plantillas
predefinidas para la lista, detalles, editar, crear o borrar.
Usted puede imaginar Vistas como pginas separadas que se mostrarn al usuario. Sin
embargo, existen algunos otros tipos de vistas (descrito a continuacin).
Layout
Cuando se crea un conjunto de pginas, probablemente tendr que utilizar los mismos
elementos que en muchas pginas. A modo de ejemplo, todas las pginas tienen el mismo
men, el mismo CSS / JavaScript, etc archivos incluidos en ASP.NET MVC, no es necesario
copiar los mismos elementos en cada pgina. Puede utilizar las pginas de diseo llamadas
donde una disposicin general de toda la aplicacin MVC definidos y utilizados en todas las
pginas vistas. Un ejemplo de una pgina de diseo que se utilizar en este proyecto se
muestra en el siguiente listado:
< ! DOCTYPE html >
< html >
< cabeza >
< meta charset = " utf-8 " / >
< ttulo > Este es un ttulo de la

@ RenderSection ("PageScripts", false)
< / cabeza >

< cuerpo >
@ RenderBody ()
< / cuerpo >
< / html >
Como se puede ver, en la pgina de diseo, he incluido todos los necesarios CSS / JavaScript
archivos que se utilizarn en todas las pginas. Tambin, he definido dos marcadores
personalizados donde cada vista se pondrn contenido especfico. Estos dos marcadores de
posicin son los siguientes:
1. Seccin PageScripts - donde cada pgina ser capaz de poner un poco de JavaScript o
archivos CSS que se requiere slo en esa pgina.
2. RenderBody sentencia que define donde el contenido de un punto de vista particular se
inyecta en la disposicin general.
Vistas parciales
Otra forma de organizar y reutilizar el cdigo de vista es poner elementos que se utilizan en
varios Ciews en archivos separados. Estas no son las Vistas independientes que se muestran al
usuario - son vistas parciales que se incluyen en otras pginas de vista principal.
Vistas parciales son plantillas HTML como Vviews regulares. Un ejemplo de una vista parcial
que muestra la fecha actual se muestra en el siguiente listado:
_CurrentDateView.cshtml
< div clase = " ahora " > is@DateTime.Now.ToString fecha actual () < / div >
Siempre que es necesario incluir este punto de vista parcial, slo se puede llamar por su
nombre, como se muestra en el siguiente ejemplo:
@ Html.Partial ("_CurrentDateView")
En el lugar de la llamada, el contenido completo de la vista se incluirn. Usted puede poner
esta declaracin en las vistas estndar, pginas de diseo, e incluso en otros puntos de vista
parciales.
Controlador
Controller es el corazn de la lgica de procesamiento en el modelo MVC. Cuando una URL se
enva a una aplicacin de Internet en el formato / Controller << >> / << >> Accin / << >>
parmetros (por ejemplo, / User/Details/1 ), se analiza y se denomina clase < <Controller>>
Controller (por ejemplo, UserController ) se encuentra, el mtodo << >> Accin en
que el controlador ser llamado (por ejemplo, el mtodo de detalles en la direccin de
arriba), y el parmetro se pasar a ese mtodo. El controlador realiza todo el procesamiento
necesario - ser encontrar un modelo y pasarlo a la vista.
El controlador puede tener cualquier mtodo pblico con parmetros arbitrarios que se
pasar. Como ejemplo, el siguiente listado muestra el controlador
llamadoExampleController con un mtodo ControllerAction que recibe tres parmetros
- id, nombre y bandera.
pblico ExampleController
{
pblico ActionResult ControllerAction ( int id, string nombre, int flag)
{
var = modelo getModel (id, nombre, bandera);
retorno View (modelo);
}
}
Usted puede llamar a la accin de este controlador, usando la siguiente URL:
/ Ejemplo / ControllerAction? Id = 17 & name = prueba & flag = true
Esta es la asignacin predeterminada entre las rutas de URL y el controlador / acciones donde
la primera palabra de la URL representa un nombre de controlador, y el segundo es el nombre
del mtodo de accin. Sin embargo, se puede modificar y aadir sus propias reglas de
asignacin de enrutamiento. Puede ver ms detalles sobre el enrutamiento personalizado en
la creacin de rutas personalizadas artculo.
El Contralor asignar automticamente los parmetros de la solicitud a los argumentos del
mtodo por su nombre. Esto es til si usted tiene un formulario con muchos parmetros que se
pueden leer de forma automtica a partir de la solicitud y el usuario en el cuerpo mtodo de
accin.
Cmo se puede agregar un nuevo controlador? Es similar a la adicin de nuevos puntos de
vista - ir a la carpeta del controlador, haga clic derecho, y aadir un nuevo controlador. El
siguiente cuadro de dilogo aparecer:

Aqu puede introducir el nombre del controlador - tenga en cuenta que debe estar en el
formato de controlador << >> Nombre . Adems, puede elegir una de las plantillas
predefinidas - Controlador de vaco, el controlador con la lista, detalles, editar, crear y eliminar
acciones y controlador que ya est conectado a la base de datos a travs de Entity
Framework. En este ejemplo, he empezado con un controlador de vaco. Una vez que se crea
un controlador de vaco, puede agregar mtodos de accin en el siguiente formato:
public MyController{
[Get]
public ActionResult MyAction()
{
return View();
}
}
El mtodo de accin debera devolver una vista que mostrar el cdigo HTML en el navegador
( ActionResult tipo en el ejemplo anterior). Por defecto, si se agrega el MyAction mtodo
en el myController clase, ser llamado cuando el / Mi / MyAction URL se enva. Puede
cambiar este comportamiento, pero no se describe en este artculo nivel principiante. Adems,
es posible notar la [Get] atributo que se coloca antes del procedimiento. Este atributo indica
la accin que se debe reaccionar slo a un protocolo HTTP GET. Como alternativa, podra
establecer [Post] en lugar de [Get] o poda dejarlo en blanco para que la accin se inaugur
el GET y POST protocolos.
Tambin, usted debe haber notado que la ltima sentencia de la accin es vista return
() . Si una accin MyAction se coloca en myController , esta afirmacin se encuentra
el MyAction.cshtml Ver en el Mi carpeta en la seccin Ciews. Esta es la regla por defecto para el
retorno de las vistas en los mtodos de accin. Si no desea utilizar esta vista predeterminada,
puede elegir qu vista debe ser devuelto al especificar el nombre de la vista, por ejemplo,
volver Ver (nombre);
Tenga en cuenta que usted tiene una manera fcil de ir a la vista, o para aadir una vista de
una accin en particular. Simplemente haga clic en la accin y ver un men contextual que le
permitir aadir una vista para esta accin. Aada a la accin abrir la opcin "Agregar View"
de dilogo como en la seccin anterior. Si una vista con el mismo nombre que una accin ya
existente: "Ve a ver", se abrir la pgina de vista.

jQuery
Aunque no es parte directa de MVC, jQuery es una biblioteca de JavaScript muy til que puede
permitirle mejorar su interfaz de usuario. La primera cosa til que ser capaz de hacer es fcil
encontrar elementos HTML en el cdigo HTML. Algunos de los ms simples consultas se
muestran en la siguiente tabla:
jQuery selector Descripcin
$ ("Table")
Buscar todos los nodos de la tabla en
el cdigo HTML
$ ("# Name")
Buscar elementos en el cdigo HTML
con el ID Nombre
$ (". Requerido")
Encuentra todos los elementos en el
cdigo HTML que han clase CSS
jQuery selector Descripcin
"necesarias "
$ ("Table a.delete")
En cualquier mesa, encontrar
todos Aetiquetas que tienen clase CSS
" delete"
$ ("Table tr: odd")
Buscar todas las filas impares de la
tabla
Una vez que encuentre los elementos con los selectores de jQuery, puede ocultarlas, cambiar
su color, caractersticas (clases, valores, texto interior), aadir algunos controladores de eventos
para ellos (clic, doble clic), etc Un ejemplo del cdigo que se adjunta un clic controlador para el
enlace se muestra en el siguiente listado:
$('a').click(function (event) {

// prevent default action (going to the another page)
event.preventDefault()

// Do something
});
Adems, jQuery contiene un conjunto de plug-ins que le permiten mejorar sus elementos de
interfaz de usuario. Algunos ejemplos se muestran en la siguiente tabla:
Plug-in Descripcin
$ ("Input.calendar").
Datepicker ()
Aadir selector de fechas (calendario) de dilogo en cada
elemento de entrada que tiene clase CSS " calendario"
$ ("Form"). Validate () Agregar validacin de JavaScript en la forma
$ ("Mesa"). DataTable ()
Aadir clasificacin JavaScript paginacin y filtrado en la
tabla
Puede ajustar con ms detalles y tutoriales sobre jQuery en la documentacin de
jQuery sitio. Tambin hay un interesante artculo "jQuery para principiantes" donde se pueden
encontrar algunos ejemplos interesantes. Esto es opcional, pero muy fcil y til aadir en la
aplicacin MVC. Tenga en cuenta que cuando se crea una aplicacin MVC, jQuery se incluir
automticamente en el proyecto. Sin embargo, los plug-ins no son parte del ncleo de
jQuery que se incluye en el proyecto de MVC por lo que tendr que encontrarlos y
ponerlos en su proyecto de forma manual .
Cmo puede utilizar el cdigo JavaScript? En primer lugar, tendr que incluir la librera jQuery
desde la pgina de descarga de jQuery . En el proyecto de MVC, usted probablemente
encontrar esta biblioteca incluida en el scripts de la carpeta por lo que slo puede agregar una
referencia a este script en la pgina de diseo. Entonces usted ser capaz de utilizar esta
biblioteca - un ejemplo se muestra en el siguiente listado:
<Script src = " / Scripts/jquery-1.7.1.min.js " type = " text / javascript " > </
escritura >
< script de tipo = " text / javascript " >
$ (Document). Ready (function () {
$ ( " table " ) fadeout (. " lento " );
}
</ Script>
En este ejemplo, he incluido la versin de jQuery 1.7.1. y se aade un efecto de fade out en
el cuadro elemento. Tenga en cuenta que esta declaracin se coloca en la envoltura
documento listo. El uso de este envoltorio, cualquier cdigo JavaScript dentro de ella ser
llamada cuando un documento completo est cargado y listo para ser procesado. Esta es una
prctica comn en la programacin jQuery. Aqu he aadido el cdigo jQuery como una
secuencia de comandos en lnea, pero se puede poner en un archivo separado.
Creacin de su primera aplicacin MVC
En esta seccin, voy a mostrar cmo se puede crear una sencilla aplicacin de MVC que las
listas, edita, crea y borra usuarios.
Lista / Pgina principal
En la pgina de la lista se mostrar una tabla con una lista de usuarios en el repositorio. La
pgina se abrir cuando el / usuario / Inicio URL se llama. Por lo tanto, tendra que crear
un ndice de mtodo y lo coloca en el UserController clase. Un ejemplo
del ndice mtodo se muestra en el siguiente listado:
pblico ActionResult Index ()
{
var = modelo UserRepository.Users;
regreso Vista (modelo);
}
Este mtodo es bastante simple. Toma una lista de usuarios del repositorio y lo pasa a la
Vista. La vista de lista aprovecha esta lista y se muestra una tabla como se muestra en el
siguiente listado:
< tabla de clase = " display " >
< thead >
< tr >
< th >
Nombre
< / th >
< th >
Direccin
< / th >
< th >
Ciudad
< / th >
< th >
Condado
< / th >
< th >
Clasificacin
< / th >
< th > < / th >
< / tr >
< / thead >
< tbody >

@ Foreach (var elemento en el modelo) {
< tr >
< td >
@ Item.Name
< / td >
< td >
@ Item.Address
< / td >
< td >
@ Item.Town
< / td >
< td >
@ Item.County
< / td >
< td >
@ Item.Rating
</td>
<td>
<a href="/User/Details/@item.UserID">Details</a> |
<a href="/User/Edit/@item.UserID">Edit</a> |
<a href="/User/Delete/@item.UserID" class="delete">Delete</a>
</td>
</tr>
}
< / tbody >
< / tabla >
Como se puede ver, esta vista de la lista ha tomado una coleccin de objetos de usuario y
emite como una tabla HTML en el foreach bucle. Tenga en cuenta que no es necesario crear
un wrapper HTML con la cabeza y el cuerpo etiquetas. Estos se definen en la pgina de
diseo, y esta parte del cdigo HTML se acabe de inyectar en el medio de la pgina
(el RenderBody declaracin en el diseo de pgina anterior).Un ejemplo de la pgina de la
lista se muestra en la siguiente figura:

La aplicacin de las DataTables de jQuery plug-in
La tabla que has visto es slo una mesa simple, sin ninguna funcionalidad. Sin embargo, usted
puede fcilmente aumentar esta tabla con la biblioteca jQuery JavaScript para aadir algunas
caractersticas avanzadas tales como la clasificacin, paginacin, filtrado, etc En la pgina de
presentacin, se dio cuenta de que he puesto un PageScripts marcador de posicin que
permite que cada fin de poner un poco de JavaScript personalizado o CSS. En este ejemplo,
slo en la pgina de la lista, voy a aadir algo de JavaScript que mejorar esta tabla. Un
ejemplo de esta secuencia de comandos adicional se muestra en el siguiente listado:
@ PageScripts section {
<Link href = " / Content / dataTable / demo_table.css " rel = " stylesheet " type = "
text / css " />
<Script

$ ( " table " ) DataTable ().;
}
</ Script>
}
Este script ha incluido jQuery CSS y los archivos JavaScript DataTables y tablas de datos
aplicados funcionar en la tabla HTML. Como resultado de ello, se va a convertir esta tabla
sin formato a una tabla con muchas caractersticas se muestra en la siguiente figura:

No voy a explicar cmo jQuery plug-in puede ser utilizado en ms detalle, pero si ests
interesado, puedes echar un vistazo a las tablas HTML Mejora de las tablas de datos
utilizando jQuery plug-in artculo.
Detalles de la pgina
En la pgina de detalles se muestra la informacin de un usuario en particular por ID.La
peticin que se enva a la del lado del servidor es en el siguiente formato:
/ User/Details/123
En esta solicitud, se puede ver que UserController sern llamados, y que
elDetails mtodo con el parmetro 123 se ejecutar. 123 es el ID del registro que se
mostrar. Los detalles mtodo tomar el ID del usuario, busque este usuario en el
repositorio de modelos, y pasarla a la vista:
pblicas Detalles ActionResult ( int id)
{
var = modelo UserRepository.Users.First (usuario => user.UserID == id);
}
La vista es tambin simple - que recibe el usuario del modelo de objetos e inyecta
propiedades de usuario en la vista. Parte de la vista se muestra en el siguiente listado:
@ Modelo JQueryMVC.Models.User

< h2 > Usuario

@ Model.Name
< / div >
< div clase = " display-label " > Direccin < / div >
< div clase = " display-field " >
@ Model.Address
< / div >
< div clase = " display-label " > Ciudad < / div >
@ Model.Town
< / div >
< div clase = " display-label " > Condado < / div >
@ Model.County
< / div >
< / fieldset >
Usted puede notar que la mayor parte de la pgina es simple HTML - slo hemos colocado
Caractersticas del modelo en algunas partes del cdigo HTML. Como resultado, el usuario
siguiente pgina de detalles se muestra a continuacin:

Tenga en cuenta que en el listado superior he colocado slo una parte de la vista.Puede
encontrar la lista completa en el cdigo fuente adjunto.
Editar pgina
La pgina de edicin es muy similar a la pgina de detalles. El Contralor recibir el mismo
parmetro (ID), encuentra un objeto con dicho ID, y pasarlo a la vista.
pblico ActionResult Editar ( int id)
{
}
La vista es similar a la vista de detalles, excepto que en lugar del DIV elemento para mostrar las
etiquetas de friccin y aqu estamos utilizando un elemento input HTML. En la lista siguiente se
muestra parte de la vista edit:
< formulario mtodo = " post " accin = " / usuario / Editar / @ Model.UserID " >

@ Html.ValidationSummary (true)
<fieldset>
<legend>User</legend>
<input type="hidden" name="UserID" id="UserID" value="@Model.UserID" />
<div class="editor-label">
<label for="Name">Name</label>
</div>
<div class="editor-field">
<input type="text" name="Name" id="Name" value="@Model.Name" />
@ Html.ValidationMessageFor (model => model.Name)
< / div >

<label for="Email">Email</label>
</div>
<input type="text" name="Email"
id="Email" value="@Model.Email" />
@ Html.ValidationMessageFor (model => model.Email)
< / div >
< div clase = " editor de etiqueta " >
< etiqueta para = " Fecha de nacimiento " > Fecha de

@ Html.ValidationMessageFor (model => model.DoB)
< / div >
< etiqueta para = " IsActive " > Es

@ Html.ValidationMessageFor (model => model.IsActive)
< / div >
< etiqueta para = " Nombre de usuario " > Usuario

@ Html.ValidationMessageFor (model => model.UserName)
</div>
<label for="Password">Password</label>
</div>
<input type="password" name="Password"
id="Password" value="@Model.Password" />
@ Html.ValidationMessageFor (model => model.Password)
< / div >
< p >
< input tipo = " submit " valor = " Guardar " / >
< / p >
< / fieldset >
< / formulario >
Tambin hay unos pocos elementos de validacin realizados despus de las entradas - stos se
describir ms adelante. La pgina de edicin se muestra en la siguiente figura:

Hemos visto la accin que dice un usuario de la lista y lo pasa a la vista, pero tambin
necesitaramos una accin que se encargar de las solicitudes de actualizacin que se envan
cuando alguien actualiza los datos del usuario. La accin que se encarga de las peticiones POST
se muestra en el siguiente listado:
[HttpPost]
pblico ActionResult Editar ( int id, coleccin FormCollection)
{
intentar
{
UpdateModel (modelo);
volver RedirectToAction ( " ndice " );
}
coger
{
volver Ver (modelo);
}
}
Esta accin tiene el ID del usuario que est siendo editado y parmetros de usuario que se
introducen en el formulario HTML a travs del formulario de recogida. A continuacin, se
encuentra el usuario por ID y lo actualiza. Si todo est bien, la vista de ndices se ver, de lo
contrario si se produce un error de la misma opinin se muestra de nuevo.
Agregar el jQuery DatePicker
En este ejemplo, la fecha de nacimiento ( DOB propiedad) se introduce como texto sin
formato. En lugar de entrada de texto llano, voy a adjuntar un jQuery DatePicker a este
campo por lo que el usuario puede seleccionar una fecha del calendario emergente. Con el fin
de integrar el jQuery DatePicker , voy a poner el siguiente script personalizado en la vista de
edicin:
<Link href = " / Content / themes / base / jquery.ui.all.css " rel = " stylesheet "
type = " text / css " />
<Script src = " / Scripts/jquery-ui-1.8.11.js " type = " text / javascript " > </
escritura >
< script de tipo = " text / javascript " >
$ ( " input # Fecha de nacimiento " ) datepicker ().;
});
</ Script>
}
Esta secuencia de comandos personalizada incluir todas las medidas necesarias archivos
JavaScript y CSS (jQuery UI) y poner DatePicker en el elemento de entrada con un
ID FDN . Como resultado, el siguiente calendario se abrir cada vez que la fecha de nacimiento
es editada:

Este es otro ejemplo de cmo se puede, con unas pocas lneas de cdigo, mejorar su interfaz
de usuario.
Crear la funcionalidad
Cuando los usuarios deben crearse nuevas, una forma en blanco similar al formulario de
edicin debe ser demostrado. La direccin URL de la forma create sern:
/ Usuario / Crear
Como este formulario no contiene ningn dato, la accin create del controlador es muy simple:
/ / GET: / Usuario / Crear
pblico ActionResult Create ()
{
regresar View ();
}
Esta accin no hace nada til - cuando el usuario / / Crear la pgina se llama, simplemente
devuelve una vista vaca. Parte de la vista de la pgina Crear se muestra en el siguiente listado:
< forma de accin = " / usuario / Crear " mtodo = " post " >
@ Html.ValidationSummary (true)
< fieldset >
< legend > Usuario < / legend >
@ Html.LabelFor (model => model.Name)
< / div >
< div clase = " editor de campo " >
@ Html.EditorFor (model => model.Name)
@ Html.ValidationMessageFor (model => model.Name)
< / div >

@ Html.LabelFor (model => model.IsActive)
< / div >
@ Html.EditorFor (model => model.IsActive)
@ Html.ValidationMessageFor (model => model.IsActive)
< / div >

@ Html.LabelFor (model => model.Password)
< / div >
@ Html.EditorFor (model => model.Password)
@ Html.ValidationMessageFor (model => model.Password)
< / div >
< p >
< input tipo = " submit " valor = " Crear " / >
< / p >
< / fieldset >
< / formulario >
Esta es una forma simple que que contiene ENTRADA campos en los que se puede introducir
informacin del usuario. Tenga en cuenta que en este caso, podramos utilizar simples
elementos de entrada HTML como en el ejemplo de edicin, sin embargo, en este caso, he
utilizado el MVC LabelFor y EditorFor funciones. Como resultado de ello, la forma se
muestra el siguiente:

No hay ninguna diferencia entre la versin HTML y funciones auxiliares MVC - en ambos
sentidos generar entrada HTML estndar. Si utiliza la versin HTML simplificada, sera ms
fcil modificar el cdigo HTML, pero si utiliza un editor generar automticamente entradas de
texto o casillas de verificacin, dependiendo del tipo de la propiedad ( string , bool ,
etc). Adems, una ventaja de la EditorForfuncin es que puede manejar situaciones en las
que el modelo es nula (en modo HTML simple, usted tendr que aadir algunas condiciones
para comprobar si hay datos que se pueden mostrar). Sin embargo, en la prctica, creo que va
a utilizar dos formas, dependiendo de sus necesidades particulares. Como en el ejemplo de
edicin, necesitaramos otra accin que controla las solicitudes que se enviarn cuando la
informacin en el formulario se enva al servidor. Esta accin se muestra en el siguiente listado:
/ / POST: / Usuario / Crear
[HttpPost]
pblico ActionResult Crear (coleccin FormCollection)
{
tratar de
{
/ / TODO: agregar aqu la lgica de insercin
var = Usuario nuevo Usuario ();
UpdateModel (usuario);
UserRepository.Users.Add (usuario);
volver RedirectToAction ( " ndice " );
}
coger
{
regresar View ();
}
}
Esta accin es similar a la accin que actualiza los datos de usuario en la seccin anterior. Sin
embargo, en este caso, en lugar de buscar un usuario por ID, un objeto de usuario se crear
una nueva, actualizada con parmetros del formulario publicado, y se agrega a la lista. Si todo
est bien, el ndice se muestra, por otra parte crear vista se muestra de nuevo.
Eliminar funcionalidad
Una pgina de borrado estndar puede ser creado de la misma manera como las otras
pginas. Usted puede crear una vista de suprimir que mostrar una pgina de confirmacin
para el usuario, el usuario elimina del modelo, y luego vuelve de nuevo a la lista. Sin embargo,
en este caso, voy a mostrar cmo se puede crear una funcionalidad AJAXified que borra los
datos de usuario.
No voy a crear una vista delete separado - Voy a modificar la vista de lista que ya est creada
donde ya hemos puesto un enlace de eliminacin en cada fila de la tabla. En la vista de lista,
voy a adjuntar una llamada AJAX jQuery que elimina los datos en el lado del servidor y elimina
la fila de la tabla. La peticin que se enva a la del lado del servidor es en el siguiente formato:
/ User/Delete/123
En esta solicitud, se puede ver que UserController sern llamados, y que Deletemtodo
con el parmetro 123 se ejecutar. 123 es el ID del registro que se eliminarn.
En primer lugar, habra que conectar un controlador de eventos jQuery para el enlace de
eliminacin que se coloca en la mesa. Este cdigo no va a ser slo unas pocas lneas, por lo
que no es conveniente ponerlo directamente en la vista. Por lo tanto, este script debe ser
colocado en un archivo separado de JavaScript (por ejemplo, delete-user.js ). En
el PageScripts seccin del index.cshtml vista se debe colocar una referencia a este archivo:
<Script src = " / Scripts / delete-users.js " type = " text / javascript " > </
escritura >
}
Por qu lo estamos poniendo en un archivo separado? En primer lugar, no es una buena
prctica para mezclar HTML y JavaScript en la misma vista. Si el cdigo JavaScript es slo unas
pocas lneas de cdigo, que est muy bien, pero si usted tiene una gran cantidad de cdigo
que sera mejor para moverlo en un archivo separado.Adems, si la funcionalidad de JavaScript
se coloca en un archivo separado, puede ser almacenado en cach en el navegador ya que el
contenido de este archivo no se puede cambiar. Esta visin forma que siempre habr cambiado
significativamente menor por lo que se carga ms rpido, y el archivo de JavaScript ser
probablemente ya est disponible en la cach del navegador cuando la pgina se carga por
segunda vez.
La aplicacin efectiva de las funciones de usuario de eliminacin en el delete-user.jsarchivo se
/ / / <referencia path="jquery-1.7.1.min.js" />

$ (document). preparado ( funcin () {
$ ( " tabla a.delete " ). haga clic en ( funcin (event) {
event.preventDefault ();
var link = este ,
si (confirm ( " Seguro que desea eliminar este usuario? " )) {
$. Ajax ({
tipo: " POST " ,
url: link.href,
xito: la funcin (data) {
Padres $ (enlace) (. " tr " ) remove ().;
},
error: funcin (data) {
alerta ( " El usuario no puede borrar " );
}
});
}
}
);
});
En este ejemplo de cdigo, he adjuntado una funcin en el enlace que se coloca en la mesa,
que tiene la "eliminacin" de clase. Esta funcin se llama cuando el vnculo se hace clic en
Borrar. Lo primero que tendr que hacer es evitar que la accin del evento por defecto, ya que
la reemplazar por una costumbre llamada AJAX. Entonces, el controlador de eventos pide al
usuario que confirme que quiere eliminar la fila actual.Si lo confirma, esta funcin toma
el href atributo del enlace y crea la llamada AJAX a la pgina del lado del servidor. Si la
solicitud de eliminacin se realiza correctamente, la fila se elimina de la tabla, de lo contrario
un mensaje de error se muestra. En el lado del servidor, necesitaramos una accin de
eliminacin que se llamar cuando la peticin AJAX se enva en el gestor de errores.
Tambin tenga en cuenta la primera lnea en el archivo JavaScript que hace referencia a la
biblioteca jQuery. Esta lnea es un comentario claro y no hace nada en el navegador. Sin
embargo, si est utilizando Visual Studio / Web Developer, y si usted tiene el jquery-
1.7.1.vsdoc archivo, utilizando esta lnea se contar con el apoyo IntelliSense para
JavaScript. Cuando escriba $. ver una lista de todos los mtodos JavaScript que estn
disponibles en la biblioteca jQuery con sus descripciones (que es casi idntica a la
compatibilidad con IntelliSense para regular el cdigo de C #). Ver ms detalles acerca
JavaScript IntelliSense aqu .
La accin de un controlador que controla la solicitud de borrado se muestra en el siguiente
listado:
pblico void Delete ( int id)
{
UserRepository.Users.Remove (modelo);
}
Esta accin tiene el ID de la solicitud, encuentra un objeto del repositorio de ID, y lo elimina de
la lista. En el cdigo real, debe crear algunos DELETE cdigo SQL, o eliminar el objeto del
modelo de Entity Framework.
Buscar
La funcionalidad del pasado que se muestra aqu es la bsqueda del usuario. Esto no es una
pgina separada - I crear una vista parcial que se puede colocar en cualquier pgina. La vista
parcial se muestra en el siguiente listado:
_SearchUsers.cshtml
< formulario mtodo = " post " accin = " / user / search " >
< fieldset >
< legend > Bsqueda de usuarios < / legend >
< etiqueta para = " activo " > Es

< etiqueta para = " rating " > Minimal

Como puede ver, he creado un formulario con un botn de radio activo y un campo de texto
calificacin mnima. Usted puede ponerlo en cualquier caso utilizando la @ Html.Partial
("_SearchUsers") comunicado. Siempre que pongas esta declaracin, MVC inyectar el
siguiente formulario en la vista:

Cuando el botn de bsqueda se pulsa, los parmetros del formulario se enva alusuario / /
Busca URL, por lo tanto, se necesita un controlador que acepte los datos del formulario y
realiza una bsqueda para los usuarios. La accin de bsqueda se muestra en el siguiente
listado:
/ / POST / GET: / user / search
pblico ActionResult bsqueda ( bool activo? int rating?)
{
var = modelo UserRepository.Users.Where (usuario => user.IsActive == && activos
user.Rating> Evaluacin);
regreso Vista ( " ndice " , modelo);
}
En primer lugar se puede ver en la firma del mtodo, los argumentos de mtodo que coincide
con los elementos del formulario por su nombre. Cuando el formulario es enviado, parmetros
del formulario se colocar en estos argumentos. Esta accin busca todos los usuarios donde
el IsActive bandera es igual al valor seleccionado en el formulario y El Rating es mayor que
un valor introducido en el formulario de entrada.
Tenga en cuenta que en este caso no he creado una vista para mostrar los resultados de
bsqueda. En caso normal, yo tendra que crear una vista de bsqueda que recibirn los
usuarios que coincidan con la condicin de bsqueda y los muestra en una especie de
mesa. Sin embargo, como ya tengo ese tipo de vista (Index), voy a utilizar este.
El resultado de esta consulta (modelo) se pasa a la vista llamada Index. La vista de ndices no le
importa lo que el controlador ha llamado - slo mostrar el modelo que se proporciona. Como
resultado, ver usuarios filtrados por el criterio de bsqueda en la pgina de ndice. Se puede
ver que he utilizado vistas ("ndice", modelo) en lugar de llamar a Ver (modelo), con el fin de
evitar la accin del controlador para que coincida con vista a nombre de la accin.
Validacin
Una de las cosas ms importantes que deben aadirse a la solicitud es la validacin. A modo de
ejemplo, es necesario poner algunas reglas de validacin que comprobar si el nombre de
usuario ingresado, es la fecha de nacimiento de una fecha vlida, es la calificacin en el rango
de 0 a 10, etc Si algunas reglas de validacin no est satisfecho, error mensajes similares a los
de la figura siguiente se muestra a continuacin:

En la pgina de vista, ya se dio cuenta de que he puesto ValidationFor elementos.Un
ejemplo de marcador de posicin de validacin que se mostrar un mensaje de error cuando
se produce un error en la Dob propiedad se muestra en el siguiente listado:
< etiqueta para = " Fecha de nacimiento " > Fecha de nacimiento < / label >
< / div >
< input tipo = " text " nombre = " Dob " id = " Fecha de nacimiento " valor = " @
Model.DoB " / >
@ Html.ValidationMessageFor (model => model.DoB)
< / div >
Este cdigo se utiliza para mostrar un mensaje de validacin, pero usted tendr que aplicar
algunas reglas que comprobar si los requisitos de validacin estn satisfechos.En este artculo,
voy a mostrar tres formas de aplicar las reglas de validacin:
1. Uso de anotaciones de datos en el modelo.
2. Usar anotaciones en la clase de metadatos del modelo.
3. Uso de reglas explcitas.
Puede encontrar ms detalles sobre la validacin en la validacin de ASP.NET MVC3
Fundamentos artculo.
Uso de anotaciones de datos
La forma ms sencilla de implementar la validacin es poner atributos de anotacin en la clase
del modelo. A modo de ejemplo, voy a poner el [Obligatorio] atributo en el Nombre de la
propiedad del usuario.
pblico parcial clase de usuario
{
pblico int {UserID obtener , establecer ;}
[Obligatorio]
pblico string Name { obtener , establecer ;}
pblico string Direccin { obtener , establecer ;}
pblicas cadena Town { obtener , establecer ;}
pblicas cadena County { obtener , establecer ;}
pblicas cadena Country { obtener , establecer ;}
pblicas cadena Email { obtener ; set ;}
pblico DateTime Fecha de nacimiento { obtener , establecer ;}
pblico bool {IsActive obtener , establecer ;}
pblico string Nombre de usuario { obtener , establecer ;}
pblico string Password { obtener ; set ;}
pblico int {Rating obtener , establecer ;}
}
Si el usuario no rellena el nombre del usuario, UpdateModel una excepcin y el mensaje de
campo requerido se mostrar en la vista.
Utilizar una clase MetaData
A veces no son capaces de modificar una clase del modelo, sobre todo si se genera
automticamente. En ese caso, usted puede crear una clase MetaData de la clase del modelo,
donde se colocar reglas de validacin. Un ejemplo se muestra en el siguiente listado:
[MetadataType ( typeof (UserMetadata))]
pblico parcial clase de usuario
{
pblico de clase UserMetadata
{
[StringLength ( 50 ), Obligatorio]
pblico objeto Nombre { obtener , establecer ;}
[StringLength ( 5 )]
pblico objeto Email { obtener , establecer ;}
[Range ( 0 , 10 )]
pblico objeto Puntuacin { conseguir ; establecido ;}
}
}
En este caso, en la clase del modelo que se define UserMetaData ser la clase de metadatos
del Usuario clase en la que las reglas de validacin se colocar. En la clase de metadatos que
puede poner las propiedades con nombre del mismo modo que las propiedades del modelo y
poner anotaciones all. Esta es una manera til para implementar la validacin incluso si usted
puede modificar sus clases del modelo original, pero usted no quiere mezclar las reglas de
validacin y propiedades. El nico requisito es que la clase modelo se define como parcial para
que podamos poner la segunda parte de la clase en un archivo separado.
Validacin personalizada
La tercera opcin es poner reglas de validacin personalizadas directamente en el cdigo del
controlador. Un ejemplo de configuracin explcita de mensajes de error en el controlador se
ModelState.AddModelError ( " Pas " , " Este es el mensaje intil unido al "Pas" de
entrada " );
El mtodo AddModelError toma el ID del elemento de entrada donde se muestra la etiqueta
de error y el texto del mensaje de error. Este cdigo se coloca en el mtodo de accin del
controlador y se pone un nuevo error que se asociar a la entrada de Campo.
Temas avanzados
En esta seccin, se pueden encontrar algunos temas avanzados en el marco de MVC.Estos no
son realmente elementos de nivel principiante, pero creo que podra ser una buena gua para
anlisis adicionales.
Enrutamiento
Como ya vimos, el framework MVC URL mapea a Controller y acciones. A modo de ejemplo, si
usted tiene un enlace como http://localhost/User/Details/1 , se asigna a laUserController y
la Detalles mtodo. Esta no es una regla codificada para la proyeccin. Si abre
la Global.asax.cs archivo, es posible que vea la parte de cdigo siguiente:
pblicas estticas void RegisterRoutes (rutas RouteCollection)
{
routes.IgnoreRoute ( " {} recurso axd / {*} pathInfo. " );

routes.MapRoute (
" Default " , / / Ruta nombre
" {controller} / {action} / {id} " , / / URL con los parmetros de
nuevo {controller = " Home " , action = " ndice " , id =
UrlParameter.Optional}
/ / Parmetro por defecto
);
}
En este cdigo se define la ruta predeterminada que se utiliza para asignar un patrn de URL
para el controlador / accin. El primer smbolo {controller} determinar qu controlador se
llamar, un segundo {accin} se asignar el mtodo, y la ltima, que es opcional, se enviar
como una identificacin. Adems, aqu se especifican los valores predeterminados. Si escribe
slo http://localhost/User/ , el mtodo de ndice se llamar aunque la accin no se especifica. Si
escribe en un solo http://localhost/ , el UserController ser llamada con el valor por
defecto ndice mtodo. Si desea usar rutas diferentes, puede aadir sus reglas
personalizadas. A modo de ejemplo, voy a aadir esta regla de bsqueda de los usuarios:
pblicas estticas void RegisterRoutes (rutas RouteCollection)
{
routes.IgnoreRoute ( " {} recurso axd / {*} pathInfo. " );

routes.MapRoute (
" Buscar " , / / Ruta nombre
" Search / {palabra clave} " , / / URL con parmetros
nueva {controller = " Usuario " , action = " SearchByKeyword " ,
keyword = UrlParameter.Optional} / / Parmetro por defecto
);

routes.MapRoute (
" Default " , / / Ruta nombre
" {controller} / {action} / {id} " , / / URL con los parmetros de
nuevo {controller = " Home " , action = " ndice " , id =
UrlParameter.Optional}
/ / Parmetro por defecto
);
}
La "Bsqueda" regla tomar la direccin URL que comienza con / Buscar y llamar a
labsqueda de mtodo en el UserController . El primer token despus de bsqueda se
pasan como una palabra clave para la BsquedaPalabra mtodo. A modo de ejemplo, si
usted pone http://localhost/Search/Andersson en el navegador,UserController ser llamado
y en el mtodo de bsqueda se pasa la cadena"Andersson" . Lo nico que tienes que hacer
es agregar la accin que realizar la bsqueda - algo as como en el siguiente listado:
pblico ActionResult SearchByKeyword ( cadena de palabras clave)
{
var = modelo UserRepository.Users.Where (usuario => user.Name.Contains (palabra
clave));
regreso Vista ( " ndice " , modelo);
}
Se puede definir cualquier ruta te quiero aqu. Tenga en cuenta que este controlador se puede
llamar con una ruta por defecto tambin. A modo de ejemplo, si escribe
enhttp://localhost/User/SearchByKeyword?keyword=Andersson la misma accin ser llamado
porque se asigna con la segunda regla.
reas
En la aplicacin estndar, tiene un conjunto de controladores / vistas colocados en carpetas
raz. Sin embargo, puede crear diferentes conjuntos de controladores y vistas que se pondrn
en reas separadas. Si hace clic derecho sobre el proyecto, vaya a Agregar> rea Nueva, usted
ser capaz de crear nuevos sub-reas de la aplicacin. Las nuevas reas se colocar en
la reas carpeta con el modelo independiente, Ver y controladores, como se muestra en la
siguiente imagen:

Aqu se pueden ver dos reas de la aplicacin que se llama administracin y del sitio .Tambin,
usted tendr URL diferente para cada zona con un mecanismo de enrutamiento separada. De
forma predeterminada, los controladores de la zona estn llamados a travs de la <area> /
<Controller> / <Action> formato (por ejemplo,administrador / usuario / Index o sitio / user /
search ). Las nuevas rutas se definen en laAreaRegistration.cs archivo que se coloca en cada
rea. A modo de ejemplo, si se crea un rea de administracin, el siguiente cdigo se aadirn
en elAdminAreaRegistration.cs del archivo:
pblico override void RegisterArea (contexto AreaRegistrationContext)
{
context.MapRoute (
" admin_default " ,
" Admin / {controller} / {action} / {id} " ,
nuevo {action = " ndice " , id = UrlParameter.Optional}
);
}
Este cdigo aade una nueva regla de asignacin que enva peticiones de mapas en el rea de
los controladores de zona. Tambin puede aadir su propio mapeo de las reas aqu.
Ver bolsa
En el modo estndar de uso, el controlador pasar a una modelo a la vista (o una coleccin de
objetos). Sin embargo, a veces es posible que desee pasar varios objetos que no forman parte
del Modelo. A modo de ejemplo, es posible que desee pasar la informacin que ser colocado
como meta-tags en el ttulo (ttulo de la pgina, los meta-palabras clave y la descripcin del
meta-). Si esta informacin no est ya calculado a partir del modelo, puede ser difcil de pasar
diferentes conjuntos de objetos desde el Controlador a la Vista.
Si tiene que pasar objetos adicionales, adems del modelo, puede utilizar
el ViewBagcoleccin. ViewBag es un conjunto de propiedades dinmicas que pueden ser
enviadas a la vista. Un ejemplo de aadir propiedades adicionales en la bolsa se muestra en el
siguiente listado:
pblico ActionResult Index ()
{
ViewBag.Title = " Pgina principal " ;
ViewBag.SeoDescription = " Descripcin de la pgina " ;
ViewBag.SeoKeywords = " MVC, ASP.NET, CodeProject " ;
var = modelo UserRepository.Users;
}
En la vista, puede utilizar las propiedades de la bolsa de la opinin de la misma manera que en
objetos del modelo estndar. Un ejemplo se muestra en el siguiente listado:
<html>
<head>
<title>@ViewBag.Title</title>
<meta name="description" content="@ViewBag.SeoDescription">
<meta name="keyword" content="@ViewBag.SeoKeywords">

< / cabeza >

< cuerpo >

< / cuerpo >
< / html >
Si necesita mostrar cierta informacin de los archivos de configuracin / recurso, ellos leen de
la base de datos, o de propiedades / mtodos de otra clase, es mejor colocarlos en el
controlador y luego se pasa a la vista a travs de ViewBag .
Las plantillas personalizadas Vista
En los ejemplos anteriores, he descrito cmo se pueden utilizar los mtodos de ayuda HTML
para generar HTML en lugar de escribir cdigo HTML sin formato directamente en el cdigo, y
la inyeccin de valores del modelo. A modo de ejemplo, puede generar entradas y casillas de
verificacin para el nombre , IsActive y Contraseainmueble con el siguiente cdigo:
@ Html.EditorFor (model => model.Name)
@ Html.EditorFor (model => model.IsActive)
@ Html.EditorFor (model => model.Password)
Cuando se llama al Html.EditorFor mtodo, se comprobar cul es el tipo de la propiedad y
luego usar una plantilla para la edicin de ese tipo. Por defecto las entradas con texto tipo
utilizar el editor para cuerdas y DateTime, casilla de verificacin de bool, etc
Sin embargo, puede definir su propia pantalla y editor de plantillas personalizadas que se
aplicarn en funcin del tipo. Slo tiene que crear vistas parciales en el
formato<NombreDelTipo>. cshtml y ponerlos en los DisplayTemplates / y /
EditorTemplatessubcarpetas. Cuando el Html.DisplayFor mtodo auxiliar se utiliza, el
framework MVC a tratar de encontrar qu plantilla se debe utilizar en funcin del tipo de la
propiedad que se mostrar. Si usted tiene un juego <NombreDelTipo>. cshtml archivo en el /
DisplayTemplates carpeta, el marco usar esa plantilla para mostrar el objeto en lugar de la
predeterminada. La misma lgica se aplica a las plantillas del editor. Por ejemplo, imagine que
desea representar propiedades DateTime en la ENTRADA cuadro de texto donde se agrega la
clase " calendario ". En lugar de poner la clase "calendario "en cada ocurrencia
de entrada , puede definir una plantilla editor de tipo especfico que se utilizar. En este caso,
puede crear la DateTime.cshtml archivo en el / EditorTemplates subcarpeta y esta plantilla se
utiliza para representar el editor para cada DateTime propiedad. Un ejemplo de
la DateTime.cshtml archivo se muestra en el siguiente listado:
@ Hereda <System.DateTime> System.Web.Mvc.WebViewPage
@ Html.TextBox ( " " , (Model.ToShortDateString ()), nuevo {@ class = " calendario " })
Usted puede poner el EditorTemplates carpeta en el / Views / Shared carpetas, en los / Views /
usuario carpeta, o en ambos, como se muestra en la siguiente figura:

Si lo pones en el / Shared carpeta, Canel ser aplicado en cualquier vista de la aplicacin. Sin
embargo, si lo pones en una carpeta especfica (por ejemplo, / usuario ) se aplicar nicamente
en el dictamen de esta carpeta. Utilice las plantillas de vista personalizada si desea cambiar el
modo por defecto en el que ciertos tipos de datos se debe mostrar.
Mtodos de extensin
He mencionado anteriormente, usted tiene un montn de mtodos de ayuda en
elHtmlHelper clase que se pueden utilizar para generar cuadros de texto, casillas de
verificacin, campos de contrasea, etc Algunos ejemplos se muestran en el siguiente listado:
@ Html.TextBox ( " Nombre " , Model.Name)
@ Html.TextArea ( " Direccin " , Model.Address)
@ Html.Checkbox ( " IsActive " , Model.IsActive)
Sin embargo, si usted necesita ms tipos, se pueden aadir mediante la ampliacin
delHtmlHelper clase. Imagine que usted quiere tener un mtodo que genera un calendario
como en el ejemplo anterior (entrada con clase calendario ). Usted puede agregar la
siguiente DateTime extensin ayudante:
espacio de nombres System.Web.Mvc
{
pblico esttico clase HtmlDateTimeExtension
{
pblico esttico DateTime MvcHtmlString ( este ayudante HtmlHelper, string
nombre, string etiqueta, DateTime val)
{
volver MvcHtmlString.Create ( cadena . Format ( @ " <label for='{0}'> {1} </
label>
type='text' <input name='{0}' id='{0}' value='{2}'
class='calendar'/> " ,
nombre,
etiqueta,
val.ToShortDateString ()));
}
}
}
Lo nico que tienes que hacer es aadir un nuevo mtodo esttico que tiene como primer
argumento esta HtmlHelper ayudante, y este mtodo se aadir a
otrosHtmlHelper mtodos estticos. Otros argumentos se pueden utilizar como parmetros
del mtodo. Este mtodo debe devolver una cadena HTML que se colocar en el HTML de
salida. Ahora se puede generar la entrada DateTime directamente mediante la clase HTML,
como se muestra en el siguiente listado:
@ Html.DateTime ( " Fecha de nacimiento " , " Fecha de nacimiento " , Model.DoB);
El efecto es el mismo que en una vista personalizada excepto que tiene que llamar
explcitamente a este mtodo. Este enfoque es til si tiene que aadir algo de cdigo adicional
en el mtodo como la eleccin de diferentes plantillas en funcin de una condicin, la
comprobacin en la base de este elemento debe ser mostrado, etc
Si tiene que elegir entre una plantilla de vista personalizada y un mtodo de extensin, la
eleccin es simple. Si usted tiene un montn de cdigo C # que debe generar una salida, utilice
un mtodo de extensin, de lo contrario, si usted tiene una gran cantidad de cdigo HTML y
slo unos pocos lugares donde usted los datos del lugar, utilizar vistas personalizadas.
Mtodos auxiliares
Otra forma de organizar el cdigo en una vista es crear mtodos en lnea de ayuda.Mtodos en
lnea de ayuda son funciones simples que se definen directamente en la vista y pueden ser
llamados como una funcin estndar. Un ejemplo de una funcin auxiliar se muestra en el
siguiente listado:
@ Ayudante DateTime ( string nombre, string etiqueta, DateTime val) {

@ String.Format ( @ " <label for='{0}'> {1} </ label>
type='text' <input name='{0}' id='{0}' value='{2}' class='calendar'/> " ,
nombre,
etiqueta,
val.ToShortDateString ())

}
Una vez creada la funcin auxiliar, se puede utilizar en la vista como cualquier funcin.Un
ejemplo se muestra en el siguiente listado:
@ DateTime ( " Fecha de nacimiento " , " Fecha de nacimiento " , Model.DoB);
Las funciones de ayuda son buenas cuando se desea refactorizar cdigo que se repite en la
vista, sin embargo, si lo va a usar en varios puntos de vista, creo que es mejor usar algn
mtodo de extensin auxiliar HTML o una vista personalizada. Puede ver ms detalles sobre los
mtodos de ayuda en el puesto ScottGu .
Conclusin
En este artculo, me he mostrado los fundamentos de ASP.NET MVC3 con sintaxis
Razor. Siguiendo estas instrucciones y en el cdigo adjunto, usted ser capaz de crear una
sencilla aplicacin web MVC y extenderlo.
Tenga en cuenta que MVC es mucho ms - usted puede encontrar una gran cantidad de
funcionalidades adicionales y personalizaciones, como la integracin con Entity Framework,
utilizando reas, definir rutas personalizadas, aplicacin de filtros, etc Usted puede echar un
vistazo a la ASP.NET MVC sitio para obtener ms detalles sobre estas funciones. Adems, aqu
he utilizado la sintaxis de Razor para las vistas, sin embargo es posible que desee explorar otras
sintaxis punto de vista alternativo, como ASP.NET estndar, Spark, o NHaml. Hay un montn de
posibilidades que puedes explorar y espero que este sea un buen punto de partida para usted.

ASP

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

ASP

Diunggah oleh

Hak Cipta:

Format Tersedia

ASP.

NET MVC3 Razor Con jQuery para

Anda mungkin juga menyukai