Controlador y Vistas

Crear Primer Proyecto ASP.
NET MVC5
En este tutorial, aprenderá:
1. Cómo crear el proyecto MVC5 de ASP.NET
2. Cómo cambiar la autenticación
Escenario del proyecto
Aquí, voy a desarrollar un proyecto en ComputerShop, en el que implementaré los siguientes módulos.
1. Entrada de artículos
2. Gestión de stock
3. Sistema de facturación
Todos estos módulos serán cubiertos a través de todo el tutorial. Aquí, en este capítulo, crearemos un proyecto
CompShop ASP.NET MVC5 y haremos lo siguiente.
A . C REAR NUEVO PROYECTO COMPS HOP
B . AÑADIR PÁGINAS DE VISUALIZACIÓN Y HACER NAVEGACIÓN .
CREAR NUEVO PROYECTO COMPSHOP

1. Abra Visual Studio 2015/2017
2. Vaya a Archivo Nuevo Proyecto
3. Seleccione Web en el panel izquierdo, seleccione Aplicación Web ASP.NET (.NET Framework)
En el panel central, y asigne el nombre del proyecto como CompShop. Haga clic en Aceptar para continuar.
4. En la siguiente ventana, seleccione Plantilla MVC y cambie la autenticación a Sin autenticación . Ahora, haga
clic en Aceptar y Aceptar . Ahora su proyecto ha sido abierto en Visual Studio.
CAMBIAR EL ESTILO Y TÍTULO DE LA PÁGINA DE INICIO
Paso 1: Ve al Explorador de soluciones Puntos de vista Inicio y abierto Index.cshtml.
Paso 2:cambia la página de la siguiente manera:
Paso 3: Abrir Compartido Layout.cshtmly cambiar el nombre de la aplicación en CompShop Studio.
a. Encuentra la siguiente línea de código.

a) @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
b. Y reemplazar con este código.

1. @Html.ActionLink("CompShop Studio", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
Paso 4: Presiona F5 para ejecutar tu proyecto.

Estructura De Carpetas ASP.NET MVC 5
En este capítulo, aprenderá:
1. ASP.NET MVC Folder Structure
Antes de sumergirse en ASP.NET MVC 5, hay ciertas pautas que debe seguir para escribir el código
MVC correctamente y estructurado. La estructura de carpetas de MVC lo guía para elegir una carpeta
adecuada para almacenar diferentes tipos de archivos.
Explorador de la solución
ESTRUCTURA DE LA CARPETA MVC

App_Data - Esta carpeta contiene archivos de datos como LocalDB, .mdf files, xml filesetc.
App_Start : contiene archivos de clase que se ejecutan cuando se inicia la aplicación. Normalmente es
ficheros de configuración como BundleConfig.cs, AuthConfig.cs, FilterConfig.csetc.
Content - Contiene archivos estáticos como css files, images and icon.
Controllers : contiene archivos de clase que manejan la solicitud y respuesta del usuario. Todo el
nombre de archivo del controlador termina con la palabra Controller como HomeController,
LoginController, ProfileControlleretc.
Models : contiene archivos de clase de modelo que manejan la tarea de la base de datos.
Scripts - Contiene los scripts de archivos como JavaScript, VBScript, JQueryetc.
Views - Contiene archivos HTML. Puede haber una carpeta separada para cada controlador. Para
HomeController.cs; Hay carpeta de inicio dentro de la carpeta de vista.
Shared : se encuentra en la carpeta de visualización y contiene archivos compartidos como master

page layoutetc. Cualquier controlador puede acceder al contenido de la carpeta compartida.
ALGUNOS ARCHIVOS IMPORTANTES
Global.json : este archivo se usa para agregar dependencias o agregar una referencia externa de
proyectos a su proyecto actual. Especifica la ruta donde el sistema debe buscar la carpeta de
dependencia.
Project.json : el archivo Project.json en el núcleo de asp.net se utiliza para definir los metadatos del
proyecto, la información de compilación y las dependencias.
Global.asax - Te permite escribir código en los eventos de nivel de aplicación, tales como
Application_BeginRequest, application_start, application_error, sesson_start, sesson_endetc.
Package.config : es administrado por NuGet para realizar un seguimiento de los paquetes y las
versiones que ha instalado en la aplicación.
Web.config - Contiene configuración de nivel de aplicación.

CONTROLADOR
En este capítulo, aprenderás:
1. Comprensión de los conceptos básicos de ASP.NET MVC Controllers.
2. Ejemplo de los controladores del mundo real
3. Algunos hechos importantes al usar controladores
4. Cómo agregar controladores
5. Comprender los resultados de la acción.
Agregar un controlador (Controller) y una página de vista (View Page)

1. ¿Cómo agregar controladores en ASP.NET MVC Project?
2. ¿Cómo agregar una página de vista para controladores en MVC ?
Agregaremos un controlador muy simple y su página de vista para que entiendas cómo funcionan juntos el
controlador y la página de vista.
1. Vaya al Explorador de soluciones y haga clic derecho en la carpeta CONTROLLERS ADD
CONTROLLER
2. Seleccione MVC 5 CONTROLLER – EMPTY y haga clic en el botón Agregar
3. Dar el nombre del controlador a ItemController . El sufijo "Controllerr" se debe agregar en el

nombre del controlador. Haga clic en el botón Agregar para agregar el controlador.
4. El Controlador de tu Objeto se verá así.
Código
Explicación: Este controlador se ejecutará cuando el usuario navegue por la siguiente url:
http: // localhost:1233 / Item / index
En el enlace anterior, el Item es controller y el index es action method.
Cuando el usuario haga clic en el enlace, buscará ItemController con el método de acción Index(). Los
controladores mantienen el método de acción que se ejecuta cuando el usuario los necesita. Debe haber una página
ViewPage Index.cshtml en la carpeta de elementos; de lo contrario, aparecerá un mensaje de error.
AGREGAR UN VIEWPAGE PARA EL MÉTODO DEL ÍNDICE

1. Haga clic derecho en el Método de acción Index y seleccione Add View
2. Seleccione la opción como imagen a continuación y haga clic en el botón Add para agregar una
página de vista.
3. Se agrega su página de vista de índice. Puedes ver aquí.

PASEMOS UN MENSAJE DEL CONTROLADOR PARA VER LA PÁGINA
1. Agregue los siguientes códigos en el ItemController.cs archivo.
2. Agregue el siguiente código en el artículo Index.cshtmlexpediente.

<h1> @ ViewBag.ItemList </h1>
3. Presione F5 para ejecutar su proyecto y vaya al siguiente enlace:
http://localhost:1233/Item/Index
4. Output
Todos los tipos de métodos de acción (Action Methods) en asp.net mvc
1. ¿Qué son los Action Methods o métodos de acción en ASP.NET MVC?
2. Usos de los métodos de acción
3. ¿Cuántos tipos de métodos de acción en MVC?
4. Ejemplo
Ejemplo
1. ViewResult
Salida: Volverá a la página de vista de índice

EmptyResult
Salida: Devolverá una página en blanco sin resultado.

RedirectResult
Los resultados de redireccionamiento se utilizan para devolver resultados a una URL específica Cuando
necesite redirigir a otro método de acción, puede usar el Método de acción RedirectResult.
Cuando ejecute este código, lo redireccionará a la página de contacto .

JSONResultar
El resultado JSON devuelve el formato de archivo de texto simple y los pares de valores clave. A veces
es posible que desee devolver datos en formato JSON y para esa situación JSONResultado es la mejor
opción.
Salida
JavaScriptResultar
Devuelve el script java que se puede ejecutar en el navegador del cliente. Envía contenido javascript
en respuesta al navegador. Este bloque le permite ejecutar el script java en el cliente en tiempo de
ejecución.
Ejemplo:
Paso 1: Agregue este método JavaScriptResult()en el controlador home.
Paso 2: Abre Index.cshtml y agrega el siguiente código resaltado.
Salida
Content Result
Devuelve el tipo de contenido definido por el usuario. Es útil cuando desea enviar algún mensaje de
texto sin formato a la pantalla del navegador.
Salida
File Result
Representa el contenido del archivo.
Paso 1: Agregue el siguiente código en HomeControllers
Paso 2: Añadir enlace de acción en la Index.cshtmlpágina.
Salida
PartialViewResult
Devuelve HTML desde vista parcial.
Paso 1: Añadir una página parcial. Ir al Solution Explorer Shared. Right-click sobre él y seleccione
Add View.
Paso 2: Crea una página de vista parcial como se describe en esta imagen.
Paso 3: Agregue el siguiente código en la página message.cshtml

Esta es la salida de ejemplo PartialViewResult
Paso 4: Abra HomeController.cs y agregue la siguiente línea de código.
Paso 5: Ve Index.cshtmly agrega este código.
Salida
Filtros de acción
Un ejemplo muy clásico del uso de Actions Filters es en la Autorización de usuarios registrados
Filtros de acción personalizados

VISTAS
Conceptos básicos de las vistas en mvc
1. ¿Qué son las Views en MVC?
2. ¿Cómo crear View Pages en MVC5?
ENTENDIMIENTO LO BÁSICO
Views es una carpeta en la estructura MVC que contiene el archivo .cshtml y el diseño que se usa para mostrar y
representar páginas web en las computadoras del usuario.
La carpeta Views mantiene una carpeta separada para cada controlador y cada carpeta mantiene diferentes páginas
.cshtml para todos los métodos de acción pertenecen a ese controlador. El nombre de las carpetas de vistas es el
mismo que el nombre de los controladores y el nombre de las páginas .cshtml igual que los métodos de acción.
Agregar una View Pages en asp.net mvc

1. ¿Cómo agregar una View Pages en ASP.NET MVC 5?
2. ¿Cómo agregar una View Pages desde el método de acción del controlador?
Existen 2 métodos más populares para agregar una View Pages en ASP.NET MVC
 Puede agregar directamente una página ViewPage
 O, Agregar una ViewPage desde el controlador.
Antes de agregar o crear una página de vista, debe comprender las siguientes reglas y pautas para agregar una
página de vista (ViewPage) .
1. Las ViewPage deben referirse a un método de acción del controlador. Si ha agregado una página de vista pero no
creó un método de acción en el controlador, obtendrá un error HTTP 404. Esto se debe a que, en MVC, el
controlador administra la solicitud del usuario y devuelve una respuesta al usuario. Por lo tanto, si el método de
acción no está disponible en un controlador, el controlador devolverá el mensaje de error HTTP 404.
Entendámoslo con un ejemplo real.
a) Supongamos que abre el siguiente enlace:
localhost:1233/Home/Enquiry
Aquí, localhost:1233 es el nombre de su aplicación o dominio
Home es controlador y
Enquiry es Método de acción .
b) La solicitud va primero al Home Controller y encuentra el Método de Acción Enquiry.
c) Si el Método de Acción Enquiry se encuentra en el Controlador Home, buscará Enquiry.cshtml
Ver las páginas de la carpeta Home.
d) Debe recordar que cada Controlador debe tener una carpeta en Views con el mismo nombre que el
nombre del controlador. Y, cada carpeta en View debe tener las páginas de vista .cshtml con el mismo
nombre que los métodos de acción.
e) Si hay un Método de Acción Enquiry en el Controlador Home, debe haber una Vew Enquiry.cshtml
en la carpeta de Views Home.
2. El nombre del Controller y el nombre de la carpeta Views deben ser iguales.
3. El método de acción y el archivo .cshtml deben tener el mismo nombre.
Ejemplo:
1. Abra HomeController.cs y agregue el siguiente código.
2. Ahora, haga clic derecho en Método de acción Enquiry()y elija Add View.
3. El cuadro de diálogo Add View se abrirá. No cambies el nombre de la View y debería nombrarse
como Enquiry. Seleccione Empty (without model) en el cuadro combinado Plantilla y haga clic en
Add.
4. Verás que Enquiry.cshtml se agrega en la carpeta Home.
5. Abra la página Enquiry.cshtml y escriba el siguiente código en ella.
6. Ejecute su proyecto y vaya al siguiente enlace.

http://localhost:1233/Home/Enquiry
¿Qué pasa si agrego una página de vista sin método de acción?

Obtendrá HTTP: Error 404 . Vamos a entenderlo con un ejemplo.
1. Vaya al Solution Explorer Views Home.
2. Haga clic derecho en la Home Folder Add View.
3. Indique el nombre de la vista: Purchase y haga clic en Add .

4. Abra Purchase.cshtml y agregue el siguiente código en él.
5. Ejecute su proyecto y vaya al siguiente enlace. http://localhost:1233/Home/Purchase

6. Obtendrá el error HTTP 404. ¿Por qué? Porque no ha creado un Método de acción que
represente estos Purchase.cshtml en el navegador del cliente.
Salida:
Corregirlo.
7. Ir a Controllers HomeController.cs y añade el siguiente código en él.
8. Ahora, ejecute su proyecto, verá la página de compra en lugar de la página de error 404.
Salida:
Cree un diseño de página maestra
1. Cómo crear un diseño de página maestra en ASP.NET MVC
2. Guía paso a paso para crear la página maestra
3. Cómo cambiar el diseño predeterminado.
Nota: Crear un diseño de MasterPage es muy fácil. Simplemente diseñe la _YourLayout.cshtml página en
Carpeta Shared e inserte placeholder para el área que desea dinamizar. ¡Cómo! Aquí están los pasos.
Paso 1: Abre el Explorador de soluciones y ve a la carpeta Shared.
Paso 2: Aquí, ya encontrarás 2 páginas de diseño: _Layout.cshtml y Error.cshtml. Aquí, voy a

crear mi propia _DarkLayout.cshtml. Haga clic derecho en la Shared folder Add MVC 5 Layout
Page (Razor)..
Paso 3: Dé el nombre _DarkLayout y haga clic en Aceptar .
Paso 4: Ahora, abra la página _DarkLayout.cshtml y pegue el siguiente código diseñado.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body style="background-color:burlywood">


<header>
<h1 style="text-align:center; color:bisque">My Dark Layout Page</h1>
</header>



<nav>
<h3>Navigation</h3>
@Html.ActionLink("About","About");<br />
@Html.ActionLink("Contact", "Contact");<br />
@Html.ActionLink("Enquiry", "Enquiry");<br />
@Html.ActionLink("Home", "Home");<br />
@Html.ActionLink("Purchase", "Purchase");<br />
</nav>



<div class="content">
@RenderBody()
</div>



<footer>
<h4>I am Footer.</h4>
</footer>


<style>
header {
height: 100px;
width: 100%;
background-color: red;
}
nav {
float: left;
width: 200px;
height: 250px;
background-color: darkgoldenrod;
}
.content {
background-color: aliceblue;
padding: 20px;
}
footer {
background-color: green;
width: 100%;
height: 50px;
float: right;
text-align: center;
}
</style>
</body>
</html>
Paso 5: crear una nueva página de vista y agregar esta página de diseño en ella. Primero abre
HomeController.cs y agrega el siguiente código para agregar la página de vista.
Paso 6: Ahora, haga clic derecho en este método de acción DarkLayouPage () y seleccione Add
View.
Paso 7: Indique el nombre de la vista: DarkLayoutPage y seleccione Empty Template como se
muestra en la siguiente imagen. Seleccione Use a layout page checkbox y hacer clic en el botón
browse.
Paso 8: Explorar en el panel izquierdo Views Shared y luego seleccione _DarkLayout.cshtml en el

panel derecho. Haga clic en OK y luego en el botón Add para agregar la página de vista.
Paso 9: ahora ejecute su proyecto y vaya al siguiente enlace para ver el resultado.
http://localhost:1233/Home/DarkLayoutPage
Cuando agrega contenido en la View Page DarkLayoutPage , se mostrará en el área de contenido y el diseño del
encabezado, pie de página y barra lateral será el mismo. Puede crear muchas páginas de diseño en una carpeta
compartida.
Si desea agregar este diseño a otra página que ya está creada, agregue el siguiente código en la parte superior de la
página.
Entendamos el código
No hay nada que entender en el código anterior. Simplemente diseñe, el diseño de su página en la carpeta
Compartida e inserte placeholder @RenderBody()para inyectar contenido desde una página secundaria.
Cómo cambiar el diseño predeterminado
Para cambiar la página de diseño por defecto, siga los siguientes pasos.
1. Abra el Solution Explorer Views _ViewStart.cshtml.
2. Cambie su nombre de diseño aquí.
CREAR PÁGINA MAESTRA USANDO DOWNLOADED HTML/CSS TEMPLATE
También puede tomar ayuda para crear una página maestra de este asombroso artículo paso a paso.
Este artículo explica cómo usar y aplicar un tema css externo en el diseño de la página maestra.
https://www.completecsharptutorial.com/mvc-articles/mvc-design-master-page-layout-with-css-html-
template/
RenderBody, RenderPage Y RenderSection con Ejemplo

1. ¿Qué es RenderBody, RenderPage y RenderSection en MVC?
2. ¿Cómo usarlo @RenderBody?
3. ¿Cómo usarlo @RenderSection?
4. ¿Cómo usarlo @RenderPage?
5. ¿Qué son Styles.Rendery Scripts.Render cómo usarlos?
@RENDERBODY
@RenderBody se utiliza para inyectar contenido de una página secundaria en el diseño de la página maestra. Si no
hay una sección con nombre en la página secundaria, el contenido se mostrará en la sección RenderBody.
Ejemplo:
Salida
@RENDERSECTION
@RenderSection se utiliza para inyectar contenido en la sección definida. Te permite especificar una región en
Layout.
Hay dos pasos para definir @RenderSection en ASP.NET MVC.
A. Especifique un @RenderSection área en la página de diseño.
B. Use esta sección específica para inyectar contenido de una página secundaria.
Nota: el orden no importa. Se puede usar @section Footer antes @section Note y la salida sería la misma.
Te has dado cuenta de que se ha usado un parámetro falso al crear una sección en la página de diseño.
@RenderSection("Footer", false)
el parámetro falso indica que la sección de pie de página es opcional y es su elección si lo usa o no. Si usa el
parámetro verdadero, entonces es obligatorio usar esta sección en la página secundaria, de lo contrario obtendrá el
siguiente error.
[HttpException (0x80004005): Section not defined: "Footer".]
Salida:
@RENDERPAGE
@RenderPage se utiliza para llamar a una página dentro de otra página. Por ejemplo, tiene textos y fotos
promocionales, y desea usarlo todo en su página, pero la condición es que las promociones tienen que cambiar con
frecuencia.
Simplemente cree una página que contenga textos y fotos promocionales y use esta página donde quiera que quiera
insertar. Cuando la página web se renderice en el navegador, mostrará todo el contenido de esa página. Cuando
desee cambiar los textos promocionales, simplemente cámbielo en un lugar y reflejará todas las páginas.
Ejemplo:
1. Ir a ver Carpeta View Shared y crear _StaticPromotionalPage.
2. Agregue el siguiente código en esta página.
3. Ahora, abre Home DarkLayoutPage.cshtml e inserte_StaticPromotionalPage de esta manera.

@RenderPage("~/Views/Shared/_StaticPromotionalPage.cshtml")
Salida:
COMPLETE CODE
1. View Shared _DarkLayout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body style="background-color:burlywood">


<header>
<h1 style="text-align:center; color:bisque">My Dark Layout Page</h1>
</header>



<nav>
<h3>Navigation</h3>
@Html.ActionLink("About","About");<br />
@Html.ActionLink("Contact", "Contact");<br />
@Html.ActionLink("Enquiry", "Enquiry");<br />
@Html.ActionLink("Home", "Home");<br />
@Html.ActionLink("Purchase", "Purchase");<br />
</nav>



<div class="content">
@RenderBody()
</div>
<div style="background-color:rebeccapurple; color:antiquewhite; font-weight:bold">

@RenderSection("Note",false)
</div>



<footer>
<h4>I am Footer.</h4>
<div style="background-color:red; color:aliceblue">@RenderSection("Footer", false)</div>
</footer>


<style>
header {
height: 100px;
width: 100%;
background-color: red;
}
nav {
float: left;
width: 200px;
height: 250px;
background-color: darkgoldenrod;
}
.content {
background-color: aliceblue;
padding: 20px;
}
footer {
background-color: green;
width: 100%;
height: 50px;
float: right;
text-align: center;
}
</style>
</body>
</html>
2. Views Home DarkLayoutPage.cshtml
@{
ViewBag.Title = "DarkLayoutPage";
Layout = "~/Views/Shared/_DarkLayout.cshtml";
}
<h2>DarkLayoutPage</h2>
Hello CompShop Application. I am in RenderBody section because there is no named section fo

r me.
@RenderPage("~/Views/Shared/_StaticPromotionalPage.cshtml")
@section Note
{
I am a RenderSectionArea.
}
@section Footer
{
I am Footer Section Areas.
}
<h2>Hello world</h2>
3. Controllers HomeController.cs
using System.Web.Mvc;
namespace CompShop.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()

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

{
ViewBag.Message = "Your contact page.";
return View();
}
public ActionResult Enquiry()

{
return View();
}
public ActionResult Purchase()

{
return View();
}
public ActionResult DarkLayoutPage()
{
return View();
}
}
}
4. Views Shared _StaticPromotionalPage.csthml
<div style="padding:10px; background-color:#f3f045; color:#dc1f36; position:inherit">
<strong>This is Promotional page</strong>
You can use this page to insert this content.
</div>
Output:
Adición de Partial Views Pages

1. ¿Qué son las vistas parciales en ASP.NET MVC 5?
2. ¿Cuál es el uso de vistas parciales
3. ¿Cómo crear vistas parciales en MVC?
4. Ejemplo de páginas de vistas parciales
¿QUÉ SON LAS VISTAS PARCIALES EN ASP.NET MVC5?

Vista parcial es una subpágina de la página View principal que conserva partes reutilizables de las páginas web. Si su
página principal es demasiado grande, puede dividirla en varias partes y almacenar el contenido en una página
parcial con un nombre lógico. Después de eso, puedes llamar a esta página parcial dentro de tu página de vista
principal.
Pongamos un ejemplo.
Si su página principal es demasiado grande, puede dividirla en varias partes, como por ejemplo::
Header.cshtml Puede contener código de menú de encabezado
Sidebar.cshtml: Puede contener menú de barra lateral
Footer.cshtml: puede contener código de pie de página.
¿CÓMO CREAR UNA PÁGINA DE VISTA PARCIAL?

Aquí, voy a crear varias páginas parciales para mi página de diseño.
1. Abra Visual Studio e inicie un nuevo proyecto ASP.NET MVC 5.
2. Abra el Explorador de soluciones > Views > Shared >_Layout.cshtml
Aquí está el conjunto completo de códigos de _Layout.cshtml

Ahora, dividiré esta página en varias páginas parciales y luego la llamaré a esta página de diseño.
3. Haga clic derecho en Shared Folder Add View. . Cree un Header y no olvide seleccionar la casilla de
verificación Create as a partial view.. Haga clic en el botón Add para agregar una página parcial .
4. Ahora, el código de _Layout.cshtml córtelo, péguelo en el archivo Header.cshtml
Header.cshtml
5. Llama a esta página parcial dentro de la _Layout.cshtml página como esta.
_Layout.cshtml
Más datos sobre la página parcial:

1. Es una forma efectiva de dividir las páginas de vista grande en componentes más pequeños.
2. Una página parcial es reutilizable, así que mantenga el contenido común en la página parcial y
utilícelo donde desee.
3. Puede recuperar una página parcial dentro de una página de vista usando las siguientes formas:
La Sintaxis De Razor
1. ¿Qué es la sintaxis de Razor ?
2. ¿Cómo escribir la sintaxis Razor en la página de vista MVC ?
3. Reglas de Razor para la programación de C #
4. Ejemplo de Razor
¿QUÉ ES LA SINTAXIS DE RAZOR?

La sintaxis de Razor es una forma poderosa y fácil de escribir código basado en servidor directamente en sus páginas
de visualización. Razor es una sintaxis de marcado que le permite incrustar la Programación C # directamente en su
página de visualización. Generalmente se escribe en el archivo .cshtml .
¿CÓMO ESCRIBIR LA SINTAXIS RAZOR EN MVC VIEW PAGE?

Es muy fácil aprender acerca de la sintaxis de Razor. Siempre recuerda que Razor no es un lenguaje de
programación, solo te da espacio en tu página .cshtml para escribir código C # o código VB.
Para escribir la Sintaxis de Razor en la página de Vista de MVC de ASP.NET, memorice las siguientes pautas.
1. Usa el @{ … }bloque para escribir el código C #.

Ejemplo
2. Todas las expresiones en línea como variables y funciones comienzan con @
Ejemplo
3. Las variables se declaran con la palabra clave var y todas las declaraciones de código terminan
con un punto y coma (;) .
Ejemplo
4. Mantener el valor de la cadena entre comillas dobles ("")

Ejemplo
5. Usa el marcado HTML para agregar código HTML dentro del bloque Razor.
Ejemplo
6. Utilice Double @@ , si desea imprimir solo @ .

Ejemplo
7. Declaración de control: if, else if y else

Ejemplo
8. Switch Case
Ejemplo:
9. Declaración de bucle: for, foreach, while, do while

Ejemplo:
10. Foreach y Array
Ejemplo
11. Manejo de errores con Try Catch

Ejemplo
12. @using : Añadir NameSpace

Puede agregar espacio de nombres usando el comando @using .
Ejemplo:
13. Comentarios en Razor
14. @model: Accediendo a los datos del modelo.

El comando @model se usa para agregar y acceder a variables y datos del modelo en la página de vista.
@model LoginViewModel
Aprenda Viewbag, Viewdata y Tempdata
1. ¿Qué es ViewBag y cómo usarlo en la programación?
2. ¿Qué es ViewData y cómo usarlo?
3. ¿Qué es TempData y cómo usarlo?
4. ¿Qué es ViewDataDictionary y cómo usarlo?
¿QUÉ ES VIEWBAG, VIEWDATA Y TEMPDATA?

ViewBag, ViewData y TempData se usan para pasar información de los controladores a las vistas. La mayoría de las
veces, desea visualizar información calculada utilizando vistas. En este tutorial, explicaré estos tres objetos con un
ejemplo completo de programación para mostrarle cómo puede usar estos objetos para pasar datos de los
controladores a las vistas.
VIEWBAG
Hechos sobre ViewBag

ViewBag se utiliza para pasar datos de los controladores a las vistas.
ViewBag tiene una vida corta: una vez que pasa el valor de los controladores a las vistas, se convierte en
nulo.
ViewBag no requiere encasillado.
Puede crear ViewBag de esta manera:

ViewBag.YourName = “Value to be passed”;
Y, puede acceder a estos datos en Ver páginas de esta manera:

@ViewBag.YourName
EJEMPLO
1. Abra Visual Studio y cree un nuevo proyecto MVC 5. He abierto mi proyecto actual CompShop Application.
2. Ir al controlador HomeController.cs
3. Busque Index ActionResult y escriba el siguiente código.
4. Ahora ve a Views Home Index.cshtml y abrirlo. Aquí, escriba el siguiente código para acceder a los datos
del controlador.
Salida:
VIEWDATA
ViewData también se usa para enviar información de los controladores a las vistas.
Algún hecho sobre ViewData
1. También se utiliza para enviar información desde los controladores a las vistas.
2. Una vez que envía información, se vuelve nula.
3. ViewData es un objeto de diccionario que se deriva de ViewDataDictionary.
4. ViewData utiliza el par clave-valor para almacenar y recuperar información.
5. Requiere encasillado para un tipo de datos complejo.
Puede crear ViewData de esta manera:
ViewData["FirstValue"] = "Hello World";
Y, puede acceder a la información de ViewData de esta manera:
@ViewData["FirstValue"]
Ejemplo
En HomeController.cs
En Index.cshtmlpáginas vistas
TEMPDATA
TempData también se usa para enviar datos desde los controladores para ver, pero es un poco diferente de ViewBag
y ViewData. TempData se utiliza principalmente para transferir valor de un controlador a otro controlador. Es más
útil cuando redirige una página a otra y desea enviar información junto con ella. Tiene una vida más larga que
ViewBag y ViewData y puede acceder al valor TempData en 2 a 3 Solicitudes HTTP.
Vamos a entenderlo con facilidad.
A veces, es posible que desee pasar valor de los controladores a la página de vista redirigida. Esta página de vista
puede pertenecer a otro controlador. Por ejemplo:
1. Usted solicita información de inicio de sesión en la página de inicio de sesión.
2. Valide la entrada del usuario en un controlador.
3. Si la validación es verdadera, redirecciona el control a una página interna con algunos datos. Estos datos pueden
utilizarse para mostrar información de inicio de sesión.
Algún hecho sobre TempData
1. TempData usa la sesión internamente para almacenar valor.
2. Debe comprobar si hay nulos antes de usar TempData para evitar el error de tiempo de ejecución.
3. TempData está vivo en dos solicitudes secuenciales. Utiliza el método TempData.Keep () para la tercera
solicitud.
4. TempData también es un objeto de diccionario que almacena información en pares clave-valor. Se deriva de
TempDataDictionary.
Ejemplo
Paso 1 . Creado TempData en los métodos de acción del índice.
Paso 2 . Lo recuperé en el Método Acerca del
Paso 3 . Imprirlo en View Page contacto .
Paso 1: Abra HomeController.cs y escriba el código en los siguientes métodos de acción.
Index()Método de acción
About() Método de acción
Contact.cshtml página
Salida
a) Cuando ejecute este programa, en la página de índice TempData[“FirstValue”]se llenará de valor.
b) Cuando haga clic en el enlace Acerca de , se le redirigirá a la página de contacto y mostrará la información.
c) Cuando vuelva a hacer clic en el enlace Acerca de , no redirigirá su página de contacto y le mostrará la
página.
d) Después de eso, si hace clic en la página de Contacto , no verá ninguna información de TempData
["FirstValue"] .
e) Haga clic varias veces en el enlace Índice, Acerca de y Contacto y trate de examinar el resultado y las
diferencias.
MODELOS
Comprender los conceptos básicos del Model en mvc

1. Conceptos básicos del modelo
2. Uso del modelo
3. Cómo agregar un modelo en la aplicación MVC 5
FUNDAMENTOS DEL MODELO

El modelo no es nada, solo una carpeta en su Proyecto MVC que mantiene las clases relacionadas con el Sistema de
Gestión de Base de Datos. En pocas palabras, todos los archivos de clase que son responsables de acceder a los
datos desde la base de datos deben guardarse aquí. Más adelante, el controlador utilizará este archivo de clase para
acceder a los datos y representar Views.
El modelo es como un puente entre su aplicación y las bases de datos.

Los controladores envían señal al modelo para Data Model ejecuta el archivo de clase y recupera datos de la base
de datos y regresa al Controlador.
Luego el controlador presenta estos datos al usuario utilizando View Pages.
En esta sección, aprenderás los siguientes capítulos.
1. Agregar un modelo
2. Insertar, actualizar, eliminar sin Entity Framework
3. Insertar, actualizar, eliminar utilizando Entity Framework
4. Ejemplo
Agregar Un Modelo En ASP.NET MVC 5 Project Paso A Paso
1. Cómo agregar una clase de modelo en ASP.NET MVC 5 Project
2. Cómo acceder a los datos del modelo en la vista usando el controlador
3. Ejemplo completo de programación
AÑADIENDO UN MODELO
Abra el proyecto actual CompShop para agregar un modelo. Si no ha creado la aplicación CompShop anteriormente,
cree un nuevo Proyecto MVC con su nombre preferido.
Paso 1: Abra el Explorador de soluciones y busque la carpeta de Models. Si la Carpeta Models no
está allí, simplemente cree una nueva carpeta: Models. Después de que haga clic derecho en Model
Add Class…
Paso 2: Crea una nueva clase ItemList.cs y haz clic en el botón Add .
Paso 3: Agregue el siguiente código en la clase ItemList.cs.
Aquí, esta clase se asignará a la base de datos de la siguiente manera:

1. El nombre de clase ItemList será el nombre de su tabla en la base de datos.
2. A cada miembro de esta clase like ID, Name, Categoryy Price se asignará con la columna de tabla con el mismo
nombre.
3. El datatype de esta propiedad será el datatype de la columna en la tabla.
Paso 4: Crear un nuevo controlador ItemController.cs. Haga clic derecho en
Controllers Add Controller…
Paso 5: Seleccione el MVC 5 Controller – Empty y haga clic en el botón Add.

Paso 6. Ahora abre ItemController.csy agrega el siguiente código.
Aquí, en este código, se ha codificado los datos para que estos datos puedan usarse en las vistas. Porque no se esta
usando una base de datos, así que se ha agregado los datos manualmente a los modelos.
Paso 7: Ahora, haga clic derecho en el método de acción Index()y haga clic en Add vista. Indique
el nombre de la vista: Index y haga clic en el botón Add .
Paso 8: Ahora, abra la página Index.cshtml desde la carpeta del elemento y agregue el siguiente
código en ella.
Paso 9: Ejecute el proyecto y navegue a http://localhost:1233/Item/Index
Insertar, Actualizar, Eliminar utilizando Modelos sin EF
1. ¿Cómo acceder a la base de datos y las tablas utilizando el Modelo sin Entity Framework 6?
2. ¿Cómo insertar, actualizar y eliminar de tablas sin Entity Framework?
Entity Framework es una herramienta muy poderosa para la administración de bases de datos que le
permite insertar, actualizar y eliminar en la base de datos fácilmente, pero es muy pesado y limita el
control del desarrollador. Sin Entity Framework, tiene todas las cosas en su mano y tiene control total
sobre su código. En este capítulo, veremos cómo puede comunicarse con la base de datos y Insertar,
Actualizar y Eliminar un registro sin utilizar Entity Framework..
CREA O ABRE UN PROYECTO

Utilicé el Project CompShop anteriormente. Si no ha creado, cree un nuevo Proyecto ASP.NET MVC 5 en Visual
Studio ahora.
CREAR UNA BASE DE DATOS Y UNA TABLA

Ahora, vamos a crear una base de datos y una tabla . Esta tabla se utilizará para almacenar, editar y eliminar
registros. Puede crear una base de datos en SQL Server Management Studio o Visual Studio Server Explorer. Aquí, se
creara la base de datos y la tabla en Visual Studio Server Explorer. Aquí están los pasos completos.
1. Crear base de datos
Paso 1: Abra el Explorador de servidores en Visual Studio. Ir a ver Explorador de servidores .
Vista - Explorador de servidores

Paso 2: Haga clic derecho en Data Connections Create New SQL Server Database
Paso 3: Rellene el nombre del servidor como .\SQLExpress y el nombre de la base de datos como
CompShopDBwithoutEF y haga clic en OK .
2. Crear mesa
Paso 1: Expanda su base de datos en Server Explorer y haga clic derecho en la Table Add New
Table.
Paso 2: Ahora diseñe la tabla de la siguiente manera o ejecute el siguiente script para agregar la
tabla ItemList en la base de datos.
Script
Paso 3: Ahora tus tablas están creadas. Puedes verlo en Server Explorer.
AÑADIR CADENA DE CONEXIÓN EN EL WEB.CONFIG ARCHIVO

Paso 1: haga clic derecho en su conexión de base de datos en Server Explorer y seleccione
Properties
Paso 2: Encontrará la Cadena de conexión en la ventana Propiedades. Copie la cadena de conexión y
agréguela en el archivo web.config .
Paso 3: Abra el archivo Root Web.config y agregue la cadena de conexión antes de </Configuration>
de la siguiente manera.
Code:
<connectionStrings>
<add name="CompShopConString" connectionString="Data Source=.\SQLExpress;Initial
Catalog=CompShopDBwithoutEF;Integrated Security=True;Pooling=False"/>
</connectionStrings>
CREAR CLASE DE MODELO
Ahora, el siguiente paso es crear un modelo para la tabla ItemList . Aquí están los pasos.
Paso 1: Crea una nueva ItemModel.csclase en Model . Haga clic derecho sobre
el Model Add Class…
Paso 2: Agregue el siguiente código de mapeo en él.
CREAR UNA ITEMDBHANDLER.CSCLASE PARA MANEJAR LA CONSULTA DE BASE DE DATOS

Aquí, se creara una clase que manejará todas las consultas relacionadas con la base de datos como insertar,
actualizar y eliminar. El modelo utilizará esta clase para establecer una conexión con la base de datos y procesar el
registro.
Paso 1: Crea una ItemDBHandler.cs clase en la carpeta Model . Haga clic derecho sobre
Model Add Class. Agregue el siguiente código en la clase ItemDBHandler.cs.
Code:
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
namespace CompShop.Models
{
public class ItemDBHandler
{
private SqlConnection con;
private void connection()
{
string constring =
ConfigurationManager.ConnectionStrings["CompShopConString"].ToString();
con = new SqlConnection(constring);
}
// 1. ********** Insert Item **********

public bool InsertItem(ItemModel iList)
{
connection();
string query = "INSERT INTO ItemList VALUES('" + iList.Name + "','" +
iList.Category + "'," + iList.Price + ")";
SqlCommand cmd = new SqlCommand(query,con);
con.Open();
int i = cmd.ExecuteNonQuery();
con.Close();
if (i >= 1)
return true;
else
return false;
}
// 2. ********** Get All Item List **********

public List<ItemModel> GetItemList()
{
connection();
List<ItemModel> iList = new List<ItemModel>();
string query = "SELECT * FROM ItemList";

SqlCommand cmd = new SqlCommand(query, con);
SqlDataAdapter adapter = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
con.Open();
adapter.Fill(dt);
con.Close();
foreach(DataRow dr in dt.Rows)
{
iList.Add(new ItemModel
{
ID = Convert.ToInt32(dr["ID"]),
Name = Convert.ToString(dr["Name"]),
Category = Convert.ToString(dr["Category"]),
Price = Convert.ToDecimal(dr["Price"])
});
}
return iList;
}
// 3. ********** Update Item Details **********

public bool UpdateItem(ItemModel iList)
{
connection();
string query = "UPDATE ItemList SET Name = '"+iList.Name+"', Category =
'"+iList.Category+"', Price = "+iList.Price+" WHERE ID = "+iList.ID;
con.Open();
con.Close();
if (i >= 1)
return true;
else
return false;
}
// 4. ********** Delete Item **********

public bool DeleteItem(int id)
{
connection();
string query = "DELETE FROM ItemList WHERE ID = " + id;
con.Open();
con.Close();
if (i >= 1)
return true;
else
return false;
}
}
}
CREA UN CONTROLADOR: ITEMCONTROLLER.CS
Paso 1: Haga clic derecho en Controllers Add Controller…
Paso 2: crear MVC 5 Controller - Empty y haga clic en el botón Add .

Paso 3: Dé el nombre del controlador: ItemControllery haga clic en Add .
Paso 4: Ahora agrega el siguiente código enItemController.cs
using CompShop.Models;
{
public class ItemController : Controller
{
// 1. *********** Display All Item List in Index Page ***********
{
ViewBag.ItemList = "Computer Shop Item List Page";
ItemDBHandler IHandler = new ItemDBHandler();
ModelState.Clear();
return View(IHandler.GetItemList());
}
// 2. *********** Add New Item ***********

[HttpGet]
public ActionResult Create()
{
return View();
}
[HttpPost]
public ActionResult Create(ItemModel iList)
{
// try
//{
if(ModelState.IsValid)
{
ItemDBHandler ItemHandler = new ItemDBHandler();
if(ItemHandler.InsertItem(iList))
{
ViewBag.Message = "Item Added Successfully";
ModelState.Clear();
}
}
return View();
/* }
catch { return View(); }*/
}
// 3. *********** Update Item Details ***********

[HttpGet]
public ActionResult Edit(int id)
{
return View(ItemHandler.GetItemList().Find(itemmodel => itemmodel.ID == id));
}
[HttpPost]
public ActionResult Edit(int id, ItemModel iList)
{
try
{
ItemHandler.UpdateItem(iList);
return RedirectToAction("Index");
}
catch { return View(); }
}
// 4. *********** Delete Item Details ***********

public ActionResult Delete(int id)
{
try
{
if(ItemHandler.DeleteItem(id))
{
ViewBag.AlertMsg = "Item Deleted Successfully";
}
return RedirectToAction("Index");
}
catch { return View(); }
}
public ActionResult Details(int id)

{
return View(ItemHandler.GetItemList().Find(itemmodel => itemmodel.ID == id));
}
}
}
Se ha usado Model class ItemModel para acceder a los datos o almacenar datos. La clase ItemModel usa la clase
ItemDBHandler para procesar el trabajo relacionado con la base de datos. Se ha escrito todo el código relacionado
con la base de datos en la clase ItemDBHandler.cs .
AÑADIR VER PÁGINAS DESDE EL MÉTODO DE ACCIÓN DEL CONTROLADOR.

Ahora, esta vez es para agregar páginas de vista para todos los métodos de acción de ItemController
Paso 1: Vaya a ItemController y haga clic con el botón derecho en el Método de acción Index(),
luego seleccione Add View ...
Paso 2: Aparecerá el cuadro de diálogo Add View. Rellene los detalles como en esta imagen y haga
clic en el botón Add.
Paso 3: Uso del mismo proceso Add View para los método de acción Create(), Edit(),
Delete()y Details().
Create()
Edit()
Delete()
Details()
EJECUTA TU PROYECTO
Presione F5 para ejecutar su proyecto y navegue hasta el siguiente enlace
http://localhost:1233/Item/Index/
Imagen de salida
Insertar, Actualizar, Eliminar Utilizando Modelos Con Entity Framework
1. ¿Cómo crear modelos y conectarse a la base de datos utilizando Entity Framework ?
2. ¿Cómo instalar Entity Framework 6 en su proyecto ASP.NET MVC?
Paso 1: Crear una nueva aplicación ASP.NET MVC5 o abra el proyecto CompShop existente.
Paso 2: Instalar Entity Framework
Entity Framework es una parte esencial de ASP.NET MVC 5 y es una nueva tecnología que maneja todo el trabajo
relacionado con la base de datos muy fácilmente. Usted puede ser maravillado al ver el poder de EF. Instalar EF es
muy fácil. Aquí están los pasos para instalar EF6.
a) Haga clic derecho en el nombre de su proyecto Administrar paquetes de Nuget ...

b) Haga clic en Examinar enlace y busque EntityFramework y haga clic en el botón
Instalar para instalarlo. La instalación es muy fácil y toma solo unos segundos.
c) Después de instalar Entity Framework, puede verlo en la carpeta Referencias en el

explorador de soluciones.
Paso 3: Agrega un modelo ItemStockModelsy pega el siguiente código en él.
Se ha agregado un espacio de nombres using System.Data.Entity; Este espacio de nombres le permitirá

heredar DBContext y todas sus características. DBContext es una parte importante de Entity Framework que le
permite a su clase comunicarse con la base de datos. Funciona como un puente entre las clases de su entidad y las
bases de datos.
Aquí ItemStockContext es el nombre de cadena de conexión y StockModel se usará para el nombre

de la tabla.
Paso 4: Agregar cadena de conexión al archivo web.config.
No necesita preocuparse por la base de datos y la tabla. Proporcione una cadena de conexión y Entity Framework
hace todo el trabajo automáticamente. Sin embargo, puede moverse sin proporcionar una cadena de conexión y, en
esta situación, EF creará una base de datos local y completará el proceso.
Paso 1: abra el archivo Root Web.config y pegue el siguiente código antes de la etiqueta
</configuration>.
<connectionStrings>
<add name="ItemStockContext" connectionString="Data
Source=.\SQLExpress;Initial Catalog=CompShopDBwithoutEF;Integrated
Security=True;Pooling=False" providerName="System.Data.SqlClient"/>
</connectionStrings>
Paso 2: cree su aplicación presionando Ctrl + Shift + B

Paso 3: agregue un Controller ItemStockController . Haga clic derecho en el
Controller Add Controller
Paso 4: Seleccione MVC 5 Controller with views, using Entity Framework y haga clic en el botón
Add .
Paso 5: Seleccione Item como en esta imagen y proporcione el nombre del Controlador
ItemStockController y haga clic en Agregar .
Paso 6: Agregará automáticamente páginas de visualización con las páginas Crear, Eliminar, Detalles,
Editar e Índice.
Paso 7: Ejecute su proyecto y navegue hasta el siguiente enlace: http://localhost:1233/ItemStock
Ejemplo de Scaffolding
1. ¿Qué es el Scaffolding en ASP.NET MVC 5?
2. ¿Cuál es el uso de Scaffoldings?
3. ¿Cómo agregar un artículo de Scaffolding en el proyecto?
¿QUÉ ES EL SCAFFOLDING EN ASP.NET MVC 5?

Scaffolding es un framework de generación de código que agrega códigos automáticamente y crea view pages y
controllers para su proyecto. El Scaffolding facilita el trabajo del desarrollador al crear controladores y view pages
para el modelo de datos. Genera códigos y páginas para la operación CRUD (Crear, Leer, Actualizar y Eliminar).
¿CÓMO UTILIZAR SCAFFOLDINGS EN ASP.NET MVC 5?

Paso 1. Abra Visual Studio y cree un nuevo proyecto ASP.NET MVC 5 ScaffoldProject .
Paso 2. Instala Entity Framework en tu proyecto. Haga clic derecho en Project Name Manage
NuGet Packages. Examine Entity Framework y haga clic en el botón Install.
Paso 3. Crea un modelo ItemListModel. Haga clic derecho sobre Model Add Class. Dé el nombre
de la clase como ItemListModel.cs y haga clic en el botón Add
Paso 4. Agrega el siguiente código a la clase ItemListModel.
Paso 5. Construir la aplicación presionando Ctrl + Shift + B .

Paso 6. Agrega un artículo de Scaffolded para este modelo. Haga clic derecho en
Controller Add New Scaffolded Item.
Paso 7. Seleccione MVC 5 Controller with views, using Entity Framework y haga clic en el botón
Add .
Paso 8. Seleccione Details de la siguiente manera:

a) Model Class: ItemListModel (ScaffoldProject.Models)
b) Data Context class: cree una nueva data context class haciendo clic en el + botón.
c) Establecer el Controller name: ItemListController
Paso 9. Ahora, puedes ver en el explorador de soluciones que ItemListController se crea con sus
vistas respectivas.
Paso 10. Ejecute su proyecto presionando F5 y vea la magia de Scaffolded Framework.

Vaya al siguiente enlace: http://localhost:3083/ItemList/
Imágenes de salida:
Paso del modelo de datos a las vistas.
1. ¿Cómo pasar los datos del modelo a la página de visualización?
2. ¿Cómo mostrar los datos del controlador para ver?
3. Pase los datos usando las propiedades View Model, ViewBag, ViewData, TempData,
Session, Dynamic, Tuples, RenderAction y Navigation.
Viewmodel: muestra múltiples valores de modelo en Vistas

1. Cómo pasar datos de múltiples modelos a vistas usando Ver clase de modelo.
2. Completa el ejemplo práctico
VIEW MODEL
VIEW MODEL no es nada, solo una clase que llama a todos los modelos en una sola clase y luego devuelve valores
para ver páginas. Se vuelve muy útil cuando tiene varios modelos y desea mostrar su valor en las páginas de una
vista.
CREAR MODELOS Y CONTROLADORES
Antes de iniciar esta sección, debe crear las siguientes clases.
ItemModels - recupera detalles del artículo
BuyersCommentsModel- Recupera Comentarios

Y una clase de controlador:
ItemCommentsController : recuperará artículos y comentarios de los modelos. Añadir algunos elementos
y comentarios en la clase Controller para reducir la complejidad. Usando el mismo método puede mostrar el valor de
la base de datos para ver las páginas.
using System;
{
public class ItemCommentsController : Controller
{
// GET: ItemComments
{
return View();
}
public ItemModel GetItemDetails()

{
ItemModel iModel = new ItemModel()
{
ID = 1,
Name = "HP Printer",
Category = "ComputerParts",
Price = 8840
};
return iModel;
}
public List<BuyersCommentsModel> GetCommentList()

{
List<BuyersCommentsModel> CommentsList = new List<BuyersCommentsModel>();
CommentsList.Add(new BuyersCommentsModel()
{ BuyersID = 1, BuyersName = "John", StarRating = "4", CommentsTitle =
"Nice Product", Comments = "I Purchased it 1 week ago and it is working fine.", Date =
Convert.ToDateTime("27 August 17") });
CommentsList.Add(new BuyersCommentsModel() {BuyersID=2, BuyersName="Nicki",
StarRating="2", CommentsTitle="Worst Product", Comments="Worst Product. Don't Buy It. I got
damaged one.", Date=Convert.ToDateTime("12 June 17") });
CommentsList.Add(new BuyersCommentsModel() {BuyersID=3, BuyersName="Serena",
StarRating="3.5", CommentsTitle="Satisfactory", Comments="Go for it. It does the same job
and have the less price", Date=Convert.ToDateTime("18 March 17") });
CommentsList.Add(new BuyersCommentsModel() {BuyersID=4, BuyersName="William",
StarRating="4.5", CommentsTitle="Superrr!!!", Comments="Don't think and buy it with
confidence.", Date=Convert.ToDateTime("11 November 16") });
return CommentsList;
}
public ActionResult ItemCommentDisplay()

{
}
}
}
2. ACCEDA A LOS DATOS DEL MODELO USANDO VIEWMODEL
Paso 1: Agrega una clase ItemCommentsViewModel en la carpeta Model.
Paso 2: Agregar highlighted de código resaltados (Línea: 42-49) en ItemCommentsController .

using System;
{
{
{
return View();
}
// *** 1. This Method contains dummy Item Details. ***

{
{
ID = 1,
Price = 8840
};
return iModel;
}
// *** 2. This Method contains dummy Comment List. ***

{
CommentsList.Add(new BuyersCommentsModel() { BuyersID = 1, BuyersName = "John", StarRating
= "4", CommentsTitle = "Nice Product", Comments = "I Purchased it 1 week ago and it is working fine.",
Date = Convert.ToDateTime("27 August 17") });
StarRating="2", CommentsTitle="Worst Product", Comments="Worst Product. Don't Buy It. I got damaged
one.", Date=Convert.ToDateTime("12 June 17") });
StarRating="3.5", CommentsTitle="Satisfactory", Comments="Go for it. It does the same job and have the
less price", Date=Convert.ToDateTime("18 March 17") });
StarRating="4.5", CommentsTitle="Superrr!!!", Comments="Don't think and buy it with confidence.",
Date=Convert.ToDateTime("11 November 16") });
}
// *** 3. This Method retrieves Items and Comments, and returns to Views.
{
ItemCommentsViewModel IBCM = new ItemCommentsViewModel();
IBCM.item = GetItemDetails();
IBCM.comments = GetCommentList();
return View(IBCM);
}
}
}
Paso 3: Haga clic con el botón derecho en Método de acción ItemCommentDisplay y seleccione
Add View...
Paso 4: establezca el valor como se muestra en esta imagen a continuación y haga clic en Add:
Paso 5: Ahora, ve a Views ItemComments ItemCommentDisplay.cshtml y añade el siguiente

código.
Paso 6: Presione F5 para ejecutar este programa y navegue hasta el siguiente enlace para ver el
resultado.
http://localhost:1233/ItemComments/ItemCommentDisplay
Pase datos utilizando Viewbag, Viewdata y Tempdata
1. ¿Qué es ViewBag, ViewData y TempData en ASP.NET MVC?
2. ¿Cómo usar ViewBag, ViewData y TempData para pasar datos del modelo a las
vistas?
CREAR MODELOS Y CONTROLADORES
Antes de iniciar esta sección, debe crear las siguientes clases de modelo y controladores. Si ya lo ha
creado en el capítulo anterior, omita la creación de estos modelos y controladores.
Crear 2 modelos de clase:

BuyersCommentsModel - Recupera Comentarios

Y una clase controlador:
ItemCommentsController : recuperará artículos y comentarios de modelos. Añada algunos elementos y comentarios
en la clase de controlador para reducir la complejidad. Usando el mismo método puede mostrar el valor de la base
de datos para ver las páginas.
using System;
{
{
{
return View();
}

{
{
ID = 1,
Price = 8840
};
return iModel;
}

{
CommentsList.Add(new BuyersCommentsModel() { BuyersID = 1, BuyersName = "John",
StarRating = "4", CommentsTitle = "Nice Product", Comments = "I Purchased it 1 week ago and
it is working fine.", Date = Convert.ToDateTime("27 August 17") });
}

{
}
}
}
VIEWBAG
ViewBag es un diccionario de objetos y se utiliza para pasar datos de los controladores a la vista. Almacena valores
en una propiedad de cadena dinámica y también necesita usar esta cadena para recuperar valores en la página de
vista. ViewBag se usa solo para solicitudes únicas y una vez que completa el valor de las vistas, se vuelve nulo. Si
ocurre alguna redirección, entonces el valor de ViewBag también se vuelve nulo. No hay encasillamiento necesario
en ViewBag.
Acceder al Modelo de Datos a la Vista
Paso 1: Vaya ItemCommentsController.cs y agregue el siguiente método de acción resaltado.
Paso 2: Haz clic derecho en Método de acción ItemCommentDisplay() y crea una View.
Paso 4: Ahora, agregue el siguiente código en la ItemCommentDisplay.cshtml página de
visualización.
Salida:
VIEWDATA
ViewData es casi igual a ViewBag y también se usa para pasar datos de los modelos / controladores
para View. Almacena los datos en el par clave-valor y también está disponible solo para la solicitud
actual. Significa que, si se produce la redirección, el valor de ViewData se vuelve nulo. Debe verificar
los tipos de datos complejos nulos y de cadena de tipos para evitar errores.
Ejemplo: acceder a los datos del modelo para ver
Paso 1: Vaya ItemCommentsController.csy agregue el siguiente método de acción highlighted.
Paso 2: Ve ItemCommentsController.cs y cambia el método de acción ItemCommentDisplay().

Salida
TEMPDATA
TempData también se usa para transferir datos de Modelos / Controladores a Views, pero proporciona más
funcionalidad que ViewBag y ViewData. TempData no se convierte en nulo cuando se produce la redirección y es
accesible en dos solicitudes continuas. Sin embargo, TempData se usa principalmente para mostrar mensajes de
error y mensajes de validación. Debe verificar los tipos de datos complejos nulos y de cadena de caracteres para
evitar errores.
acceder a los datos del modelo para ver
Paso 2: Ve ItemCommentsController.cs y cambia el ItemCommentDisplay()método de acción.

Salida
Pase datos usando Session, Tuples Y Dynamic (ExpandoObject)
1. ¿Qué son Session, Dynamic y Tuples en ASP.NET MVC?
2. Ejemplos de sesión en MVC
3. Ejemplos dinámicos en MVC
4. Ejemplos de tuplas en MVC
EJEMPLOS DE SESIÓN, TUPLAS Y DYNAMIC (EXPANDOOBJECT)

Crear modelos y controladores
Cree 2 modelos de clase:

BuyersCommentsModel - Recupera Comentarios

Y una clase de controlador:
ItemCommentsController : recuperará artículos y comentarios desde modelos. Añada algunos
elementos y comentarios en la clase de controlador para reducir la complejidad. Usando el mismo
método puede mostrar el valor de la base de datos para ver las páginas.
using System;
{
{
{
return View();
}

{
{
ID = 1,
Price = 8840
};
return iModel;
}

{
CommentsList.Add(new BuyersCommentsModel() { BuyersID = 1, BuyersName = "John",
StarRating = "4", CommentsTitle = "Nice Product", Comments = "I Purchased it 1 week ago and
it is working fine.", Date = Convert.ToDateTime("27 August 17") });
}

{
}
}
}
QUÉ ES SESSION EN ASP.NET MVC
La SESSION de ASP.NET también se usa para pasar datos entre modelos / controladores a la página View, pero su
valor no se vuelve nulo después de pasar la información hasta que se establece manualmente en nulo o caducan los
tiempos de sesión. De forma predeterminada, en ASP.NET MVC, el tiempo de sesión es de 20 minutos y puede
aumentar o disminuir el tiempo según sus necesidades. Una sesión se usa principalmente en la página de inicio de
sesión donde un usuario se considera validado hasta que la sesión caduca o el usuario hace clic en el botón de cerrar
sesión.
Paso 2: Haz clic derecho en el Método de acción ItemCommentDisplay()y crea una vista.
Paso 4: Ahora, agregue el siguiente código en la ItemCommentDisplay.cshtmlpágina de
visualización.
Salida
TUPLES: ¿QUÉ SON LAS TUPLES EN ASP.NET MVC?
Las tuples se introducen por primera vez en .NET Framework 4.0. Es un objeto de secuencia inmutable, de tamaño
fijo y ordenado. Es una estructura de datos que tiene un número y una secuencia de elementos específicos y admite
hasta de 7 a 8 elementos. Puede usar Tuples para pasar varios modelos en una sola página de vista.
Paso 1: Ve ItemCommentsController.cs y cambia el método de acción ItemCommentDisplay().
Las tuples admiten un máximo de 7 a 8 elementos; así que pase los modelos entre paréntesis Tuple<model1,
model2, model3,….model7> y luego pase el respectivo método de acción en secuencia que se asigna con el
modelo, como (function1, function2, function3,….function7) . Aquí, hice lo mismo. Solo mira este
código a continuación. Aquí he pasado mis modelos y sus respectivos métodos de acción en secuencia.
Paso 2: Ahora, agregue el siguiente código en la ItemCommentDisplay.cshtmlpágina de

visualización.
Resaltemos algún punto de este código.
1. Agregue las tuplas al comienzo de la página de vista y pase el nombre de los modelos en el
parámetro.
2. No necesita recordar el nombre de los modelos al acceder a su miembro. Necesitas utilizar

@Model.Item1, @Model.Item2, @Model.Item3…. @Model.Item7 para acceder al modelo. Aquí,
@Model.Item1representa ItemModel y
@Model.Item2 representa List<BuyersCommentsModel>
DYNAMIC (EXPANDOOBJECT)
ExpandoObjectTambién se puede utilizar para pasar datos entre modelos, controladores y vistas. El miembro de
ExpandoObject se puede agregar o quitar en tiempo de ejecución. Es de naturaleza muy flexible y dinámica, y muy
útil cuando desea mostrar la página de visualización dinámicamente en tiempo de ejecución. Discutiremos sobre
Dynamic (ExpandoObject) en detalles más adelante. Aquí, solo vea cómo usar Dynamic (ExpandoObject) para pasar
información en MVC.
Paso 1: Ve ItemCommentsController.csy cambia el método de acción ItemCommentDisplay().
Paso 2: Ahora, agregue el siguiente código en la ItemCommentDisplay.cshtml página de

visualización.
Representar La Acción Y La Propiedad De Navegación En ASP.NET
MVC
1. Qué es la acción de representación y propiedad de navegación en MVC
2. Aprenda la acción de representación con el ejemplo
3. Aprenda la propiedad de navegación con el ejemplo
En el capítulo anterior, aprendió cómo pasar datos de modelos a vistas usando Session, Tuples y
Dynamic (ExpandoObject) . En este capítulo, aprenderá a pasar datos entre modelos, controladores y
vistas utilizando la acción de renderización y la propiedad de navegación en ASP.NET MVC.
Crear modelos y controladores

Aquí, estoy creando 2 modelos de clase:
1. Usando el sistema;
2. espacio de nombres CompShop . Modelos
3. {
4. clase p ú blica ItemModel
5. {
6. ID p ú blica int { Obtener ; conjunto; }
7. cadena p ú blica Nombre { get ; conjunto; }
8. Cadena p ú blica Cat í un { Obtener ; conjunto; }
9. Precio decimal p ú blico { Obtener ; conjunto; }
10. }
11. }
CompradoresComentariosModelo - Recupera Comentarios
1. utilizando el sistema;
3. {
4. Clase p ú blica CompradoresComentariosModelo
5. {
6. public int BuyersID { get ; conjunto; }
7. cadena p ú blica BuyersName { get ; conjunto; }
8. cadena p ú blica StarRating { get ; conjunto; }
9. cadena p ú blica ComentariosTítulo { conseguir ; conjunto; }
10. cadena p ú blica Comentarios { conseguir ; conjunto; }
11. public DateTime Date { get ; conjunto; }
12. }
13. }
Y 1 clase de controlador:
ItemCommentsController : recuperará artículos y comentarios de modelos. He añadido algunos
elementos y comentarios en la clase de controlador para reducir la complejidad. Usando el mismo
método puede mostrar el valor de la base de datos para ver las páginas.
2. Utilizando el sistema . Colecciones . genérica ;
3. Utilizando el sistema . Web . Mvc ;
4. utilizando CompShop . Modelos ;
5.
6. espacio de nombres CompShop . Controladores
7. {
8. Clase p ú blica ItemCommentsController : Controlador
9. {
10. // GET: ItemComments
11. Í ndice de ActionResult p ú blico ()
12. {
13. volver Ver ();
14. }
15.
16. Public ItemModel GetItemDetails ()
17. {
18. ItemModel iModel = new ItemModel ()
19. {
20. ID = 1 ,
21. Nombre = "Impresora HP" ,
22. Categor í a = "ComputerParts" ,
23. Precio = 8840
24. };
25. devuelve iModel ;
26. }
27.
28. Lista p ú blica < BuyersCommentsModel > GetCommentList ()
29. {
30. Lista < BuyersCommentsModel > CommentsList = new List < BuyersCommentsModel > ();
31. Lista de comentarios . Add ( nuevo BuyersCommentsModel () { BuyersID = 1 , BuyersName = "John" , Sta
rRating = "4" , CommentsTitle = "Nice Product" , Comments = "Lo compré hace 1 semana y está funcionando bi
en bien" , Fecha = Convert . ToDateTime ( "27 de agosto de 17" )});
32. Lista de comentarios . Agregar ( nuevo BuyersCommentsModel () { BuyersID = 2 , BuyersName = "Nicki"
, StarRating = "2" , CommentsTitle = "Worst Product" , Comments = "Worst Product. No lo compre. Me dañé."
, Fecha = Convert . ToDateTime ( "12 de junio de 17" )});
33. Lista de comentarios . Add ( nuevo BuyersCommentsModel () { BuyersID = 3 , BuyersName = "Serena" , S
tarRating = "3.5" , CommentsTitle = "Satisfactory" , Comments = "Adelante. Hace el mismo trabajo y tiene e
l menor precio" , Fecha = Convert . ToDateTime ( "18 de marzo de 17" )});
34. Lista de comentarios . Add ( nuevo BuyersCommentsModel () { BuyersID = 4 , BuyersName = "William" ,
StarRating = "4.5" , CommentsTitle = "Superrr !!!" , Comments = "No piense y compre con confianza." , Fech
a = Convert . ToDateTime ( "11 de noviembre 16" )});
35.
36. devuelve la lista de comentarios ;
37. }
38.
39. Public ActionResult ItemCommentDisplay ()
40. {
41. }
42. }
43. }
RENDERIZAR ACCIÓN
Qué es Render Action
La acción de representación es un método de controlador especial que incluye una vista parcial en la
página de vista principal. Si desea mostrar varios modelos en una sola página de vista, puede usar los
métodos de acción de renderizado para hacerlo.
Paso 1: Cree una página parcial para cada modelo y visualice la información de los modelos en esa
página parcial.
Paso 2: ahora llame a todas esas páginas parciales dentro de una página de vista principal usando el
Método de acción de renderizado.
Ejemplo de acción de render
Paso 1: Vaya ItemCommentsController.csy agregue el siguiente método de acción resaltado.
1. Public ActionResult ItemCommentDisplay ()

2. {
3. volver Ver ();
4. }
5.
6. PartialViewResult RenderItem p ú blico ()
7. {
8. devuelve PartialView ( GetItemDetails ());
9. }
10. p ú blico PartialViewResult RenderComment ()
11. {
12. devolver PartialView ( GetCommentList ());
13. }
Paso 2: Haga clic derecho RenderItem()y seleccione Agregar vista.

Paso 3: Seleccione Plantilla vacía y elija Modelo de elemento para esta vista parcial.
Paso 4: Abra RenderItem.cshtmlla vista parcial y agregue el siguiente código en ella.
1. @model CompShop.Models.ItemModel CompShop . Modelos . ItemModel

2.
3. < div style = "background-color: burlywood; relleno: 5px;" >
4. < h1 style = "color: green" > @Model . Nombre </ h1 >
5. <b> Categoría : < / b> <br @ Model.Category />
6. <b> Precio : </ b > @Model . Precio
7. < hr />
8. </ div >
Paso 5: Agregue la misma vista parcial para el RenderComment()método de acción.

Paso 6: Ahora agregue una página de vista principal para el ItemCommentDisplay()Método de acción.
Haga clic derecho en el ItemCommentDisplay()método de acción y haga clic en Agregar vista .
Paso 7: Agregue el siguiente código en la ItemCommentDisplay.cshtmlpágina.
1. @ {
2. Html . RenderAction ( "RenderItem" );
3. Html . RenderAction ( "RenderComment" );
4. }
Paso 8: Presiona F5 y ejecuta el proyecto.
http: // localhost: 1233 / ItemComments / ItemCommentDisplay

PROPIEDAD DE NAVEGACIÓN
La propiedad de navegación enlaza dos o más modelos relacionados. Si dos modelos están
relacionados, puede vincular un modelo a otro modelo como propiedad. Al vincular los modelos como
propiedad, puede acceder al miembro de ambos modelos llamando solo al modelo principal.
Aquí, tengo dos modelos:

1. ItemModel
2. CompradoresCommentsModel
que enlazaréBuyersCommentsModel como propiedad en el interior ItemModel.
Paso 1: Abra ItemModele inserte la siguiente línea de código:
4. {
5. clase p ú blica ItemModel
6. {
9. Cadena p ú blica Cat í un { Obtener ; conjunto; }
10. Precio decimal p ú blico { Obtener ; conjunto; }
11.
12. // Agregar propiedad de navegación
13. Lista p ú blica < BuyersCommentsModel > Comentarios { get ; conjunto; }
14. }
15. }
Paso 2: Vaya ItemCommentController.csy actualice la línea resaltada GetItemDetails() y el

ItemCommentDisplay()Método de acción.
GetItemDetails
1. Public ItemModel GetItemDetails ()

2. {
3. ItemModel iModel = new ItemModel ()
4. {
5. ID = 1 ,
6. Nombre = "Impresora HP" ,
7. Categoría = "ComputerParts" ,
8. Precio = 8840 ,
9. Comentarios = GetCommentList () = GetCommentList ()
10. };
11. devuelve iModel ;
12. }
ItemCommentDisplay ()
1. Public ActionResult ItemCommentDisplay () ActionResult ItemCommentDisplay ()

2. {
3. ItemModel Item = GetItemDetails ();
4. volver Ver ( Artículo );
5. }
Paso 3: Vaya a la ItemCommentDisplay.cshtmlpágina y actualícelo con el siguiente código.
1. @model CompShop.Models.ItemModel CompShop . Modelos . ItemModel

2. <p>
3. <! - DETALLES DEL ARTÍCULO ->
4. < div style = "background-color: burlywood; relleno: 5px;" >
5.
6. < h1 style = "color: green" > @Html . DisplayFor ( i => i . Name ) </ h1 >
7. <b> Categoría : < / b> @ Html.DisplayFor (i => i.Category) <br />
8. <b> Precio : </ b > @Html . DisplayFor ( i => i . Precio )
9.
10. < hr />
11. </ div >
12. <! - COMENTARIOS DE CARGA ->
13. <h2> Comentarios </ h2 >
14.
15. @foreach ( comentarios var en el modelo . Comentarios )
16. {
17. <h4> <b> @comments . ComentariosTítulo < / b> </ h4 >
18. <b> @comments . BuyersName < / b> <br />
19. <b> Fecha : < / b> @ comments.Date <span> | </ span >
20. <b> Estrella Clasificación : < /b>@comments.StarRating<span>/ 5 </ envergadura >
21. < Br />
22. <i> @comments . Comentarios </ i >
23. < hr />
24. }
25. </ p >
Paso 4: Presiona F5 para ejecutar el proyecto.

http: // localhost: 1233 / ItemComments / ItemCommentDisplay
RESUMEN
En este capítulo, aprendió cómo pasar datos de múltiples modelos a una página de vista única usando
la acción de representación y la propiedad de navegación . En esta sección completa, le enseñé
varias formas de pasar datos de múltiples modelos a una sola página de vista. Espero que no enfrente
ningún problema en el futuro cuando se trata de pasar datos entre modelos y vistas. En el siguiente
capítulo, he agregado los temas muy importantes de ASP.NET MVC y es Trabajar con formularios en
ASP.NET MVC. Si cubre el siguiente capítulo, podrá comunicarse con la base de datos utilizando
formularios en ASP.NET MVC.
4 Maneras De Crear Un Formulario En ASP.NET MVC

1. ¿Cómo crear formularios en ASP.NET MVC?

2. 4 formas diferentes de crear formularios MVC.
3. ¿Cómo acceder a los datos de formularios en los controladores?
Las formas son algo muy esencial y básico que todo programador tiene que aprender. En este tutorial,
le enseñaré 4 formas diferentes de crear formularios MVC de ASP.NET con facilidad.
i. Formularios - Tipo débil (Sincrónico)

ii. Formularios - fuertemente tipados (sincrónicos)
iii. Formularios - AJAX fuertemente tipado (asíncrono)
iv. Formularios - HTML, AJAX y JQUERY
Preparar
Paso 1: Crear un nuevo ASP.NET MVC Project MvcForms. Ir al archivo Nuevo Proyecto . Si no sabe
cómo crear un nuevo proyecto mvc, consulte este capítulo.
Crear nuevo proyecto ASP.NET MVC 5
Paso 2: Crea una clase modelo StudentModel.cs. Haga clic derecho en el modelo Añadir Clase .
Paso 3: Abra StudentModel.cs y agregue el siguiente código en él.
1. espacio de nombres MvcForms.Models

2. {
3. clase p ú blica StudentModel
4. {
7. public bool Addon { get ; conjunto; }
8. }
9. }
1. FORMAS - DÉBILMENTE MECANOGRAFIADAS
Esta es la forma más fácil y rápida de crear formularios en MVC.
1. Ir a Vistas Casa Index.cshtml y actualízalo con el siguiente código.

1. <h4 style = "color: purple">
2. <b> ID: </b> @ ViewBag.ID <br />
3. <b> Nombre: </b> @ ViewBag.Name <br />
4. <b> Complemento: </b> @ ViewBag.Addon
5. </h4>
6. <hr />
7. <h3> <b> Formularios: tipificados débilmente </b> </h3>
8.
9. <form action = "form1" method = "post" >
10. <table>
11. <tr>
12. <td> Identificar ID: </td>
13. <td> <input type = "text" name = "txtId" /> </td>
14. </tr>
15. <tr>
16. <td> Introduzca el nombre: </td>
17. <td> <input type = "text" name = "txtName" /> </td>
18. </tr>
19. <tr>
20. <td> Complemento: </td>
21. <td> <input type = "checkbox" name = "chkAddon" /> </td>
22. </tr>
23. <tr>
24. <td colspan = "2" > <input type = "submit" value = "Submit Form" /> </td>
25. </tr>
26. </table>
27. </form>
2. Ahora, agregue un método de acción para este formulario enHomeController.cs
1. [HttpPost]
2. public ActionResult form1 ( int txtId , string txtName , string chkAddon )
3. {
4. ViewBag . Id = txtId ;
5. ViewBag . Nombre = txtName ;
6. if ( chkAddon ! = null )
7. ViewBag . Addon = "Seleccionado" ;
8. m á s
9. ViewBag . Addon = "No seleccionado" ;
10.
11. Vista de retorno ( "Índice" );
12. }
Salida:
Entendamos
1. En el formulario <form action="form1" method=”post”>, form1 es el método de acción que se

ejecuta cuando los formularios envían datos a HomeController utilizando el método de publicación. En
el siguiente capítulo, aprenderá acerca de cómo publicar y obtener el método en mvc.
2. En el <input type="text" name="txtId" />, la propiedad name=”txtId”debe ser la misma que el

nombre del parámetro en el método de acción del formulario 1.
3. CheckBox envía "on"si se selecciona lo contrario envía null.

Ventaja y desventaja de la forma débilmente mecanografiada
Ventaja:
1. Es fácil crear un formulario utilizando el mecanismo de escritura débil.
2. Generalmente se usa cuando se necesita crear un formulario con uno o dos elementos de entrada.
Desventaja:
1. Porque, no está fuertemente tipado, por lo que IntelliSense no te ayuda.
2. Tener mayor probabilidad de obtener mensajes de error de excepción y de tiempo de ejecución.
3. Muy difícil de administrar cuando los formularios tienen múltiples elementos de entrada y controles.
4. Es muy torpe cuando necesita agregar o eliminar algunos elementos de entrada.
2. FORMAS: FUERTEMENTE TIPADAS
En este método, enviamos objetos (modelo) en lugar de enviar cada elemento como parámetro. Es fácil
de mantener porque no necesita recordar cada elemento de entrada e IntelliSense le mostrará
automáticamente cada elemento.
Paso 1: Ir Index.cshtmly actualizar el código de esta manera.
1. @model MvcForms.Models.StudentModel
2. < h4 style = "color: purple" >
3. <b> ID : < / b> @ ViewBag.ID <br />
4. <b> Nombre : < / b> @ ViewBag.Name <br />
5. <b> Complemento : </ b > @ViewBag . Añadir
6. </ h4 >
7. < hr />
8. <h3> <b> Formas : fuertemente tipadas < / b> </ h3 >
9.
10. @using ( Html . BeginForm ( "Form2" , "Home" , FormMethod . Post ))
11. {
12. <table>
13. <tr>
14. <td> Introduzca ID : </ td >
15. <td> @Html . TextBoxFor ( m => m . Id ) </ td >
16. </ tr >
17. <tr>
18. <td> Introduzca el nombre : </ td >
19. <td> @Html . TextBoxFor ( m => m . Nombre ) </ td >
20. </ tr >
21. <tr>
22. <td> Complemento : </ td >
23. <td> @Html . CheckBoxFor ( m => m . Addon ) </ td >
24. </ tr >
25. <tr>
26. < td colspan = "2" > < input type = "submit" value = "Submit Form" /> </ td >
27. </ tr >
28. </ table >
Paso 2: Ve HomeController.csy agrega el siguiente método de acción.
1. [HttpPost]
2. P ú blico ActionResult Form2 ( Models . StudentModel sm )
3. {
4. ViewBag . Id = sm . Id ;
5. ViewBag . Nombre = sm . Nombre ;
6. if ( sm . Addon == true )
7. ViewBag . Addon = "Seleccionado" ;
8. m á s
9. ViewBag . Addon = "No seleccionado" ;
10.
12. }
Salida Entendámoslo en el Formulario 1. Se utiliza para crear formularios fuertemente tipados. Tiene
3 parámetros que denota:
@using (Html.BeginForm("Form2", "Home", FormMethod.Post))

yo. Form2 : Es el Nombre del Método de Acción
ii. Inicio : Es Nombre del Controlador
iii. FormMethod.Post : denota que todos los datos se enviarán al controlador utilizando el método Post.
iv. @Html.TextBoxFor(m => m.Id)Esto es Html Helper. He creado un cuadro de texto usando mvc htmo
helper y está fuertemente vinculado con la identificación.
v. m => m.Id es una expresión lambda. Significa que m es una instancia de StudentModel.
En el Método de Acción Form2 enHomeController
public ActionResult Form2(Models.StudentModel sm)

En este Método de Acción, he pasado el objeto de StudentModelclase.
3. FORMULARIOS - AJAX FUERTEMENTE TIPADO (ASÍNCRONO)
El formulario AJAX asíncrono es una forma muy mágica de enviar datos al controlador sin que ocurra
una carga de página. Los formularios AJAX asíncronos simplemente devuelven los datos a los
controladores y actualizan solo esa parte de la página, que debe mostrar la salida.
Para que esto suceda, utilizaremos JQuery-Unobstrusive-AJAX . Esta es una gran característica que
se lanza en MVC 3. Le ayuda a crear el formulario AJAX sin escribir un montón de código javascript.
Antes de crear el formulario AJAX asíncrono, debe agregar JQuery-Unobstrusive-AJAX en su
proyecto. Añadir es muy fácil y solo sigue los pasos.
Añadiendo JQuery-Unobstrusive-AJAX
Paso 1: haga clic con el botón derecho en el nombre de su proyecto en el Explorador de soluciones
y haga clic en Administrar paquetes Nuget ...
Paso 2: Vaya a Examinar y busque ajax . Busque e instale Microsoft-JQuery-Unobstrusive-Ajax .
Paso 3: Después de instalar esto puedes verlo en la carpeta Script.
Ahora, tu proyecto está listo para usar JavaScript y AJAX .
Crear Formularios y Controlador.

Paso 1: Crear formulario enIndex.cshtml
1. @model MvcForms.Models.StudentModel MvcForms . Modelos . StudentModel

2. < script src = "@ Url.Content (" ~ / Scripts / jquery - 1.10 . 2.min . js ")" type = "text / javascript" >
</ script >
3. < script src = "@ Url.Content (" ~ / Scripts / jquery . unobtrusive - ajax . js ")" type = "text / javascr
ipt" > </ script >
4.
5. < h4 id = "id1" style = "color: purple" > </ h4 >
6. < hr />
7. <h3> <b> Formularios - AJAX ( asíncrono ) fuertemente tipado < / b> </ h3 >
8. @using ( Ajax . BeginForm ( "Form3" , "Inicio" , nuevas AjaxOptions
9. {
10. HttpMethod = "POST" ,
11. UpdateTargetId = "id1" ,
12. LoadingElementId = "LoadingImage" ,
13. OnSuccess = "onSuccess_Message" ,
14. OnFailure = "onFailure_Message"
15.
16. }))
17. {
18. <table>
19. <tr>
22. </ tr >
23. <tr>
26. </ tr >
27. <tr>
28. <td> Complemento : </ td >
29. <td> @Html . CheckBoxFor ( m => m . Addon ) </ td >
30. </ tr >
31. <tr>
32. < td colspan = "2" > < input type = "submit" value = "Submit Form" /> </ td >
33. </ tr >
34. </ table >
35. < div id = "LoadingImage" style = "display: none" > Loading ... </ div >
36. < div id = "onSuccess_Message" > </ div >
37. < div id = "onFailure_Message" > </ div >
38. }
Entendamos este código:

1. Agregue estos dos scripts en el proyecto.
1. <script src = "@ Url.Content (" ~ / Scripts / jquery-1.10.2.min.js ")" type = "text / javascript"> </scrip
t>
2. <script src = "@ Url.Content (" ~ / Scripts / jquery . unobtrusive-ajax . js ")" type = "text / javascript
" > </script>
Debe verificar la versión correcta de javascript instalado en su proyecto. Jquery-1.xx.x .
2.
1. @using (Ajax.BeginForm ("Form3", "Home", nuevas AjaxOptions ( Ajax . BeginForm ( "Form3" , "Inicio" , nuev
as AjaxOptions
2. {
3. HttpMethod = "POST" ,
4. UpdateTargetId = "id1" ,
5. LoadingElementId = "LoadingImage" ,
6. OnSuccess = "onSuccess_Message" ,
7. OnFailure = "onFailure_Message"
8.
9. }))
a. Ajax.BeginFormSe utiliza para crear formularios AJAX asíncronos.

segundo. Form3Es un método de acción.
do. Homees un nombre de controlador.
re. HttpMethod = “POST”indica que los datos se enviarán al servidor utilizando el método POST.
mi. UpdateTargetIdactualiza el área que se actualizará y mostrará la salida. En mi programa, <h4
id="id1" style="color:purple"></h4> se actualizará y mostrará la salida.
F. LoadingElementIdmuestra la imagen de carga o el mensaje de carga mientras AJAX está publicando
y recuperando datos de modelos o controladores.
sol. OnSuccessFunciona cuando la tarea se completa con éxito.
h. OnFailureFunciona cuando la tarea falla.
Paso 2: Ve HomeControllery agrega el siguiente método de acción.
1. [HttpPost]
2. Public ActionResult Form3 ( Models . StudentModel sm )
3. {
4. if ( ModelState . IsValid )
5. {
6. Sistema . Texto . StringBuilder sb = nuevo sistema . Texto . StringBuilder ();
7. sb . Añadir ( "ID:" + sm . Id + "<br />" );
8. sb . Agregue ( "Nombre:" + sm . Nombre + "<br />" );
9. sb . Append ( "Addon:" + sm . Addon + "<br />" );
10. Contenido de retorno ( sb . ToString ());
11. }
12. más
13. {
15. }
16. }
4. FORMAS HTML PURAS CON AJAX Y JQUERY
En este método, no solo puede enviar datos desde los controles de entrada, sino que también puede
usar elementos html como <p> ... </p>, <span> ... </span> para enviar datos a los controladores. Esto
es pura consulta de JQuery y AJAX.
Crear formularios
Paso 1. Ve Index.cshtmly crea una forma como esta.
1. <h3> <b> Formularios - HTML puro y JQUERY </b> </h3>Formularios - HTML puro y JQUERY </b> </h3>
2.
3. <table>
4. <tr>
5. <td> Introduzca ID: </td>
6. <td> <input type = "text" id = "Id" /> </td>
7. </tr>
8. <tr>
10. <td> <input type = "text" id = "Name" /> </td>
11. </tr>
12. <tr>
14. <td> <input type = "checkbox" id = "Addon" /> </td>
15. </tr>
16. <tr>
17. <td colspan = "2" > <button onclick = " submit () " > Enviar formulario </button> </td>
18. </tr>
19. </table>
20.
21. <h4 style = " color : purple " id = "output" > </h4>
22.
23. <script src = "~ / Scripts / jquery-1.10.2.min.js" type = "text / javascript" > </script>
24. <script>
25. función submit () {
26. var data = {
27. Id : $ ( '#Id' ). val (),
28. Nombre : $ ( '#Nombre' ). val (),
29. Addon : $ ( '#Addon' ). es ( ': marcado' )
30. };
31.
32. $ . post ( "/ Home / Form4" , { sm : data }, function () { alert ( 'Successfully Saved' ) });
33. }
34. </script>
Paso 2: Ve HomeControllery agrega el siguiente método de acción.
1. [HttpPost] HttpPost ]
2. pública ActionResult Form4 ( StudentModel sm )
3. {
4. string value = "ID:" + Convert . ToString ( sm . Id )
5. + "<br /> Nombre:" + sm . Nombre
6. + "<br /> Complemento:" + Convertir . ToString ( sm . Addon );
7.
8. cadena s = "$ ('# output'). html ('" + value + "');" ;
9. devuelve JavaScript ( s );
10. }

1. Creé un formulario usando el control HTML puro y llamamos una submit()función en el
onclickevento de botón .
2. Debe asignar la variable y el miembro de acuerdo con sus modelos y miembros de controladores.
Vea la imagen de abajo. 3. Método de envío de datos de formulario al controlador.
$.post()
a. /Home/Form4- Home es el nombre del controlador y Form4 es un método de acción.
segundo. sm: data- smEs un objeto de StudenModelen Form4 Action Method.
RESUMEN
En este tutorial, aprendió 4 formas diferentes de crear un formulario y enviar datos al controlador. Todas
estas 4 formas se utilizan ampliamente en MVC y espero que ahora puedan crear un formulario en
ASP.NET MVC. En el siguiente capítulo, aprenderá el objeto FormCollection en detalle con el ejemplo
de programación. Los objetos FormCollection facilitan mucho el trabajo al recopilar datos de formulario
en el controlador.
Objeto FormCollection En ASP.NET MVC Con Ejemplo

1. Qué es el objeto FormCollection
2. Cómo recuperar datos de formulario utilizando FormCollection en MVC 5
3. Ejemplo de programación de objeto FormCollection
¿QUÉ ES EL OBJETO FORMCOLLECTION?
Un objeto FormCollection se utiliza para recuperar valores de entrada de formulario en el método de

acción. En el capítulo anterior, expliqué 4 formas diferentes de crear formularios y recopilar datos de
formularios en el método de acción. El objeto FormCollection facilita el trabajo de los programadores y
se puede acceder fácilmente a los datos de formularios mediante el método de acción.
Ejemplo de colección de formularios - Recuperar datos de formulario
Paso 1: crear un nuevo proyecto ASP.NET MVC o abrir un proyecto existente.

Paso 2: crea un nuevo modelo StudentModel.csy agrega el siguiente código en él.

2. {
4. {
7. public bool Addon { get ; conjunto; }
8. }
9. }
Paso 3: Ir a Vistas Casa Index.cshtml y añada el siguiente código para crear el formulario.
1. <h3> <b> Formularios - Objetos de colección de formularios </b> </h3>

2. @using (Html.BeginForm ("Enviar", "Inicio", FormMethod.Post))
3. {
4. <table>
5. <tr>
7. <td> @ Html.TextBox ("Id") </td>
8. </tr>
9. <tr>
11. <td> @ Html.TextBox ("Nombre") </td>
12. </tr>
13. <tr>
15. <td> @ Html.CheckBox ("Addon", false) </td>
16. </tr>
17. <tr>
18. <td colspan = "2" > <input type = "submit" value = "Submit" > </td>
19. </tr>
20. </table>
21. }
22. <h4 style = " color : purple " >
23. ID: @ ViewBag.Id <br />
24. Nombre: @ ViewBag.Name <br />
25. Complemento: @ ViewBag.Addon
26. </h4>
Paso 4: Crea el siguiente método de acción en HomeController
1. [HttpPost]
2. Public ActionResult Submit ( FormCollection fc )
3. {
4. ViewBag . Id = fc [ "Id" ];
5. ViewBag . Nombre = fc [ "Nombre" ];
6. bool chk = Convertir . ToBoolean ( fc [ "Addon" ]. Split ( ',' ) [ 0 ]);
7. ViewBag . Addon = chk ;
8.
10. }
Paso 5: Ejecute su proyecto. Entendamos este código 1. Creé formularios MVC simples usando
HTML Helper 2. En el Método de acción Enviar, he inicializado el objeto FormCollection . 3. Se puede
acceder al valor de FormCollection dando control de entrada o número de índice . 4. Si no va a dividir
el valor booleano, obtendrá ambos resultados, por eso reuní el valor de la casilla de verificación en la
variable de tipo booleano y los dividí.
fc
"id"
"true, false"
bool chk = Convert.ToBoolean(fc["Addon"].Split(',')[0]);
RESUMEN
En este capítulo, traté de enseñarle el objeto FormCollection con un ejemplo fácil y completo. En el
siguiente capítulo, aprenderá las técnicas de validación de formularios en ASP.NET MVC.
ASP.NET MVC 5 - Método HTTPGET Y HTTPPOST Con Ejemplo

1. ¿Qué son los métodos HTTPGET y HTTPPOST en MVC?
2. ¿Cuáles son las diferencias entre HttpGet y HttpPost Method?
3. Aprenda HttpGet con el ejemplo de programación
4. Aprenda HttpPost con el ejemplo de programación
¿Qué son los métodos HttpGet y HttpPost en MVC?

HttpGet y HttpPost, ambos son el método para publicar datos de clientes o datos de formularios en el
servidor. HTTP es un protocolo de transferencia de hipertexto que está diseñado para enviar y recibir
datos entre el cliente y el servidor utilizando páginas web. HTTP tiene dos métodos que se utilizan para
publicar datos de páginas web en el servidor. Estos dos métodos son HttpGet y HttpPost.
HTTPGET
El método HttpGet envía datos utilizando una cadena de consulta. Los datos se adjuntan a la URL y es
visible para todos los usuarios. Sin embargo, no es seguro pero es rápido y rápido. Se utiliza
principalmente cuando no está publicando datos confidenciales en el servidor como nombre de usuario,
contraseña, información de la tarjeta de crédito, etc.
Algún hecho sobre el método HttpGet
1. I t es rápido y rápido, pero no seguro.

2. I t es el método por defecto.
3. B ebido a que los datos del formulario adjunto en la cadena de consulta, por lo que los datos son
visibles para otros usuarios.
4. I T utiliza método pila para el paso de forma variable.
5. D ata está limitado a la longitud máxima de la cadena de consulta.
6. I t es muy útil cuando los datos no es sensible.
7. Yo t crea URL que es fácil de leer.
8. I T puede transportar datos de texto solamente.
Ejemplo
StudentModel.cs

2. {
4. {
7. }
8. }
Index.cshtml Formar
1. <h3> <b> Formularios - Método HTTPGET </b> </h3>

2. @using (Html.BeginForm ("Enviar", "Inicio", FormMethod.Get))
3. {
4. <table>
5. <tr>
8. </tr>
9. <tr>
12. </tr>
13. <tr>
15. </tr>
16. </table>
17. }
21. </h4>
HomeController
1. [HttpGet]
2. Public ActionResult Submit ( int id , string name )
3. {
4. ViewBag . Id = id ;
5. ViewBag . Nombre = nombre ;
7. }
Cuando ejecute la aplicación y pase el valor con el método HttpGet, verá que los datos se adjuntan a la
URL mediante la cadena de consulta.
http: // localhost: 2709 / Inicio / Enviar?Id=1&Name=Diablo

En este enlace anterior, los datos se pasan utilizando una cadena de consulta porque el botón de envío
utilizó el Método HttpGet para publicar datos. Puedes ver que Id = 1 & Name = Diablo en URL.
Imagen de salida
HTTPPOST
El método HTTPPost oculta la información de la URL y no vincula los datos a la URL. Es más seguro
que el método HttpGet pero es más lento que HttpGet. Solo es útil cuando está pasando información
confidencial al servidor.
Algún hecho sobre el método HttpPost
1. D ata se envía a través del método HttpPost, no es visible para el usuario.

2. I t es más asegurada pero más lento que HttpGet.
3. I T utiliza la pila de método para el paso de forma variable.
4. No tiene restricciones para pasar datos y puede publicar variables de formulario ilimitadas.
5. I T se utiliza cuando se envían datos críticos.
6. Puedo llevar tanto datos de texto como binarios.
Ejemplo
StudentModel.cs
1. espacio de nombres MvcForms.Models MvcForms . Modelos

2. {
3. clase pública StudentModel
4. {
5. ID pública int { obtener ; establecer ; }
6. cadena pública Nombre { get ; establecer ; }
7. }
8. }
Index.cshtml Formar
1. <h3> <b> Método HTTPPost </b> </h3>Método HTTPPost </b> </h3>

2. @using (Html.BeginForm ("Enviar", "Inicio", FormMethod.Post))
3. {
4. <table>
5. <tr>
8. </tr>
9. <tr>
12. </tr>
13. <tr>
15. </tr>
16. </table>
17. }
21. </h4>
HomeController.cs
1. [HttpPost] HttpPost ]
2. pública ActionResult Enviar ( FormCollection fc )
3. {
4. ViewBag . Id = fc [ "Id" ];
5. ViewBag . Nombre = fc [ "Nombre" ];
7. }
Mira esta estructura de URL. Notará que no hay datos adjuntos a la URL.
http: // localhost: 2709 / Inicio / Enviar

salida
Diferencia entre HttpGet y HttpPost Método
1. el HTTPGet método es el predeterminado, mientras que debe especificar el HTTPPostatributo si está
publicando datos utilizando el HTTPPostmétodo.
2. el HTTPGet método crea una cadena de consulta del par nombre-valor, mientras que el
HTTPPostmétodo pasa los pares nombre y valor en el cuerpo de la solicitud HTTP.
3. la HTTPGet solicitud tiene una longitud limitada y, en su mayoría, está limitada a 255 caracteres,
mientras que la HTTPPostsolicitud no tiene un límite máximo.
4. HTTPGet es comparativamente más rápido que HTTPPost. HTTPPosttoma tiempo extra para
encapsular los datos.
5. HTTPGet solo puede llevar datos de cadena, mientras que HTTPPostpuede llevar datos tanto de
cadena como binarios.
6. el HTTPGet método crea una url legible para que pueda ser almacenado en caché y marcado,
mientras que dicha facilidad no está disponible enHTTPPost método.
RESUMEN
En este capítulo, traté de explicar los métodos HTTPGET y HTTPPOST con un ejemplo. También he
explicado el hecho y las diferencias entre estos dos métodos. Espero que ahora puedas entender dónde
usar los métodos HttpGet y HttpPost. En el siguiente capítulo, aprenderá el enlace de modelos en
ASP.NET MVC 5.
Cómo Funciona El Enlace De Modelos En ASP.NET MVC Con Ejemplos

1. ¿Qué es Model Binding en MVC?
2. Cómo funciona el enlace de modelos

3. Ejemplo de programación
¿QUÉ ES EL ENLACE DE MODELO EN MVC?
¿Alguna vez se ha preguntado cómo los datos del formulario se vinculan automáticamente con las
propiedades del modelo? Veamos la imagen de abajo:
Has notado lo siguiente:
1. Es un código mucho más limpio y no hay codificación de fantasía.

2. No es necesario el tipo de fundición.
3. No es necesario recordar las propiedades del modelo porque aparece en IntelliSense.
4. Añadir y eliminar propiedades del modelo es fácil.
El enlace de modelos hace que todas estas tareas sean fáciles. Simplemente, el enlace del modelo
significa vincular su control de entrada a las propiedades respectivas del modelo y una vez que esté
vinculado, disfrute de la potencia y la simplicidad de ASP.NET MVC. El enlace del modelo asigna los
datos entrantes a las propiedades del modelo correspondiente.
En este tutorial, analizaré varias técnicas de enlace de modelos que lo ayudarán a acceder a los datos
de entrada en modelos y controladores.
1. Sin enlace
2. Enlace simple
3. Enlace de clase
4. Enlace complejo
5. Enlace de FormCollection
6. Atributo de enlace
NO VINCULANTE
Sin vinculación significa acceder a los datos del formulario directamente sin vincular el formulario a un
modelo específico.
Ejemplo:
Modelo: StudentModel.cs
1. espacio de nombres MvcForms . Modelos

2. {
4. {
7. }
8. }
Ver: Index.cshtml
1. <h2> Formas Mvc - Encuadernación de modelo </h2>

2. @using (Html.BeginForm ())
3. {
4. <table>
5. <tr>
8. </tr>
9. <tr>
12. </tr>
13. <tr>
15. </tr>
16. </table>
17. }
21. </h4>
Controlador: HomeController.cs
1. Índice de ActionResult público ()

2. {
3. si ( Solicitud . Formulario . Recuento > 0 )
4. {
5. ViewBag . Id = Solicitud . Formulario [ "Id" ];
6. ViewBag . Nombre = Solicitud . Forma [ "Nombre" ];
8. }
9. volver View ();
10. }
2. ENCUADERNACIÓN SIMPLE
En el enlace simple, pase el parámetro en el método de acción con el mismo nombre que las
propiedades del modelo y MVC Default Binder asignará automáticamente el método de acción correcto
para la solicitud entrante.
1. Índice de ActionResult público ( Id de int , Nombre de cadena )

2. {
3. ViewBag . Id = Id ;
4. ViewBag . Nombre = Nombre ;
6. }
3. ENLACE DE CLASE
En Class Binding, pase el modelo como parámetro en el método de acción y luego acceda a su variable
miembro completa.
1. Índice de ActionResult público ( StudentModel sm )

2. {
6. }
4. ENCUADERNACIÓN COMPLEJA
El enlace complejo significa aplicar múltiples modelos relacionados en una sola vista. Aquí, en este
ejemplo, le mostraré cómo enlazar varios modelos en una sola vista.
Paso 1: Crea dos modelos de clase así.

Modelo: StudentModel.cs

2. {
4. {
7.
8. pública CourseModel courseModel { llegar ; establecer ; }
9. }
10. }
Modelo: CourseModel.cs

2. {
3. clase pública CourseModel
4. {
6. Cadena pública Curso { get ; establecer ; }
7. Cadena pública Duración { obtener ; establecer ; }
8. }
9. }
He añadido CourseModelcomo una propiedad en StudentModel, por lo que StudentModeltiene derecho

a acceder a la CourseModelpropiedad.
Paso 2: Crea una forma así.
Ver: Index.cshtml
1. @model MvcForms . Modelos . StudentModel

2. <h2> MVC Formas - Modelo Encuadernación </ h2 >
3. @using ( Html . BeginForm ())
4. {
5. <table>
6. <tr>
9. </ tr >
10. <tr>
13. </ tr >
14. <tr>
15. <td> Introduce el curso : </ td >
16. <td> @Html . TextBoxFor ( m => m . CourseModel . Course ) </ td >
17. </ tr >
18. <tr>
19. <td> Introduzca la duración : </ td >
20. <td> @Html . TextBoxFor ( m => m . CourseModel . Duración ) </ td >
21. </ tr >
22. <tr>
23. < td colspan = "2" > < input type = "submit" value = "Submit" > </ td >
24. </ tr >
25. </ table >
26. }
27. < h4 style = "color: purple" >
28. ID : @ViewBag . Id < br />
29. Nombre : @ViewBag . Nombre < br />
30. Curso : @ViewBag . Curso < br />
31. Duración : @ViewBag . Duración < br />
32. </ h4 >
Paso 3: Finalmente, el Método de Acción.
1. [ HttpGet ]
3. {
4. volver View ();
5. }
6.
7. [ HttpPost ]
8. Índice de ActionResult público ( StudentModel sm )
9. {
12. ViewBag . Curso = sm . CursoModelo . Por supuesto ;
13. ViewBag . Duración = sm . CursoModelo . duración ;
15. }
Salida:
RESUMEN
En este capítulo, discutí el enlace de modelos en MVC con la ayuda de un ejemplo fácil y simple. Sin
embargo, también hay varias formas en que puede enlazar vistas con modelos y controladores.
Simplemente lea este capítulo, si no se siente cómodo transfiriendo datos entre modelos y vistas.
Validación De Formularios En ASP.NET MVC 5 Con Ejemplo
1. ¿Qué es la validación y por qué es necesaria?
2. Validación del lado del servidor con el objeto ModelState.
¿QUÉ ES LA VALIDACIÓN Y POR QUÉ ES NECESARIA?
La validación significa examinar los datos de entrada del usuario para verificar si,
yo. ¿Está en el formato correcto o no?

ii. ¿Está vacío?
iii. ¿Contiene código malicioso?
iv. ¿Está en el rango correcto, etc.
Como programador, la primera regla que usted sabe es que nunca confíe en la entrada del usuario. Un
usuario es libre de ingresar cualquier cosa en el campo de entrada y es responsabilidad del programador
forzarlo a ingresar el valor correcto en un campo. La validación garantiza el envío de entrada correcto
en la base de datos y mejora la experiencia del usuario. Se guarda de innecesarios viajes de ida y vuelta
y mensajes de excepción. En ASP.NET MVC 5, puede aplicar el siguiente método para validar el campo
de entrada.
1. Validación usando ModelState Object (validación del lado del servidor)

2. Validación mediante Anotación de datos (Validación del lado del cliente)
3. Validación usando JavaScript y JQuery
4. Validación personalizada en el campo de entrada.
Una vez, aprenderá todas estas 4 técnicas de validación, podrá validar cualquier campo de entrada en
MVC. He creado una forma muy básica para enseñarte cómo funciona la validación. Sin embargo, más
adelante aprenderá a validar cada campo y valor de entrada, como validar la edad, el correo electrónico
y el número de teléfono móvil. y otro valor.
Empecemos aprendiendo validación con ejemplo de programación.
MÁS ARTÍCULOS
Validación Utilizando El Objeto ModelState En ASP.NET MVC 5

1. ¿Qué es el objeto ModelState?
2. ¿Cómo validar la entrada usando la propiedad Model.isValid?
3. Cómo mostrar un mensaje de error utilizando el método de extensión ValidationMessageFor.
ModelState es una propiedad del controlador que se utiliza para validar la forma en el lado del servidor.
Debe agregar el espacio de nombres System.Web.Mvc para poder usarlo. ModelState es una colección
de pares de nombre y valor que se envió al servidor durante la publicación. También contiene una
colección de mensajes de error para cada valor enviado.
CREAR CONTROLADORES Y MÉTODOS
Paso 1. Cree un nuevo proyecto o inicie cualquier proyecto MVC de ASP.NET existente.
Paso 2. Agrega StudentModel.csy pega el siguiente código.
1. espacio de nombres FormValidation.Models

2. {
4. {
6. public int Age { get ; conjunto; }
7. }
8. }
Paso 3. Agrega el siguiente código en la página Index.cshtml .
1. @ {
2. ViewBag . Título = "Página de inicio - Detalles del estudiante" ;
3. }
4.
5. @model FormValidation . Modelos . StudentModel
6. <h2> Detalles del estudiante </ h2 >
7. @using ( Html . BeginForm ( "StudentDetails" , "Home" , FormMethod . Post ))
8. {
9. <ol>
10. <li>
11. @ Html . LabelFor ( m => m . Nombre )
12. @ Html . TextBoxFor ( m => m . Nombre )
13. @ Html . ValidationMessageFor ( m => m . Nombre )
14. </ li >
15. <li>
16. @ Html . LabelFor ( m => m . Age )
17. @ Html . TextBoxFor ( m => m . Age )
18. @ Html . ValidationMessageFor ( m => m . Age )
19. </ li >
20. </ ol >
21. < input type = "submit" value = "Save Student Details" />
22. }
23.
24. < h3 style = "color: green" > Detalles del estudiante </ h3 >
25. < h4 style = "color: green" >
26. <b> Nombre : @ ViewBag . Nombre < br />
27. <b> Edad : @ ViewBag . edad < br />
28. </ h4 >
Pasos 4. Añadir el siguiente método de acción en HomeController.cs.

1. [HttpPost]
2. Acci ó n p ú blicaResulta detalles del estudiante ( StudentModel sm )
3. {
4. si ( string . IsNullOrEmpty ( sm . Nombre ))
5. {
6. Estado del modelo . AddModelError ( "Nombre" , "Nombre requerido" );
7. }
8. if ( sm . Age == 0 || sm . Age > 120 )
9. {
10. Estado del modelo . AddModelError ( "Age" , "Ingrese Valid Age entre 1-120" );
11. }
12.
13.
15. {
16. ViewBag . nombre = sm . Nombre ;
17. ViewBag . edad = sm . edad ;
19. }
20. m á s
21. {
22. ViewBag . name = "Sin datos" ;
23. ViewBag . age = "Sin datos" ;
25. }
26. }
Paso 5. Ejecuta este proyecto.
Entendamos esta ModelState Validation

1. El formulario es muy simple y básico, pero puede notar que hay una nueva línea agregada en el
formulario.
1. @ Html.LabelFor (m => m.Name)

2. @ Html . TextBoxFor ( m => m . Nombre )
3. @ Html . ValidationMessageFor ( m => m . Nombre )
@Html.ValidationMessageForcontrol muestra el mensaje de error para el cuadro de texto Nombre. Este

mensaje de error enviado desde el controlador.
1. if (string.IsNullOrEmpty (sm.Name))
2. {
3. Estado del modelo . AddModelError ( "Nombre" , "Nombre requerido" );
4. }
2.- ModelState.AddModelError("Name", "Name Required"); ModelState toma 2 parámetros. El

primer parámetro "Nombre" es un nombre del control de entrada y el segundo parámetro es un mensaje
de error de cadena.
RESUMEN
En este capítulo, aprendió a usar la ModelState.isValidpropiedad para examinar la entrada del
usuario en el lado del servidor. En el siguiente capítulo, aprenderá la validación utilizando Anotación de
datos en MVC.
Validación De Anotación De Datos Con Ejemplo En ASP.NET MVC

1. ¿Qué es la anotación de datos en ASP.NET MVC?
2. Validación del lado del cliente en MVC
3. Cómo aplicar la validación del lado del cliente en ASP.NET MVC utilizando la anotación de datos
¿QUÉ ES LA ANOTACIÓN DE DATOS?
La validación de la entrada del usuario no solo es necesaria, sino que también es obligatoria en estos
días. La anotación de datos proporciona una facilidad de verificación de entrada de usuario instantánea
en el lado del cliente y proporciona al desarrollador asp, una amplia gama de atributos de validación.
La anotación de datos hace que el proceso de validación sea fácil y rápido.
Los atributos de Anotación de datos se aplican directamente al miembro de la clase Modelo y esos
miembros están obligados a aceptar entradas de usuario válidas de acuerdo con la Regla de anotación
de datos.
La anotación de datos se puede utilizar después de agregar el siguiente espacio de nombres.
System.ComponentModel.DataAnnotations using System.ComponentModel;
ATRIBUTOS DE ANOTACIÓN DE DATOS
Aquí, hay una lista de algunos Atributos de Anotación de Datos importantes.
1. Requerido
Especifica que el campo de entrada no puede estar vacío.
Ejemplo:
1. [Requerido (ErrorMessage = "El nombre es requerido")]

2. DisplayName
Especifica el nombre para mostrar de una propiedad.
Ejemplo:
1. [DisplayName ("Ingrese su nombre:")]

3. StringLength
Especifica la longitud mínima y máxima de una propiedad.
Ejemplo:
1. [StringLength (50, MinimumLength = 3)]

4. rango
Especifica un rango de valor numérico.
Ejemplo:
1. [Rango (1,120, ErrorMessage = "La edad debe estar entre 1-120 en años.")]
5. Enlazar
Incluya o excluya el valor al agregar valores de formulario a las propiedades del modelo.
Ejemplo:
1. [Bind (Exclude = "Id")]
6. Scaffolding Columna
Especifica un campo para ocultar de formas de editor.
Ejemplo:
1. [ScaffoldColumn (false)]
7. DisplayFormat
Especifica un formato de visualización para una propiedad como Formato de fecha, Formato de
moneda, etc.
Ejemplo:
1. [DisplayFormat (DataFormatString = "{0: dd / MM / aaaa hh: mm: ss tt}")]

2. Sistema . DateTime p ú blico ? HireDate {get; conjunto; }
8. Sólo lectura
Establece una propiedad a solo lectura.
Ejemplo:
1. [ReadOnly (verdadero)]
2. cadena p ú blica Nombre { get ; conjunto privado; }
9. MaxLength
Especifica la longitud máxima de la cadena.
Ejemplo:
1. [MaxLength (50)]
10. Tarjeta de crédito

Especifica que un valor de campo de datos es el número de tarjeta de crédito.
Ejemplo:
1. [DataType (DataType.CreditCard)]
11. Compara
comparar con otros campos de entrada.
Ejemplo:
1. [System.ComponentModel.DataAnnotations.Compare ("Correo electrónico", ErrorMessage = "Correo electrónico n

o coincidente")]
2. cadena p ú blica ConfirmEmail { get ; conjunto; }
12. Dirección de correo electrónico

especifica que un valor de campo de entrada es una dirección de correo electrónico con un formato
correcto mediante la expresión regular.
Ejemplo:
1. [Requerido (ErrorMessage = "Se requiere ID de correo electrónico")]

2. [ DataType ( DataType . EmailAddress )]
3. [ MaxLength ( 50 )]
4. [ RegularExpression (@ "[a-z0-9 ._% + -] + @ [a-z0-9 .-] + \. [Az] {2,4}", ErrorMessage = "Formato de corr
eo electrónico incorrecto")]
5. Cadena p ú blica Correo electr ó nico { llegar ; conjunto;}
13. teléfono
especifica que un valor de campo de entrada es un número de teléfono bien formado usando Expresión
regular.
Ejemplo:
1. [DataType (DataType.PhoneNumber)]
2. [ Expresi ó n regular (@ "^ \ (? ([0-9] {2}) [-.]? ([0-9] {4}) [-.]? ([0-9] {3 }) [-.]? ([0-9] {3}) $ " ,
ErrorMessage = " No es un número de teléfono válido " )]
Formato de salida: 91-1234-567-890

14. Url
Especifica la validación de URL.
Ejemplo:
1. [Url] [Requerido]
2. URL de Cadena p ú blica { Obtener ; conjunto; }
15. Expresión regular

especifica que el campo de entrada coincide con la expresión regular deseada.
Ejemplo:
1. [RegularExpression (@ "[a-z0-9 ._% + -] + @ [a-z0-9 .-] + \. [Az] {2,4}", ErrorMessage = "Formato de corre
o electrónico incorrecto")]
2. Cadena p ú blica Correo electr ó nico { llegar ; conjunto; }
16. DataType
proporciona una lista del tipo de datos que está asociado con el campo de entrada y el parámetro.
Ejemplo:
1. [DataType (DataType.EmailAddress)]
17. HiddenInput
Especifica un campo de entrada oculto.
Ejemplo:
1. [System.Web.Mvc.HiddenInput (DisplayValue = false)]

EJEMPLO COMPLETO DE PROGRAMACIÓN
Entendamos todo esto con el ejemplo completo de programación.

Paso 1: CrearStudentModel.cs
1. utilizando System.ComponentModel.DataAnnotations; Sistema . ComponentModel . Anotaciones de datos ;

2. utilizando el sistema . ComponentModel ;
3. utilizando el sistema . Web . Mvc ;
4.
5. espacio de nombres FormValidation . Modelos
6. {
7. [ Bind ( Exclude = "Id" )]
9. {
10. [ ScaffoldColumn ( false )]
12.
13. [ Requerido ( ErrorMessage = "El nombre es requerido" )]
14. [ StringLength ( 50 , MinimumLength = 3 )]
16.
17. [ Requerido ( ErrorMessage = "Se requiere ID de correo electrónico" )]
19. [ MaxLength ( 50 )]
20. [ RegularExpression (@ "[a-z0-9 ._% + -] , ErrorMessage = " Formato de correo electrónico incorrecto "
)] + @ [a-z0-9 .-] + \. [Az] {2,4}", ErrorMessage = "Formato de correo electrónico incorrecto")]
21. cadena pública Correo electrónico { get ; establecer ; }
22.
23. [ Requerido ( ErrorMessage = "Confirmar correo electrónico es requerido" )]
25. [ Sistema . ComponentModel . Anotaciones de datos . Comparar ( "Correo electrónico" , ErrorMessage = "
Correo electrónico no coincidente" )]
26. cadena pública ConfirmEmail { get ; establecer ; }
27.
28. [ Requerido ( ErrorMessage = "La edad es requerida" )]
29. [ Rango ( 1 , 120 , ErrorMessage = "La edad debe estar entre 1-120 en años." )]
30. public int Age { get ; establecer ; }
31. }
32. }
Paso 2: Crea un formulario en la Index.cshtmlpágina.
1. @ {
2. ViewBag . Título = "Página de inicio - Detalles del estudiante" ;
3. }
4. < script src = "~ / Scripts / jquery.validate.min.js" > </ script >
5. < script src = "~ / Scripts / jquery-1.10.2.min.js" > </ script >
6. @model FormValidation . Modelos . StudentModel
7. <h2> Detalles del estudiante </ h2 >
8. @using ( Html . BeginForm ( "StudentDetails" , "Home" , FormMethod . Post ))
9. {
10. <ol>
11. <li>
12. @Html . LabelFor ( m => m . Nombre )
13. @Html . TextBoxFor ( m => m . Nombre )
14. @Html . ValidationMessageFor ( m => m . Nombre )
15. </ li >
16. <li>
17. @Html . LabelFor ( m => m . Email )
18. @Html . TextBoxFor ( m => m . Correo electrónico )
19. @Html . ValidationMessageFor ( m => m . Correo electrónico )
20. </ li >
21. <li>
22. @Html . LabelFor ( m => m . ConfirmEmail )
23. @Html . TextBoxFor ( m => m . ConfirmEmail )
24. @Html . ValidationMessageFor ( m => m . ConfirmEmail )
25. </ li >
26. <li>
27. @Html . LabelFor ( m => m . Age )
28. @Html . TextBoxFor ( m => m . Age )
29. @Html . ValidationMessageFor ( m => m . Age )
30. </ li >
31. </ ol >
32. < input type = "submit" value = "Save Student Details" />
33. }
34.
35. < h3 style = "color: green" > Detalles del estudiante </ h3 >
36. < h4 style = "color: green" >
37. <b> Nombre : @ViewBag . Nombre < br />
38. Correo electrónico : @ViewBag . correo electrónico < br />
39. Edad : @ViewBag . edad </ b >
40. </ h4 >
Paso 3: Añadir el siguiente código enHomeController.cs
1. [HttpPost]HttpPost ]
2. pública ActionResult StudentDetails ( StudentModel sm )
3. {
5. {
6. ViewBag . nombre = sm . Nombre ;
7. ViewBag . correo electrónico = sm . Correo electronico
8. ViewBag . edad = sm . edad ;
10. }
11. más
12. {
13. ViewBag . name = "No Data" ;
14. ViewBag . email = "Sin datos" ;
15. ViewBag . age = "No Data" ;
17. }
18. }
1. He añadido varios atributos de anotación de datos para modelar correctamente.
1. [Requerido (ErrorMessage = "El nombre es requerido")]Requerido ( ErrorMessage = "El nombre es requerido" )

]
2. [ StringLength ( 50 , MinimumLength = 3 )]
2. La creación de la forma es igual y nada ha cambiado.
VALIDACIÓN PERSONALIZADA USANDO ANOTACIÓN DE DATOS
Hasta ahora, aprendiste a usar el atributo de anotación de datos predefinido para validar el campo de
entrada. Pero, ¿cuál es la forma de agregar una regla personalizada en la anotación de datos? Aquí,
explicaré cómo puede agregar su propia regla de validación personalizada a la anotación de datos.
Por ejemplo, desea crear un atributo personalizado MinAgeAttribute() , en el cual el usuario se ve
obligado a ingresar su edad de 18 años o más de 18 años. Esto es solo un ejemplo y, después de
conocer el método de agregar un atributo personalizado en la anotación de datos, puede alimentar su
propio atributo. reglas.
Paso 1: Cree una carpeta separada CustomAttribute en su proyecto. Crea una clase
MinAgeAttribute.csen esta carpeta.
Paso 2: Agregue el siguiente código en MinAgeAttribute.csclase
1. utilizando System.ComponentModel.DataAnnotations; Sistema . ComponentModel . Anotaciones de datos ;

2.
3. espacio de nombres FormValidation . CustomAttribute
4. {
5. clase pública MinAgeAttribute : ValidationAttribute
6. {
7. int _minAge privado ;
8. MinAgeAttribute público ( valor int )
9. {
10. _minAge = valor ;
11. }
12.
13. anulación protegida ValidationResult IsValid ( valor de objeto , ValidationContext validationContext )
14. {
15. si ( valor ! = nulo )
16. {
17. si (el valor es int )
18. {
19. int minimumage = ( int ) value ;
20. if ( minimumage < _minAge )
21. {
22. devolver nuevo ValidationResult ( "La edad mínima debe ser" + _minAge );
23. }
24. }
25. }
26. devuelve ValidationResult . El éxito ;
27. }
28. }
29. }
Entendamos este codigo

Se creó la clase MinAgeAttribute derivada de la clase ValidationAttribute . Debe agregar un espacio
using System.ComponentModel.DataAnnotations; de nombres para usar la clase ValidationAttribute
.
1. public class MinAgeAttribute : ValidationAttribute

2. Anulación IsValid método con el fin de empujar propia lógica personalizada.
3. protected override ValidationResult IsValid(object value, ValidationContext
validationContext)
Paso 3: Ahora, usa este atributo como:
1. [Requerido (ErrorMessage = "La edad es requerida")]

2. [ FormValidation . CustomAttribute . MinAge ( 18 )]
RESUMEN
En este capítulo, expliqué cómo usar la anotación de datos para validar el campo de entrada en
ASP.NET MVC 5. También expliqué cómo agregar una regla de validación personalizada en
DataAnnotation. En el siguiente capítulo, aprenderá la validación remota en ASP.NET MVC. La
validación remota verifica el campo de entrada del usuario instantáneamente cuando el foco salta del
control de entrada.
Ejemplo De Validación Remota De ASP.NET - Campo De Entrada De

Comprobación Instantánea
1. ¿Qué es la validación remota en ASP.NET MVC5?
2. ¿Cómo aplicar la validación remota?
3. ¿Cómo verificar el campo de entrada al instante en forma asp.net?
¿QUÉ ES LA VALIDACIÓN REMOTA EN ASP.NET MVC5?
La validación remota es una técnica para validar solo un campo de entrada particular sin publicar todo
el formulario en el servidor. Es muy útil para la verificación instantánea de un campo de entrada. Es
posible que note esta función al crear una cuenta en Gmail. A medida que salta del campo de entrada
de correo electrónico, comprueba instantáneamente la ID de correo electrónico de existencia y, si ya se
encuentra en la base de datos, sugiere que elija otra ID de correo electrónico.
¿CÓMO APLICAR LA VALIDACIÓN REMOTA EN ASP.NET MVC 5?
Cuando aplique la validación remota en el campo de entrada MVC de asp.net, este campo podrá
actualizarse con el método de acción correspondiente. Aquí, estoy tomando un ejemplo de la misma
cuenta de Gmail, y verifico si la identificación de correo electrónico proporcionada ya existe o no.
Ejemplo completo de programación para la validación remota en ASP.NET MVC 5

Paso 1: Crear nuevo proyecto de MVC 5 RemoteValidation
Paso 2: Agregar una clase de modeloStudentModel.cs
1. utilizando System.Web.Mvc;
2. espacio de nombres RemoteValidation . Modelos
3. {
5. {
7. [ Remoto ( "IsEmailExist" , "Estudiante" , ErrorMessage = "El correo electrónico ya existe. Por favor,
elija otro correo electrónico." )]
9. }
10. }
Puede ver que he usado el atributo Remoto justo antes de las propiedades del correo electrónico. He
usado 3 parámetros en esto.
1. IsEmailExist es un método de acción que comprueba instantáneamente si el correo electrónico ya
existe o no.
2. Estudiante es un nombre de controlador.
3. La cadena ErrorMessage devuelve el mensaje si el correo electrónico coincide.
Paso 3: CrearStudentController.cs
2. Utilizando RemoteValidation . Modelos ;
3.
4. espacio de nombres RemoteValidation . Controladores
5. {
6. clase p ú blica StudentController : controlador
7. {
8. // OBTENER: Estudiante
10. {
11. StudentModel sm = nuevo StudentModel ();
12. volver Ver ( sm );
13. }
14.
15. [ HttpGet ]
16. JsonResult IsEmailExist p ú blico ( Cadena de Correo electr ó nico )
17. {
18. bool isExist = false ;
19. si ( correo electrónico . Igual ( " abc@gmail.com "))
20. {
21. isExist = true ;
22. }
23. return Json (! isExist , JsonRequestBehavior . AllowGet );
24. }
25. }
26. }
1. El método de índice devuelve la vista de StudentModel .

2. IsEmailExist comprueba si el correo existe o no.
Etapa 4:
Crear vista. Haga clic con el botón derecho en el método de acción de índice de StudentController y
seleccione Agregar vista .
Paso 5: Seleccione Crear plantilla y StudentModelcomo se muestra en la imagen a continuación.

Aquí está mi Index.cshtmlpágina.
1. @model RemoteValidation.Models.StudentModel
2.
3. @ {
4. ViewBag . Título = "Índice" ;
5. }
6.
7. <h2> Í ndice </ h2 >
8.
9.
11. {
12. @Html . AntiForgeryToken ()
13.
14. < div class = "form-horizontal" >
15. <h4> StudentModel </ h4 >
16. < hr />
17. @Html . ValidationSummary ( true , "" , new { @class = "text-danger" })
18. < div class = "form-group" >
19. @Html . LabelFor ( modelo => modelo . Nombre , htmlAttributes : new { @class = "control-label col-md
-2" })
20. < div class = "col-md-10" >
21. @Html . EditorFor ( model => model . Name , new { htmlAttributes = new { @class = "form-control" }
})
22. @Html . ValidationMessageFor ( model => model . Name , "" , new { @class = "text-danger" })
23. </ div >
24. </ div >
25.
27. @Html . LabelFor ( model => model . Correo electrónico , htmlAttributes : new { @class = "control-la
bel col-md-2" })
28. < div class = "col-md-10" >
29. @Html . EditorFor ( model => model . Email , new { htmlAttributes = new { @class = "form-control"
} })
30. @Html . ValidationMessageFor ( model => model . Email , "" , new { @class = "text-danger" })
31. </ div >
32. </ div >
33.
35. < div class = "col-md-offset-2 col-md-10" >
36. < input type = "submit" value = "Create" class = "btn btn-default" />
37. </ div >
38. </ div >
39. </ div >
40. }
41.
42. <div>
43. @Html . ActionLink ( "Volver a la lista" , "Índice" )
44. </ div >
45.
46. @section Scripts {
47. @ Scripts . Render ( "~ / bundles / jqueryval" )
48. }
Paso 6: Ejecutar el proyecto.
RESUMEN
En este capítulo, aprendió a usar la validación remota en ASP.NET MVC5 para la verificación
instantánea de un campo de entrada. En el siguiente capítulo, aprenderá el conjunto completo de HTML
Helper en ASP.NET MVC5.
Curso De Iniciación De HTML Helper En ASP.NET MVC

1. ¿Qué es HTML Helper Class en ASP.NET MVC?
2. ¿Cuál es la diferencia entre la clase de ayuda HTML y los controles HTML simples?
3. Cómo enlazar HTML Helper Control a un modelo
¿QUÉ ES HTML HELPER CLASS EN ASP.NET MVC?

Como ya sabe, MVC no usa el control del servidor y en su lugar usa el control simple del HTML. El
beneficio de usar el control HTML simple es; se carga más rápido y fácil de leer. Sin embargo, los
controles HTML simples no se limitan fuertemente con los modelos y, en esta situación, la clase HTML
Helper ayuda mucho.
HTML Helper Class tiene un conjunto de métodos que luego se convierten en controles HTML simples.
La ventaja de utilizar la clase HTML Helper es que los controles HTML se representan correctamente y
se verifican en el momento de la compilación. Por lo tanto, si hay algún problema con el control, se
puede corregir antes de ejecutar el proyecto final.
Ejemplo:Ayudante HTML estándar

ElAyudanteHTML @Html.TextBox("Textbox1", "val") procesará el siguiente control html.
Salida: <input id="Textbox1" name="Textbox1" type="text" value="val" />
Sin embargo, no está fuertemente vinculado con los modelos y genera un cuadro de texto HTML simple.
Para teclear fuertemente el control HTML, usaremos el siguiente método.
HTML ayudante fuertemente tipado

@Html.TextBoxFor(m=>m.Name)
salida: <input id="Name" name="Name" type="text" value="Name-val" />
Este cuadro de texto está fuertemente vinculado con las propiedades de Nombre de los modelos m.
Esta es solo una demostración que muestra la estructura de la clase HTML Helper. En los siguientes
capítulos, estudiará todos los métodos de la clase HTML Helper con un ejemplo completo de
programación.
Aquí, está la lista del método de ayuda HTML
Html.Label
Html.LabelForModel
Html.TextBox
Html.TextArea
Html.Checkbox
Html.RadioButton
Html.DropDownList
Html.ListBox
Html.Hidden
Html.Password
Html.Display
Html.DisplayForModel
Html.DisplayName
Html.BeginForm
Html.BeginRouteForm
Html.EndForm
HTML. Id
Html.IdForModel
Html.Name
Html.NameForModel
Html.Value
Html.ValueForModel
Html.Editor
Html.EditorForModel
Html.Action
Html.ActionLink
Html.RouteLink
Html.Partial
Html.RenderPartial
Html.RenderAction
Html.Validate
Html.ValidationMessage
Html.ValidationSummary
Html.Encode
URL Helpers
RESUMEN:
Este es un capítulo muy básico, que solo te presenta a HTML Helper Class. En los siguientes capítulos,
aprenderá a usar diferentes tipos de métodos de ayuda HTML con ejemplos de programación.
MÁS ARTÍCULOS
Ejemplo De Html.Label Y Html.LabelFor En ASP.NET MVC

1. ¿Qué es Html.Label y Html.LabelFor Helper Class?
2. ¿Cuál es la diferencia entre el método Html.Label y Html.LabelFor?
3. Ejemplo de Html.Label
4. Ejemplo de Html.LabelFor
5. Cómo vincular Html.LabelFor con un modelo

6. Cambiar las propiedades CSS y agregar una clase CSS a una etiqueta Html.Label
@ HTML.LABEL
La clase Html.Label Helper representa un control de etiqueta HTML que muestra texto de solo lectura.
Es un método de tipo simple que solo representa el control de etiquetas y puede estar o no limitado por
cualquier propiedad del modelo. No genera un error si ha pasado un nombre de propiedad incorrecto
en el parámetro.
Html.Label Modelo de ejemplo

:UserModel.cs
1. utilizando System.ComponentModel;
2. espacio de nombres HtmlHelperDemo . Modelos
3. {
4. clase de usuario UserModel
5. {
6. [ DisplayName ( "Nombre de usuario" )]
8. }
9. }
Ver: Index.cshtml
1. @using (Html.BeginForm ("Index", "Home", FormMethod.Post))

2. {
3. @ Html . Etiqueta ( "Nombre" )
4. }
Html Output
<label for = "Name"> Nombre de usuario </label>
Nota: Si lo usa @Html.Label("User Name"), mostrará el Nombre de usuario como salida, pero no estará
limitado a las propiedades del modelo "Nombre". Debido a que nunca verifica errores en el momento
de la compilación, es probable que cometa errores y que también obtenga errores de salida o de tiempo
de ejecución incorrectos.
@ HTML.LABELFOR
Está fuertemente limitado por el modelo y muestra el texto de la etiqueta para las respectivas
propiedades del modelo. Debe vincular la vista con el modelo correspondiente para usar el método @
Html.LabelFor.
Vincular vista al modelo: agregue el nombre del modelo a la vista de la siguiente manera:
@model HtmlHelperDemo.Models.UserModel
Modelo de UserModel.csejemplo de Html.LabelFor :
Es el mismo que se mencionó en el párrafo anterior.
Ver:Index.cshtml
1. @model HtmlHelperDemo.Models.UserModel
2.
3. @using ( Html . BeginForm ( "Index" , "Home" , FormMethod . Post ))
4. {
5. @ Html . LabelFor ( m => m . Nombre )
6. }
Html Output
<label for = "Name"> Nombre de usuario </label>
CAMBIAR LAS PROPIEDADES CSS DE LA ETIQUETA

1. CSS en línea: n ew { style = “Put your CSS Code Here” }
Ejemplo: @Html.LabelFor(m => m.Name, new { style="color:red" })
2. Agregue una clase CSS: new { @class=”Put Your CSS Class Name” }
1. <estilo>
2. .azul
3. {
4. color azul;
5. }
6. </style>
7.
8. @ Html.LabelFor (m => m.Name, nuevo {@ class = "blue"})
DIFERENCIA ENTRE HTML.LABEL () Y HTML.LABELFOR ()
Html.Label () Html.LabelFo
Se escribe sin apretar Puede estar o no limitado a las propiedades del modelo. Está fuerteme
modelo de pr
Requiere el nombre de la propiedad como una cadena. Requiere nom

No le da un error de tiempo de compilación si ha pasado una cadena incorrecta como Comprueba lo
parámetro que no pertenece a las propiedades del modelo. encuentra alg
Se produce un error de tiempo de ejecución. El error de tiempo de ejecución da una mala Lanza un erro
impresión al usuario y, si el proyecto vale la pena, puede perder a su cliente simplemente por de iniciar el p
un error.
RESUMEN
En este capítulo, traté de explicar Html.Labely el Html.LabelFormétodo de ayuda con un ejemplo
simple y fácil. Espero que lo hayas aprendido con claridad. En el siguiente capítulo, explicaré el método
de ayuda Html.TextBox.
Html.TextBox Y Html.TextBoxFor Ejemplo En ASP.NET MVC

1. ¿Qué es Html.TextBox y Html.TextBoxFor Helper Class?
2. ¿Cuál es la diferencia entre el método Html.TextBox y Html.TextBoxFor?
3. Ejemplo de Html.TextBox
4. Ejemplo de Html.TextBoxFor
5. Cómo vincular Html.TextBoxFor con un modelo
6. Cómo enviar datos desde TextBox al controlador
7. Atributos de Html de Html.TextBox
@ HTML.TEXTBOX ()
Html.TextBoxes el método de extensión de la clase HtmlHelper que dibuja HTML TextBox y acepta la
entrada del usuario. Html.TextBox es un método vagamente escrito que procesa la entrada del cuadro
de texto y no se limita con las propiedades del modelo. Debido a que es de tipo impreciso limitado,
tampoco comprueba el error en el momento de la compilación, por lo que si pasa una cadena incorrecta
como parámetro que no coincide con las propiedades del modelo, es probable que obtenga un error de
tiempo de ejecución.
Puede definir el Html.TextBox()método de la siguiente manera:
Html.TextBox(string name, string value, object htmlAttributes)

a. nombre de cadena es el nombre del cuadro de texto.
segundo. el valor de la cadena es el texto, aparece dentro de TextBox
c. object htmlAttributes es el lugar donde puedes poner tus propias propiedades y clase css.
Ejemplo de programación de Html.TextBox() método en ASP.NETModeloMVC
:UserModel.cs
1. espacio de nombres HtmlHelperDemo.Models

2. {
4. {
6. }
7. }
Ver: Index.cshtml

2. {
3. <b> Nombre : </ b > @ Html . TextBox ( "Nombre" , "Ingresar nombre" , nuevo { style = "color: red" })
4. }
Salida de HTML
<input id="Name" name="Name" style="color:red" type="text" value="Enter Name" />
@ HTML.TEXTBOXFOR ()
Html.TextBoxForTambién se utiliza para dibujar cuadros de texto en páginas web de asp.net pero está
fuertemente vinculado con las propiedades del modelo. La ventaja de usar Html.TextBoxFor es que
comprueba si hay errores en el momento de la compilación y lo salva de cualquier error de tiempo de
ejecución incierto. Debido a que está fuertemente delimitado con las propiedades del modelo, también
recibirá una sugerencia de Intellisense cuando la use.
Se puede definir @Html.TextBoxFor()como sigue:
TextBoxFor(model => model.properties, object htmlAttributes)

a. modelo utiliza la clase de modelo que la vista está limitada.
segundo. htmlAttributes define el espacio para las propiedades y la clase css.
Para enlazar Html.TextBoxFor()con un modelo, debe definir el modelo en la página de vista.
Ejemplo de programación del método Html.TextBoxFor () en ASP.NET MVC
Model:UserModel.cs
2. {
4. {
6. }
7. }
Ver: Index.csthml
3. {
4. @ Html . TextBoxFor ( m => m . Name , new { @Value = "Enter Name" , @class = "red" })
5. }
6. <estilo>
7. . rojo { color : rojo ; }
8. </ estilo >
Salida de HTML <input Value="Enter Name" class="red" id="Name" name="Name" type="text"
value="" />
CÓMO ENVIAR DATOS DESDE HTML.TEXTBOXFOR AL CONTROLADOR
Es muy simple obtener datos de TextBoxFor en el controlador. Aquí hay un ejemplo.
1. [HttpPost]
2. Í ndice de ActionResult p ú blico ( UserModel u )
3. {
4. ViewBag . Nombre = u . Nombre ;
5. volver Ver ();
6. }
ATRIBUTOS HTML
Los atributos de Html establecen las propiedades de Html para el control de entrada como el ancho, el
color, el valor, la clase css, etc. Los atributos proporcionan información adicional sobre los elementos y
siempre vienen con el par nombre = "valor" .
Ejemplo:
1. @ Html.TextBoxFor (m => m.Name,

2. nuevo {
3. @Value = "Ingresar Nombre" ,
4. @class = "rojo" ,
5. @disabled = "true" ,
6. })
Aquí está la lista de atributos HTML
DIFERENCIA ENTRE EL MÉTODO HTML.TEXTBOX Y HTM.TEXTBOXFOR.
Html.TextBox () Html.TextBox
modelo de pro

parámetro que no pertenece a las propiedades del modelo. encuentra alg
impresión al usuario y, si el proyecto vale la pena, puede perder a su cliente simplemente por de iniciar el pr
un error.
RESUMEN:
En este capítulo, aprendió el método de extensión de ayuda Html.TextBox () y Html.TextBoxFor () en

ASP.NET MVC 5 con un ejemplo completo de programación. Mantuve este capítulo simple, breve y
fácil, así que espero que no tenga ningún problema para entender este capítulo. En el siguiente capítulo,
aprenderá sobre el método de extensión Html.TextArea ().
Html.TextArea Y Html.TextAreaFor Ejemplo En ASP.NET MVC

1. ¿Qué es Html.TextArea y Html.TextAreaFor Helper Class?
2. ¿Cuál es la diferencia entre el método Html.TextArea y Html.TextAreaFor?
3. Ejemplo de Html.TextArea
4. Ejemplo de Html.TextAreaFor
5. Cómo vincular Html.TextAreaFor con un modelo
6. Cómo enviar datos de TextArea al controlador

7. Atributos de Html de Html.TextArea
TextArea es un control de entrada de texto multilínea que puede aceptar un gran número de líneas de
cadena. Por lo general, el tamaño de TextArea se divide en filas y columnas y puede configurarlo de
acuerdo con sus necesidades.
@ HTML.TEXTAREA ()
Html.TextAreaes un control de entrada de texto escrito de manera que toma la cadena como
parámetro. Esta cadena puede ser o no igual a la propiedad modelo. Porque no vincula el parámetro
de cadena con la propiedad del modelo y no comprueba si hay errores en el momento de la compilación,
por lo que puede haber una gran posibilidad de obtener un error en tiempo de ejecución.
Definir Html.TextArea ()
Hay varios métodos de sobrecarga en Html.TextArea()el control de entrada, pero comúnmente se
puede definir como:
Html.TextArea(string name, string value, object htmlAttributes)

Html.TextArea () Ejemplo
Modelo: UserModel.cs

2. {
4. {
6. }
7. }
Ver: Index.cshtml

2. {
3. <b> Nombre : </ b > @ Html . TextArea ( "Name" , "Enter Name" , nuevo {@ style = "color: red" })
4. }
Salida de HTML
<textarea cols = "20" id = "Name" name = "Name" rows = "2" style = "color: red">
@ HTML.TEXTAREAFOR ()
Html.TextAreaFor()fuertemente delimitado con las propiedades de los modelos. Comprueba el control
de entrada en el momento de la compilación y te salva de errores de tiempo de ejecución inciertos.
Enlazar TextAreaFor () con el modelo

1. Vincule los modelos con vistas de la siguiente manera:
2. Use la expresión lambda para acceder a las propiedades de este modelo.
@Html.TextAreaFor(m => m.Name)
@Html.TextAreaFor()Ejemplo

2. {
4. {
6. }
7. }
Puntos de vista: Index.cshtml
3. {
4. <b> Nombre : </ b > @ Html . TextAreaFor ( m => m . Nombre , nuevo { @style = "color: rojo" })
5. }
Salida de HTML
<textarea cols = "20" id = "Name" name = "Name" rows = "2" style = "color: red">
ATRIBUTOS DE HTML
Los atributos de HTML establecen las propiedades de HTML para el control de entrada como el ancho,
el color, el valor, la clase de CSS, etc. Los atributos proporcionan información adicional sobre los
elementos y siempre vienen con el par nombre = "valor".
Aquí está la lista de atributos HTML
Ejemplo:
1. @ Html.TextAreaFor (m => m.Name,
2. nuevo {
3. @value = "Ingresar Nombre" ,
5. // @ deshabilitado = "verdadero",
6. cols = "50" ,
7. filas = "10" ,
8. @ title = "Por favor ingrese su nombre" ,
9. @ tabindex = "0" ,
10. // @ accesskey = "z",
11. @ align = "left" ,
12. @ autofocus = "true" ,
13. @ style = "background-color: yellow; font-weight: bold" ,
14. @ draggable = "true" ,
15. // @ hidden = "true",
16. // @ maxlength = "12",
17. @ minlength = "5" ,
18. @ required = "true"
19. })
Salida de HTML
<textarea align = "left" autofocus = "true" class = "red" cols = "50" draggable = "true" id = "Name" minlength = "5" name = "Name"
required = "true" rows = " 10 "style =" background-color: amarillo; font-weight: bold "tabindex =" 0 "title =" Ingrese su nombre "valor
=" Ingrese el nombre ">
DIFERENCIA ENTRE HTML.TEXTAREA()Y HTML.TEXTAREAFOR()MÉTODO DE EXTENSIÓN
Html.TextArea () Html.TextAre
modelo de pro

parámetro que no pertenece a las propiedades del modelo. encuentra algú
impresión al usuario y, si el proyecto vale la pena, puede perder a su cliente simplemente por de iniciar el pr
un error.
RESUMEN:
En este capítulo, aprendió Html.TextArea()y el Html.TextAreaFormétodo de extensión de ayuda en
ASP.NET MVC 5 con un ejemplo completo de programación. Mantuve este capítulo simple, breve y
aprenderá sobre el método de extensión Html.TextArea ().
Html.CheckBox Y Html.CheckBoxFor Ejemplo En ASP.NET MVC

1. ¿Qué es Html.CheckBox()y los Html.CheckBoxFor()métodos?
2. ¿Cuál es la diferencia entre el método Html.CheckBox y Html.CheckBoxFor ?
3. Ejemplo de Html.CheckBox
4. Ejemplo de Html.CheckBoxFor
5. ¿Cómo vincular Html.CheckBoxFor con un modelo
6. ¿Cómo enviar el valor CheckBox al controlador ?
7. Atributos de HTML de Html.CheckBox
Una casilla de verificación es una pequeña casilla que le permite elegir múltiples opciones. Solo lleva el
valor verdadero y falso para el elemento marcado y sin marcar. En la clase de ASP.NET MVC ayudante,
que han dado Html.CheckBox()y Html.CheckBoxFor()método de extensión para trabajar. Aquí, en este
artículo, aprenderemos ambos métodos con un ejemplo completo de programación.
@ HTML.CHECKBOX: EJEMPLO Y DEFINICIÓN

Html.CheckBox()es un método escrito de forma holgada, que no está limitado por una propiedad del
modelo. No comprueba el error en el momento de la compilación y, si surge el problema, genera errores
en el tiempo de ejecución.
Definir: Puede definir Html.CheckBox de la siguiente manera: Nombre de cadena es el nombre de

la casilla de verificación. boolisChecked contiene valores verdaderos o falsos HtmlAttributes le
permite agregar propiedades HTML adicionales Ejemplo
CheckBox(string name, bool isChecked, object htmlAttributes)

2. {
4. {
5. t é p ú blico bool { conseguir ; conjunto; }
6. Boole p ú blico Loundry { llegar ; conjunto; }
7. Desayuno p ú blico bool { get ; conjunto; }
8. }
9. }
Ver: Index.cshtml

2. {
3. <b> Quiere ADICIONALES Beneficios : < / b> <br />
4. <span> Té: </span> @ Html.CheckBox ("Té", verdadero)
5. <span> | Loundry: </span> @ Html.CheckBox ("Loundry", falso)
6. <span> | Desayuno: </span> @ Html.CheckBox ("Desayuno", falso)
7. }
Salida de HTML
<span> Té: </span>
<input checked = "checked" data-val = "true" data-val-required = "El campo Tea es obligatorio". id = "Tea"
name = "Tea" type = "checkbox" value = "true" />
<input name = "Tea" type = "hidden" value = "false" />
<span> | Loundry: </span>
<input data-val = "true" data-val-required = "El campo Loundry es obligatorio". id = "Loundry" name = "Lou
ndry" type = "checkbox" value = "true" />
<input name = "Loundry" type = "hidden" value = "false" />
<span> | Desayuno: </span>
<input data-val = "true" data-val-required = "El campo Desayuno es obligatorio". id = "Breakfast" name = "
Breakfast" type = "checkbox" value = "true" />
<input name = "Breakfast" type = "hidden" value = "false" />
Salida de imagen El método de extensión Html.CheckBox genera una casilla de verificación de HTML
puro con los siguientes valores: a. La identificación y el nombreindican el nombre de la Propiedad
del Modelo. segundo. Tipo denota que es casilla de verificación c. Marcado indica si una casilla de
verificación está seleccionada o no d.Data-val = "true" y data-val-required = "El campo Tea es
obligatorio". están llegando porque, de forma predeterminada, MVC agrega el atributo [Requerido] a
los tipos de valores no anulables. Para solucionarlo, agregue la siguiente línea en el método en el
archivo Global.asax . mi.
Application_Start
DataAnnotationsModelValidatorProvider.AddImplicitRequiredAttributeForValueTypes =
false;
<input name="Tea" type="hidden" value="false" />
Te has dado cuenta de que @Html.CheckBoxestá generando un campo oculto adicional con un valor
falso. Esto se debe a que, cuando no selecciona una casilla de verificación, el formulario aún envía un
valor falso al servidor. Es la forma de gestionar el estado de la casilla de verificación en MVC.
@ HTML.CHECKBOXFOR: EJEMPLO Y DEFINICIÓN

Html.CheckBoxForestá fuertemente delimitado con las propiedades del modelo y verifica todos los
errores en el momento de la compilación. Antes de utilizar este método, debe enlazar vistas con un
modelo. Agregue un nombre de modelo en la parte superior de la vista de la siguiente manera:
Definir: es el modelo de conexión de esta casilla de verificación. se refiere al valor verdadero / falso
establece propiedades adicionales a la casilla de verificación. Ejemplo
CheckBoxFor(model > Property, bool isChecked, object htmlAttributes)
Model > Property
isChecked
HtmlAttributes

2. {
4. {
5. té público bool {conseguir; conjunto; }
6. boole público Loundry {get; conjunto; }
7. Desayuno público bool {get; conjunto; }
8. }
9. }
Ver: Index.cshtml
3. {
4. <b> Quiere ADICIONALES Beneficios : < / b> <br />
5. <span> T é: </ span > @ Html . CheckBoxFor ( m => m . Tea , verdadero )
6. <span> | Loundry: </span> @ Html.CheckBoxFor (m => m.Loundry, false)
7. <span> | Desayuno: </span> @ Html.CheckBoxFor (m => m.Breakfast, false)
8. }
Salida de HTML:
<span> Té: </span>
<input checked = "checked" id = "Tea" name = "Tea" type = "checkbox" value = "true" />
<input name = "Tea" type = "hidden" value = "false" />
<span> | Loundry: </span>
<input checked = "checked" id = "Loundry" name = "Loundry" type = "checkbox" value = "true" />
<input name = "Loundry" type = "hidden" value = "false" />
<span> | Desayuno: </span>
<input data-val = "true" data-val-required = "El campo Desayuno es obligatorio". id = "Breakfast" name = "
Breakfast" type = "checkbox" value = "true" />
<input name = "Breakfast" type = "hidden" value = "false" />
Salida de imagen
Genera el mismo HTML que @Html.CheckBoxgenera.
CÓMO ENVIAR CHECKBOX VALUE AL CONTROLADOR

1. [HttpPost]
3. {
4. ViewBag . Té = u . té ;
5. ViewBag . Loundry = u . Loundry ;
6. ViewBag . Desayuno = u . el desayuno ;
7. volver Ver ();
8. }
ATRIBUTOS DE HTML
el color, el valor, la clase CSS, etc. Los atributos proporcionan información adicional sobre los elementos
y siempre vienen con el par nombre = "valor".
Ejemplo:
1. @ Html.CheckBoxFor (m => m.Tea,

2. nuevo {
3. @value = "Té" ,
6. @checked = "true" ,
7. @title = "Seleccionar, si quieres té." ,
8. @tabindex = "0" ,
10. @align = "left" ,
11. @autofocus = "true" ,
12. @style = "color de fondo: amarillo; fuente-peso: negrita" ,
13. @draggable = "true" ,
15. // @ maxlength = "12",
16. })
Salida de HTML:
<input align = "left" autofocus = "true" checked = "true" class = "red" draggable = "true" id = "Tea" name
= "Tea" style = "background-color: yellow; font-weight: negrita "tabindex =" 0 "title =" Seleccionar, si q
uieres té. " type = "checkbox" value = "Tea" /> <input name = "Tea" type = "hidden" value = "false" />
DIFERENCIA ENTRE EL MÉTODO HTML.CHECKBOX Y HTM.CHECKBOXFOR.
Html.CheckBox () Html.CheckB
modelo de pro

impresión al usuario y, si el proyecto vale la pena, puede perder a su cliente simplemente de iniciar el pr
por un error.
RESUMEN
En este capítulo, aprendió Html.CheckBox()y el Html.CheckBoxFor()método de extensión de ayuda
en ASP.NET MVC 5 con un ejemplo completo de programación. Mantuve este capítulo simple, breve y
aprenderá sobre el método de extensión Html.RadioButton ().
Html.RadioButton Y Html.RadioButtonFor Ejemplo En ASP.NET MVC

1. ¿Qué es Html.RadioButtony los Html.RadioButtonFormétodos?
2. ¿Cuál es la diferencia entre el método Html.RadioButton y Html.RadioButtonFor ?
3. ¿Cómo agrupar botón de radio en mvc?
4. Ejemplo de Html.RadioButton
5. Ejemplo de Html.RadioButtonFor
6. Cómo vincular Html.RadioButtonFor con un modelo
7. Cómo enviar RadioButton Value al controlador
8. Atributos de Html de Html.RadioButton
El botón de opción proporciona una lista de opciones y le permite elegir solo una opción en un panel.
El botón de opción se usa ampliamente en un formulario y es válido para elementos seleccionados y
falso para elementos no seleccionados. La clase Html.Helper proporciona 2 métodos de extensión para
trabajar con Radio Button; Html.RadioButtony Html.RadioButtonFormétodo.
@ HTML.RADIOBUTTON
Html.RadioButtones un método que no está restringido a una propiedad del modelo. Debe pasar una
cadena con el mismo nombre que una propiedad modelo para evitar el error de tiempo de ejecución.
Definir:
RadioButton(string name, object value, bool isChecked, object htmlAttributes)
Stringnombre : es un nombre de grupo.

Objectvalor : este valor se publicará en el servidor si se selecciona el botón de opción.
BoolisChecked : establecer la selección predeterminada de los botones de radio
ObjectHtmlAttributes : establecer propiedades adicionales en un botón de opción .
Ejemplo:

2. {
4. {
5. cadena p ú blica TeaType { get ; conjunto; }
6. cadena p ú blica HotelType { get ; conjunto; }
7. }
8. }
Ver: Index.cshtml
3. {
4. <b> Seleccionar tipo de t é: < / b> <br />
5. <span> T é: </ span > @ Html . RadioButton ( "TeaType" , "Tea" , falso )
6. <span> | Café: </span> @ Html.RadioButton ("TeaType", "Coffee", verdadero)
7. <span> | BlackTea: </span> @ Html.RadioButton ("TeaType", "BlackTea", falso)
8. <span> | GreenTea: </span> @ Html.RadioButton ("TeaType", "GreenTea", falso)
9. < Br />
10. < hr />
11.
12. <b> Seleccionar hotel de : < / b> <br />
13. <span> Hotel Grand Plaza : </ span > @ Html . RadioButton ( "HotelType" , "HotelGrandPlaza" , falso )
14. <span> | Hotel Lake View: </span> @ Html.RadioButton ("Tipo de Hotel", "HotelLakeView", falso)
15. <span> | Hotel River Side: </span> @ Html.RadioButton ("HotelType", "HotelRiverSide", verdadero)
16. <span> | Hotel Mountain View: </span> @ Html.RadioButton ("HotelType", "MountainView", falso)
17. < Br />
18. < input type = "submit" value = "submit" />
19. }
20.
21. <h4> Ha seleccionado </ h4 >
22. <b> Tipo de t é: < / b> @ ViewBag.TeaType <br />
23. <b> Tipo de hotel : </ b > @ ViewBag . Tipo de Hotel
1. [HttpPost]
3. {
4. ViewBag . TeaType = u . TeaType . ToString ();
5. ViewBag . Tipo de Hotel = u . HotelType . ToString ();
6. volver Ver ();
7. }
Salida de HTML:
<input id = "TeaType" name = "TeaType" type = "radio" value = "Tea" />
@ HTML.RADIOBUTTONFOR
Html.RadioButtonForel método es un método fuertemente tipado que está restringido a una propiedad
modelo. Comprueba todos los errores en el momento de la compilación y guarda su aplicación para que
no obtenga ningún error de tiempo de ejecución.
Definir:
Html.RadioButtonFor(model => property, object value, object htmlAttributes)
Model=> propiedad: se refiere a una propiedad modelo.

Objectvalor: este valor se publicará en el servidor si se selecciona el botón de opción.
ObjectAtributos Html: establece propiedades adicionales en un botón de radio.
Ejemplo

2. {
4. {
5. cadena p ú blica TeaType { get ; conjunto; }
6. cadena p ú blica HotelType { get ; conjunto; }
7. }
8. }
Ver: Index.cshtml
3. {
4.
5. <b> Seleccionar té Tipo : < / b> <br />
6. <span> Té : </ span > @Html . RadioButtonFor ( m => m . TeaType , "Tea" )
7. <span> | Café : </ span > @Html . RadioButtonFor ( m => m . TeaType , "Coffee" )
8. <span> | BlackTea : </ span > @Html . RadioButtonFor ( m => m . TeaType , "BlackTea" )
9. <span> | GreenTea : </ span > @Html . RadioButtonFor ( m => m . TeaType , "GreenTea" )
10. < Br />
11. < hr />
12. <b> Seleccionar hotel : < / b> <br />
13. <span> Hotel Grand Plaza : </ span > @Html . RadioButtonFor ( m => m . Tipo de Hotel , "HotelGrandPlaza"
)
14. <span> | Hotel Lake View : </ span > @Html . RadioButtonFor ( m => m . Tipo de Hotel , "HotelLakeView" )
15. <span> | Hotel River Side : </ span > @Html . RadioButtonFor ( m => m . Tipo de Hotel , "HotelRiverSide"
)
16. <span> | Hotel Mountain View : </ span > @Html . RadioButtonFor ( m => m . Tipo de Hotel , "MountainView
" )
17. < Br />
19.
20. }
21.
22. <h4> Has seleccionado </ h4 >
23. <b> Té Tipo : < /b>@ViewBag.TeaType <br />
24. <b> Tipo de hotel : </ b > @ViewBag . Tipo de Hotel
1. [HttpPost]HttpPost ]
2. Índice de ActionResult público ( UserModel u )
3. {
4. ViewBag . TeaType = u . TeaType . ToString ();
5. ViewBag . Tipo de Hotel = u . HotelType . ToString ();
6. volver View ();
7. }
Salida de HTML
<input id = "TeaType" name = "TeaType" type = "radio" value = "Tea" /> id = "TeaType" name = "TeaType" typ
e = "radio" value = "Tea" />
ATRIBUTOS DE HTML
Los atributos de Html establecen las propiedades de Html para el control de entrada como el ancho, el
color, el valor, la clase css, etc. Los atributos proporcionan información adicional sobre los elementos y
siempre vienen con el par nombre = "valor" .
1. <b> Té: </b>Té: </b>

2. @ Html.RadioButtonFor (m => m.TeaType, "Tea",
3. nuevo {
4. @value = "Té",
5. @class = "rojo",
7. @checked = "true",
8. @title = "Seleccionar, si quieres té.",
9. @tabindex = "0",
11. @align = "left",
12. @autofocus = "true",
13. @style = "color de fondo: amarillo; fuente-peso: negrita",
14. @draggable = "true",
16. // @ maxlength = "12",
17. })
Salida de HTML
<b> Té: </b> <input align = "left" autofocus = "true" checked = "true" class = "red" draggable = "true" id
= "TeaType" name = "TeaType" style = "background -color: amarillo; font-weight: negrita "tabindex =" 0 "ti
tle =" Seleccionar, si quieres té ". type = "radio" value = "Tea" />
Té: </b> <input align = "left" autofocus = "true" checked = "true" class = "red" draggable = "true" id = "
TeaType" name = "TeaType" style = " background - color : amarillo ; fuente - peso : negrita " tabindex = "
0 " title = " Seleccionar, si quieres té. "tipo = valor "radio" = "Tea" />
DIFERENCIA ENTRE HTML.RADIOBUTTONY HTML.RADIOBUTTONFORMÉTODO.
Html.RadioButton () Html.RadioBu
Se escribe sin apretar Puede estar o no limitado a las propiedades del modelo. Está fuertemen
modelo de pro

Se produce un error de tiempo de ejecución. El error de tiempo de ejecución da una mala Lanza un error
impresión al usuario y, si el proyecto vale la pena, puede perder a su cliente simplemente de iniciar el pro
por un error.
RESUMEN
En este capítulo, aprendió Html.RadioButton()y el Html.RadioButtonFormétodo de extensión de
ayuda en ASP.NET MVC 5 con un ejemplo completo de programación. Mantuve este capítulo simple,
corto y fácil; así que espero que no tengas ningún problema en entender este capítulo. En el siguiente
capítulo, aprenderá sobre el método de extensión Html.DropDownList ().
Ejemplo De Html.DropDownList Y Html.DropDownListFor En ASP.NET

MVC
1. ¿Qué es Html.DropDownListy los Html.DropDownListFormétodos?
2. ¿Cuál es la diferencia entre Html.DropDownListy el Html.DropDownListFormétodo?
3. Html.DropDownList Ejemplo
4. Html.DropDownListFor Ejemplo
5. ¿Cómo Enlazar Html.DropDownListFor con un modelo
6. ¿Cómo mostrar elemento de lista en DropDownList
7. ¿Cómo enviar DropDownList Valor al controlador
8. atributos HTML de Html.DropDownList

DropDownList es un control visual con flecha hacia abajo que muestra una lista de elementos y te
obliga a elegir solo un elemento a la vez. DropDownList no es editable, significa que el usuario no puede
ingresar un valor propio y está limitado a elegir un elemento de la selección.
Html.HelperLa clase proporciona dos métodos de extensión para trabajar con DropDownList.
a. Html.DropDownList
b. Html.DropDownListFor
@ HTML.DROPDOWNLIST: DEFINICIÓN Y EJEMPLO

Html.DropDownList es un tipo suelto que significa que no está fuertemente vinculado a ningún elemento
de la lista ni a las propiedades del modelo.
Definir Html.DropDownList
Html.DropDownList(string name, IEnumerable<SelectLestItem> selectList, string
optionLabel, object htmlAttributes)
a. El nombre de la cadena es el nombre de DropDownList

b. IEnumerable <SelectLestItem> selectList es la lista de elementos
c. string optionLabel es la cadena informativa opcional, por favor elija un elemento, seleccione un
elemento, seleccione un valor, etc.
d. el objeto HtmlAttributes agrega características adicionales a la lista desplegable.

2. {
4. {
5. public TeaType SelectTeaType { get ; conjunto; }
6. }
7.
8. enumeraci ó n p ú blica TeaType
9. {
10. T é, Café é, GreenTea , BlackTea
11. }
12. }
Ver: Index.cshtml
1. @utilizando HtmlHelperDemo.Models
2. @model UserModel
3. < Br /> < br />
5. {
6. <b> Seleccionar tipo de t é: </ b >
7.
8. @ Html . DropDownList ( "SelectTeaType" , nueva SelectList ( Enum . GetValues ( typeof ( TeaType ))), "-
Select TeaType--" )
10. }
11.
13. <b> Tipo de t é: </ b > @ ViewBag . TeaType
2. Utilizando HtmlHelperDemo . Modelos ;
3.
4. espacio de nombres HtmlHelperDemo . Controladores
5. {
6. Clase p ú blica HomeController : Controlador
7. {
9. {
10. volver Ver ();
11. }
12.
13. [ HttpPost ]
14. Í ndice de ActionResult p ú blico ( modelo UserModel )
15. {
16. var selectedValue = model . SelectTeaType ;
17. ViewBag . TeaType = selectedValue . ToString ();
18. volver Ver ();
19. }
20. }
21. }
Salida de HTML:
<select data-val = "true" data-val-required = "El campo SelectTeaType es obligatorio". id = "SelectTeaType

" name = "SelectTeaType"> data-val = "true" data-val-required = "El campo SelectTeaType es obligatorio". i
d = "SelectTeaType" name = "SelectTeaType" >
<option value = ""> Select TeaType </option><option value = "" > Select TeaType </option>
<option> Té </option><option> Té </option>
<opción seleccionada = "seleccionado"> Café </option><opción seleccionada = "seleccionado" > Café </opti
on>
<option> GreenTea </option><option> GreenTea </option>
<option> BlackTea </option><option> BlackTea </option>

</select></select>
Ha notado que se agregan 2 atributos adicionales en la salida html: data-val y data-val-required .
Data-val = "true" y data-val-required = "El campo SelectTeaType es obligatorio". están llegando

porque, de forma predeterminada, MVC agrega el atributo [Requerido] a los tipos de valores no
anulables. Para solucionarlo, agregue la siguiente línea en el método Application_Start en el archivo
Global.asax.
DataAnnotationsModelValidatorProvider.AddImplicitRequiredAttributeForValueTypes =
false;
@ HTML.DROPDOWNLISTFOR: DEFINICIÓN Y EJEMPLO
Html.DropDownListFor está fuertemente delimitado con las propiedades del modelo y comprueba
todos los errores en el momento de la compilación. Antes de utilizar este método, debe enlazar vistas
con un modelo. Agregue el nombre del modelo en la parte superior de la vista de la siguiente manera:
@utilizando HtmlHelperDemo.Models
@model UserModel
Definir:
Se puede definir de la Html.DropDownListForsiguiente manera:
Html.DropDownListFor(model => model.property, IEnumerable<SelectLestItem> selectList,

string optionLabel, object htmlAttributes)
a. model => model.property: enlaza DropDownListFor con una propiedad de modelo específica.
segundo. IEnumerable <SelectLestItem> selectList: Es la lista de elementos.
do. string optionLabel es la cadena informativa opcional, por favor elija un elemento, seleccione un
elemento, seleccione un valor, etc.
d. el objeto HtmlAttributes agrega características adicionales a la lista desplegable.
Ejemplo:
2. {
4. {
5. public TeaType SelectTeaType { get ; conjunto; }
6. }
7.
8. enumeraci ó n p ú blica TeaType
9. {
10. T é, Café é, GreenTea , BlackTea
11. }
12. }
Puntos de vista: Index.cshtml
2. @model UserModel
3. < Br /> < br />
5. {
6. <b> Seleccione el tipo de té : </ b >
7. @Html . DropDownListFor ( m => m . SelectTeaType , nueva SelectList ( Enum . GetValues ( typeof ( TeaTyp
e ))), "--Seleccione TeaType--" )
9. }
10.
11. <h4> Has seleccionado </ h4 >
12. <b> Tipo de té : </ b > @ViewBag . TeaType
1. utilizando System.Web.Mvc; Sistema . Web . Mvc ;

2. utilizando HtmlHelperDemo . Modelos ;
3.
5. {
6. Clase pública HomeController : Controlador
7. {
9. {
10. volver View ();
11. }
12.
13. [ HttpPost ]
14. Índice de ActionResult público ( modelo UserModel )
15. {
16. var selectedValue = model . SelectTeaType ;
17. ViewBag . TeaType = selectedValue . ToString ();
18. volver View ();
19. }
20. }
21. }
Salida html
café
RESUMEN
En este capítulo, aprendió el Html.DropDownListfuncionamiento básico con un ejemplo completo de
programación. Aquí estoy agregando algunos ejemplos de programación más en DropDownList, debe
verificarlos y aprenderlos para una mejor comprensión. En el siguiente capítulo, aprenderá Html.ListBox.
Ejemplo De Html.ListBoxFor Y Html.ListBoxForFor En ASP.NET MVC

1. ¿Qué son los Html.ListBoxFormétodos de extensión?

2. Html.ListBoxFor Ejemplo
3. Cómo vincular Html.ListBoxFor con un modelo
4. Cómo mostrar el elemento de lista en el control Html.ListBoxFor
5. Cómo enviar el valor de ListBoxFor al controlador
6. Atributos de HTML de Html.ListBoxFor
¿QUÉ ES EL MÉTODO DE EXTENSIÓN HTML.LISTBOXFOR?

Html.ListBoxForEl método de extensión crea el control ListBox y permite a los usuarios seleccionar
múltiples opciones de una sola vez. Es muy útil cuando desea obtener múltiples opciones para los
usuarios. La ventaja de usar ListBoxFor es que todas las opciones aparecen visualmente y el usuario
tiene la opción de seleccionar una opción, así como más de una opción. Aquí, en este tutorial, explicaré
cómo crear ListBox en ASP.NET MVC usando Elementos de lista y luego publicar elementos
seleccionados en los controladores.
¿CÓMO DEFINIR EL CONTROL DE ENTRADA HTML.LISTBOXFOR?

Puede definir este control de la siguiente manera: @Html.ListBoxFor(model => model.property,
ItemList, object HtmlAttribute) Model => model.property: contiene el ID de los elementos
seleccionados. ItemList : es una lista de elementos. Object HtmlAttributes : establece atributos
adicionales para el control ListBox
EJEMPLO DE PROGRAMACIÓN
Aquí, voy a crear una lista de té y luego usaré esta lista de té para mostrarla en ListBox y pedirle al
usuario que seleccione su opción.
1. utilizando System.Collections.Generic;
2. Utilizando el sistema . Web . Mvc ;
3.
5. {
7. {
8. public int [] SelectedTeaIds { get ; conjunto; }
9. public IEnumerable < SelectListItem > TeaList { get ; conjunto; }
10. }
11. }
4. Utilizando el sistema . Linq ;
5.
7. {
9. {
11. {
12. modelo var = nuevo UserModel
13. {
14. SelectedTeaIds = new [] { 2 },
15. TeaList = GetAllTeaTypes ()
16. };
17. volver vista ( modelo );
18. }
19.
20. [ HttpPost ]
21. Í ndice de ActionResult p ú blico ( modelo UserModel )
22. {
23. modelo . TeaList = GetAllTeaTypes ();
24. if ( modelo . SelectedTeaIds ! = null )
25. {
26. Lista < SelectListItem > selectedItems = model . TeaList . Donde ( p => modelo . SelectedTeaIds .
Contiene ( int . Parse ( p . Valor ))). ToList ();
27. foreach ( var t é en elementos seleccionados )
28. {
29. Té . Seleccionado = verdadero ;
30. ViewBag . Mensaje + = Té . Texto + "|" ;
31. }
32. }
33. volver vista ( modelo );
34. }
35.
36. Lista p ú blica < SelectListItem > GetAllTeaTypes ()
37. {
38. Listar < SelectListItem > items = new List < SelectListItem > ();
39. artículos . Add ( nuevo SelectListItem { Text = "General Tea" , Value = "1" });
40. artículos . Add ( nuevo SelectListItem { Text = "Coffee" , Value = "2" });
41. artículos . Add ( nuevo SelectListItem { Text = "Green Tea" , Value = "3" });
42. artículos . Add ( nuevo SelectListItem { Text = "Black Tea" , Value = "4" });
43. Devolver los art í culos ;
44. }
45. }
46. }
Ver: Index.cshtml
2. @model UserModel
3. < Br /> < br />
5. {
6. <b> Seleccionar tipo de t é: < / b> <br />
7. @ Html . ListBoxFor ( x => x . SelectedTeaIds , Model . TeaList , nuevo { style = "width: 200px" })
8. < Br />
10. }
11.
13. < b style = "color: red" > Tipo de t é: @ ViewBag . Mensaje </ b >
Salida:
ATRIBUTOS DE HTML DE HTML.LISTBOXFOR
el color, el valor, la clase de CSS, etc. Los atributos proporcionan información adicional sobre los
elementos y siempre vienen con el par nombre = "valor".
1. @ Html.ListBoxFor (x => x.SelectedTeaIds, Model.TeaList,

2. nuevo {
3. @style = "ancho: 200 píxeles; fondo-color: amarillo; relleno: 15 píxeles;" ,
4. @title = "Seleccionar opciones múltiples" ,
5. @align = "left" ,
6.
7. })
Salida de HTML Té general
RESUMEN
En este capítulo, aprendió el método de extensión de ayuda Html.ListBoxFor () en ASP.NET MVC 5 con
un completo ejemplo de programación. Mantuve este capítulo simple, breve y fácil, así que espero que
no tenga ningún problema para entender este capítulo. En el siguiente capítulo, aprenderá el método
de extensión Html.Hidden ().
Html.HiddenFor Ejemplo En ASP.NET MVC
1. ¿Qué es Html.Hiddeny Html.HiddenFormétodos?

2. ¿Cuál es la diferencia entre el método Html.Hidden y Html.HiddenFor?
3. Ejemplo de Html.Hidden
4. Html.HiddenPor ejemplo
5. Cómo enlazar Html.HiddenFor con un modelo
6. Cómo mostrar el elemento de la lista en Oculto
7. Cómo enviar un valor oculto al controlador
8. Atributos de HTML de Html.Hidden
¿QUÉ ES EL CAMPO OCULTO () Y POR QUÉ ES NECESARIO?

Html.Hidden()El campo es igual que otro control de entrada, Html.TextBoxpero hay algunas
características especiales en Html.Hidden que se enumeran a continuación:
1. Es un campo oculto, significa que el control no será visible para el usuario.

2. El usuario no puede interactuar con este control.
3. Este control se utiliza para almacenar y enviar información adicional al servidor o a la página
siguiente.
4. Envía información adicional que el usuario no conoce o no le interesa.
5. Mantiene los datos incluso en Postback.
6. Los datos de los campos ocultos se pueden leer mediante secuencias de comandos del lado del
cliente como Java Script y JQuery.
¿CUÁL ES EL PROPÓSITO DE USAR EL CAMPO OCULTO () EN HTML?
Entendámoslo con un ejemplo del mundo real.
Usted creó un formulario y pidió a los usuarios que rellenaran alguna información. En la parte posterior,
también desea recopilar cierta información del usuario y enviar esa información al servidor cuando el
usuario haga clic en el botón enviar. Esta información puede ser:
1. Dirección IP de la máquina del usuario
2. Qué usuario del navegador está usando
3. Qué usuario del sistema operativo está usando; Android, iOS, Linux o Windows 7, etc.
4. Ficha de seguridad
5. Fecha de envío
6. Etc.
Entonces, cuando el usuario complete el formulario, mientras tanto, puede recopilar toda la información
anterior y mantenerla en un campo oculto.
Html.Hidden () es un método de ayuda de tipo básico o un método de ayuda de tipo holgado, que no
está limitado a ningún modelo. Contiene 2 parámetros; Nombre de campo oculto y valor de campo
oculto.
Definir:
1. MvcHtmlString Html.Hidden (nombre de cadena, valor de objeto, objeto htmlAttributes)
Ejemplo de manera fácil:
1. @ Html.Hidden ("Hidden_Field_Name", "Value")
Html.HiddenFor () es un método fuertemente tipado que está delimitado con la clase modelo. Se
comunica y envía / recibe valor para modelar propiedades de clase. Generalmente contiene 2
parámetros; Nombre de campo oculto que es una propiedad modelo y un valor para el campo oculto.
Definir:
1. MvcHtmlString Html.HiddenFor (Expresión<func> expresión)</func
Ejemplo de manera fácil:
1. @ Html.HiddenFor (m => m.UserId, nuevo {Valor = "1"})
Aquí, estoy dando un ejemplo básico de Html.Hidden y Html.HiddenFor. En este siguiente ejemplo, he
tratado de explicar lo siguiente:
1. Creando y definiendo el campo oculto básico y fuertemente tipado.

2. Asignar valor a un campo oculto utilizando el controlador.
3. Viendo el valor del campo oculto en la página de visualización.

2. {
4. {
5. public int UserId { get ; conjunto; }
6. Cadena p ú blica Nombre de Usuario { Obtener ; conjunto; }
7. }
8. }
Ver: Index.cshtml
2. @model UserModel
3.
4. <h1> Ejemplo de HTML . Oculto </ h1 >
5.
7. {
8. // Campo oculto básico
9. @ Html . Oculto ( "BasicHiddenName" , "Steven Clark" )
10.
11. // Campo oculto fuertemente tipado
12. @ Html.HiddenFor (m => m.UserId, nuevo {Valor = "1"}) <br />
13. @ Html.HiddenFor (m => m.UserName, nuevo {Valor = "Steven Clark"})
14.
15. <input id = "Enviar" tipo = "enviar" valor = "enviar" />
16. }
17.
18. <hr />
19. <h4> Html.Hidden - Basic Type </h4>
20. <p> <strong> Valor: </strong> @ ViewBag.basicname </p> <br />
21.
22. <h4> Html.HiddenFor - Escriba fuertemente </h4>
23.
24. <p> <strong> ID: </strong> @ ViewBag.id </p>
25. <p> <strong> Nombre: </strong> @ ViewBag.name </p>
2. utilizando HtmlHelperDemo.Models;
3.
4. espacio de nombres HtmlHelperDemo.Controllers
5. {
6. Clase pública HomeController: Controlador
7. {
9. {
10. volver View ();
11. }
12.
13. [HttpPost]
14. Índice de ActionResult público (FormCollection fc, UserModel um)
15. {
16. ViewBag.basicname = fc ["BasicHiddenName"];
17.
18. ViewBag.id = um.UserId;
19. ViewBag.name = um.UserName;
20. volver View (um);
21. }
22. }
23. }
Salida de HTML:
para ver la salida, haga clic en el botón enviar y luego vaya a la página de origen presionando Ctrl + U
en su navegador.
1. <form action = "/" method = "post">

2. <input id = "BasicHiddenName" name = "BasicHiddenName" type = "hidden" value = "Steven Clark" />
3. <input Value = "1" data-val = "true" data-val-number = "El campo UserId debe ser un número". data-val-requ
ired = "El campo UserId es obligatorio". id = "UserId" name = "UserId" type = "hidden" value = "1" /> <br
/>
4. <input Value = "Steven Clark" id = "UserName" name = "UserName" type = "hidden" value = "Steven Clark" />
6. </form>
Asignando valor a Html. Campo oculto usando el controlador


2. {
4. {
5. public int UserId {get; conjunto; }
6. cadena pública Nombre de usuario {obtener; conjunto; }
7. }
8. }
Ver: Index.cshtml
2. @model UserModel
3.
4. <h1> Ejemplo de HTML.Hidden </h1>
5.
6. @using (Html.BeginForm ())
7. {
8. // Campo oculto básico
9. @ Html.Hidden ("BasicHiddenName", nulo, nuevo {@id = "BasicHiddenName"})
10.
12. @ Html.HiddenFor (m => m.UserId, nuevo {id = "UserId"}) <br />
13. @ Html.HiddenFor (m => m.UserName, nuevo {id = "UserName"})
14.
16. }
17.
18. <hr />
19. <h4> Html.Hidden - Basic Type </h4>
20. <p> <strong> Valor: </strong> @ ViewBag.basicname </p> <br />
21.
22. <h4> Html.HiddenFor - Escriba fuertemente </h4>
23.
24. <p> <strong> ID: </strong> @ ViewBag.id </p>
25. <p> <strong> Nombre: </strong> @ ViewBag.name </p>
3.
5. {
7. {
9. {
10. UserModel um = new UserModel ();
11. um . ID de usuario = 2 ;
12. um . Nombre de usuario = "Jack Martin" ;
13. ViewBag . BasicHiddenName = "Jack Martin" ;
14. volver Ver ( um );
15. }
16.
17. [ HttpPost ]
18. Í ndice de ActionResult p ú blico ( FormCollection fc , UserModel um )
19. {
20. ViewBag . basicname = fc [ "BasicHiddenName" ];
21.
22. ViewBag . id = um . ID de usuario ;
23. ViewBag . nombre = um . Nombre de usuario ;
25. }
26. }
27. }
Salida de HTML
1. <form action = "/ Home / Index" method = "post">

2. <input id = "BasicHiddenName" name = "BasicHiddenName" type = "hidden" value = "Jack Martin" />
3. <input data-val = "true" data-val-number = "El campo UserId debe ser un número" . data-val-required = "
El campo UserId es obligatorio". id = "UserId" name = "UserId" type = "hidden" value = "2" /> <br />
4. <input id = "UserName" name = "UserName" type = "hidden" value = "Jack Martin" />
6. </form>
RESUMEN
En este capítulo, he tratado de enseñarle cómo usar Html.Hidden Field en ASP.Net MVC 5 . Es
bastante fácil aprender este control con la ayuda del ejemplo de programación mencionado en este
artículo.
Ejemplo Completo De Html.Password Y Html.PasswordFor - ASP.NET

MVC 5
1. ¿Qué es Html.Passwordy Html.PasswordForclase auxiliar?

2. ¿Cuál es la diferencia entre el método Html.Password y el método Html.PasswordFor?
3. Definir clase Html.password
4. ¿Cómo validar el campo PasswordFor?
5. Cómo enviar datos desde la contraseña al controlador
¿QUÉ ES HTML.PASSWORD HELPER CLASS?
La clase Html.Password Helper genera campos de entrada de contraseña en un formulario web que
se utiliza para solicitar y validar la contraseña del usuario. Los caracteres ingresados en el campo de
contraseña están enmascarados con un carácter especial * (asterisco) o lo que sea que establezca en
él.
DIFERENCIA ENTRE HTML.PASSWORD Y HTML.PASSWORDFOR HELPER CLASS
Html.Password y Html.PasswordFor ambos generan el campo de entrada de contraseña, pero aún así,
son de naturaleza diferente. Html.Password es un tipo básico, clase de ayudante de tipo que no está
delimitado con la propiedad del modelo. Html.PasswordFor es una clase fuertemente tipada que está
limitada por la propiedad del modelo. Siempre es recomendable utilizar la clase Html.PasswordFor
porque es segura, está libre de errores, comprueba los errores en el tiempo de compilación y es fácil
de usar.
DEFINIR
Html.Password
Html.Password (nombre de cadena, valor de objeto, objeto htmlAttributes)
Ejemplo fácil
@ Html.Password ("BasicPassword")
Html.PasswordFor
Html.PasswordFor (Expression <Func <dynamic, TProperty >> expression, object htmlAttributes)
Ejemplo fácil
@ Html.PasswordFor (m => m.ConfirmPassword)
EJEMPLO COMPLETO DE PROGRAMACIÓN

1. utilizando System.ComponentModel.DataAnnotations;
2.
4. {
6. {
7. public int UserId { get ; conjunto; }
9.
10. [ Requerido ( ErrorMessage = "Se requiere contraseña." )]
11. Cadena p ú blica CONTRASE ñ un { Obtener ; conjunto; }
12.
13. [Requerido (ErrorMessage = "Se requiere contraseña de confirmación")]
14. [Comparar ("Contraseña", ErrorMessage = "La contraseña debe coincidir")]
15. cadena pública ConfirmPassword {get; conjunto; }
16. }
17. }
Ver: Index.cshtml
2. @model UserModel
3.
4. <h1> Html.PasswordFor Ejemplo </h1>
5.
7. {
8. // Contraseña básica Campo Ejemplo
9. @ Html.Password ("BasicPassword")
10. <br />
12. @ Html.PasswordFor (m => m.Password)
13. @ Html.ValidationMessageFor (m => m.Password, "", new {@class = "error"})
14. <br />
15. @ Html.PasswordFor (m => m.ConfirmPassword)
16. @ Html.ValidationMessageFor (m => m.ConfirmPassword, "", new {@class = "error"})
17. <br /> <br />
19. }
20.
21. <hr />
22.
23. <p> <strong> Valor: </strong> @ ViewBag.BasicPassword </p> <br />
24. <p> <strong> Valor: </strong> @ ViewBag.StrongPassword </p> <br />
3.
5. {
7. {
9. {
10. volver Ver ();
11. }
12.
13. [ HttpPost ]
15. {
17. {
18. ViewBag . BasicPassword = fc [ "BasicPassword" ];
19.
20. ViewBag . StrongPassword = um . Confirmar contraseña ;
22. }
23. m á s
24. {
25. volver Ver ();
26. }
27. }
28. }
29. }
Salida de HTML
<form action = "/" method = "post"> <input id = "BasicPassword" name = "BasicPassword" type = "password" /
> <br />
<input data-val = "true" data-val-required = "Se requiere contraseña." id = "Contraseña" name = "Password"
type = "password" /> <span class = "error de validación de campo válido" data-valmsg-for = "Password" data
-valmsg-replace = "true"> </ span> <br />
<input class = "error-validación-entrada" data-val = "true" data-val-equalto = "La contraseña debe coincid
ir" data-val-equalto-other = "*. Password" data-val-required = "Confirmation La contraseña es obligatoria
"id =" ConfirmPassword "nombre =" ConfirmPassword "type =" password "/> <span class =" error de validación
de campo "data-valmsg-for =" ConfirmPassword "data-valmsg-replace =" true "> La contraseña debe coincidir
</span> <br /> <br /><input class = "error-validación-entrada" data-val = "true" data-val-equalto = "La co
ntraseña debe coincidir" data-val-equalto-other = "* .Password" data-val-required = "Confirmación Se requi
ere contraseña " id = " ConfirmPassword " name = " ConfirmPassword " type = " password " /> <span class =
" error de validación de campo " data-valmsg-for = " ConfirmPassword " data-valmsg-replace = "true " > La
contraseña debe coincidir </span> <br /> <br />
<input id = "Enviar" tipo = "enviar" valor = "enviar" /><input id = "Enviar" tipo = "enviar" valor = "en
viar" />
</form> </form>
RESUMEN
En este tutorial, aprendió a usar la clase Html.Password Helper para generar un cuadro de entrada de
contraseña en un formulario web. También aprendió cómo validar el campo de contraseña y enviar
datos al controlador. En el siguiente capítulo, aprenderá Html.Display Helper Class.
Aprenda Html.Display Y Html.DisplayFor Helper Method En ASP.NET

MVC5 Con Ejemplo
1. Lo que es Html.DisplayyHtml.DisplayFor
2. Cómo definir el Html.Displaymétodo de ayuda
3. Cómo enlazar Html.DisplayFora un modelo
4. Cómo mostrar la cadena de Textbox en el método Html.Display
5. Ejemplo de programación de Html.DisplayFor
¿QUÉ ES EL MÉTODO HTML.DISPLAY Y HTML.DISPLAYFOR?

Html.Displayy Html.DisplayFor ambos se utilizan para imprimir el valor de la cadena en la pantalla. Sin
embargo, también puede usar una etiqueta HTML simple para mostrar texto en la pantalla, pero el
Método de Extensión Html.Display ofrece más opciones de formato. Html.Display es un método
vagamente escrito mientras que Html.DisplayFor es un método fuertemente tipado.
2. {
4. {
6. }
7. }
Ver: Index.cshtml
2. @model UserModel
3.
4. <h1> Html . DisplayFor Ejemplo </ h1 >
5.
7. {
8. <span> Ingrese su nombre : </ span >
9. @ Html . TextBoxFor ( m => m . UserName )
10. < input id = "Enviar" tipo = "enviar" valor = "enviar" />
11.
12. }
13.
14. < hr />
15.
16. <strong> Valor fuertemente tipado : < / strong> @ Html.DisplayFor (m => m.UserName) <br />
17.
18. <strong> A la vista & nbsp ; valor escrito : </ strong > @ Html . Mostrar ( "Nombre de usuario" )
3.
5. {
7. {
9. {
10. volver Ver ();
11. }
12.
13. [ HttpPost ]
15. {
17. {
18. um . Nombre de usuario = fc [ "Nombre de usuario" ];
20. }
21. m á s
22. {
23. volver Ver ();
24. }
25. }
26. }
27. }
Salida
MÁS ARTÍCULOS
Ejemplo Completo Y Tutorial De MVC Html.BeginForm

1. ¿Qué es Html.BeginForm?
2. Cómo crear Html.BeginForm
3. Cómo pasar los datos del formulario al controlador
4. Ejemplo completo de programación
¿QUÉ ES HTML.BEGINFORM?
Html.BeginForm es el método de extensión Html Helper que se utiliza para crear y representar el
formulario en HTML. Este método hace su trabajo más fácil en la creación de la forma. Aquí está el
método para crear un formulario utilizando el método de extensión Html.BeginForm en ASP.NET MVC5.
Html.BeginForm("ActionMethod", "ControllerName","Get⁄Post Method")
En general, se utilizan 3 parámetros al crear Html.BeginForm

ActionMethod : define qué método de acción se busca cuando se hace clic en el botón Enviar.
ControllerName : define qué controlador mantiene el método de acción definido.
Get / Post Method : define el método que desea utilizar para enviar datos desde el formulario al
controlador.
EJEMPLO DE PROGRAMACIÓN:

2. {
4. {
7. Cadena p ú ciudad blica { Obtener ; conjunto; }
8. }
9. }
Ver: Index.cshtml
2. @model UserModel
3.
4. <h1> Html . DisplayFor Ejemplo </ h1 >
5.
7. {
8. <span> Ingrese su nombre: </span> @ Html.TextBoxFor (m => m.UserName) <br />
9. <span> Ingrese su edad: </span> @ Html.TextBoxFor (m => m.Age) <br />
10. <span> Ingrese su ciudad: </span> @ Html.TextBoxFor (m => m.City) <br />
11.
13. }
14.
15. <hr />
16.
17. <strong> Nombre de usuario: </strong> @ Html.DisplayFor (m => m.UserName) <br />
18. <strong> User Age: </strong> @ Html.DisplayFor (m => m.Age) <br />
19. <strong> Ciudad del usuario: </strong> @ Html.DisplayFor (m => m.City) <br />
1. espacio de nombres HtmlHelperDemo.Controllers

2. {
4. {
6. {
7. volver Ver ();
8. }
9.
10. [ HttpPost ]
11. Í ndice de ActionResult p ú blico ( UserModel um )
12. {
14. }
15. }
16. }
SALIDA
RESUMEN:
Sin embargo, hay mucho que aprender en los formularios web, pero este capítulo se centra en la
comprensión simple de cómo se puede crear Html.BeginForm. Agregué el ejemplo de programación
simple pero completo que seguramente lo ayudará a crear un formulario usando el Método de Extensión
Html.BeginForm. Sin embargo, también he escrito algunos temas avanzados en WebForms y si desea
obtener más información al respecto, visite el siguiente artículo.
Más ejemplos
4 maneras de crear un formulario en ASP.NET MVC
Objeto FormCollection en ASP.NET MVC con ejemplo
ASP.NET MVC 5 - Método HTTPGET y HTTPPOST con ejemplo
Cómo funciona el enlace de modelos en ASP.NET MVC con ejemplo
Validación de formularios usando el objeto ModelState en ASP.NET MVC 5
Validación del formulario de anotación de datos con ejemplo en ASP.NET MVC
Insertar, actualizar, eliminar usando modelos sin EF en ASP.NET MVC5
Insertar, actualizar, eliminar usando modelos con Entity Framework en ASP.NET MVC5
MÁS ARTÍCULOS
Html.NameFor MVC5 Ejemplo

En este tutorial, aprenderás:
1. ¿Qué es el Html.NameFormétodo auxiliar?

2. ¿Cómo utilizar el Html.NameFormétodo en MVC?
Html.NameFor método de extensión imprime el nombre de las propiedades del modelo.
EJEMPLO:

2. {
3. público de clase UserModel
4. {
5. cadena pública Nombre de usuario { obtener ; establecer ; }
6. public int Age { get ; establecer ; }
7. cadena pública ciudad { obtener ; establecer ; }
8. }
9. }
Ver: Index.cshtml
1. @utilizando HtmlHelperDemo.Models HtmlHelperDemo . Modelos
2. @model UserModel
3.
4. <h1> Html . Comenzar para el ejemplo </ h1 >
5.
7. {
8. <strong> @Html . NameFor ( m => m . NombreUsuario ) < / strong> @ Html.TextBoxFor (m => m.UserName) <br
/>
9. <strong> @Html . NameFor ( m => m . Edad ) < / strong> @ Html.TextBoxFor (m => m.Age) <br />
10. <strong> @Html . NameFor ( m => m . City ) < / strong> @ Html.TextBoxFor (m => m.City) <br />
11.
13. }
Salida
Html.EditorFor Tutorial Con Exmaple - ASP.NET MVC
1. ¿Qué es el Html.EditorFormétodo de ayuda en ASP.NET MVC?

2. Como definir Html.EditorFor
3. Diferencia entre Html.TextBox y Html.EditorFor
Html.EditorForel método auxiliar representa el control de entrada como un cuadro de texto, pero la
diferencia es que el método auxiliar Html.EditorFor representa el control de entrada según el tipo de
datos. Proporciona un excelente manejo sobre el control de entrada que un control de cuadro de texto.
Por ejemplo, si definió una propiedad de cadena, una propiedad int y una propiedad booleana en la
clase modelo, el método EditorFor Extension procesa automáticamente el control de entrada adecuado
en función del tipo de datos.

2. {
4. {
7. Cadena p ú ciudad blica { Obtener ; conjunto; }
8. public bool isHandicapped { get ; conjunto; }
9. }
10. }
Ver: Index.cshtml
2. @model UserModel
3.
4. <h1> Html . Nombre Para Ejemplo </ h1 >
5.
7. {
8. <strong> Nombre < / strong> @ Html.EditorFor (m => m.UserName) <br /> < br />
9. <strong> Edad < / strong> @ Html.EditorFor (m => m.Age) <br /> < br />
10. <strong> Ciudad < / strong> @ Html.EditorFor (m => m.City) <br /> < br />
11. <strong> Handicap < / strong> @ Html.EditorFor (m => m.isHandicapped) <br /> < br />
13. }
Salida
MÁS ARTÍCULOS
Ejemplo Completo De Html.ActionLink En ASP.Net MVC 5
1. ¿Qué es el Html.ActionLinkmétodo auxiliar en ASP.NET MVC5?

Html.ActionLinkSe utiliza para crear hipervínculo. Este método de acción genera un hipervínculo en
las páginas html, pero redirige al método de acción, no directamente a las páginas de visualización.
2. @model UserModel
3.
4. <h1> Ejemplo Html . ActionLink </ h1 >
5.
6. <! - Redireccionar en el mismo controlador ->
7. @ Html . ActionLink ( "Página de contacto" , "Contacto" )
8.
9. < Br />
10.
11. <! - Redirigir en otro controlador ->
12. @ Html . ActionLink ( "Página de informe" , "Índice" , "Informe" )
SALIDA
Salida de HTML
<! - Redireccionar en el mismo controlador ->
<a href="/Home/Contact"> Página de contacto </a>
<br />
<! - Redirigir en otro controlador ->
<a href="/Report"> Página de informe </a>
RESUMEN
Como ha visto, Html.ActionLink se utiliza para representar un hipervínculo en html. No apunta a ver la
página directamente, sino que apunta al método de acción. En el siguiente capítulo, aprenderá
Html.RouteLink en ASP.Net MVC 5.
Html.ValidationMessageFor Ejemplo En ASP.Net MVC 5

1. ¿Qué hay Html.ValidationMessageForen ASP.Net MVC5?

2. ¿Cómo definir Html.ValidationMessageFor?
Html.ValidationMessageFores un método fuertemente tipado que se usa para mostrar un mensaje de
error para el control de entrada si se ingresó un valor no válido. Puede definir
Html.ValidationMessageFor de la siguiente manera:
@ Html.ValidationMessageFor (Propiedad del modelo, "Mensaje de cadena", Atributo Html})
Propiedad de modelo enlaza el método de ayuda ValidationMessageFor a una propiedad de modelo.
El mensaje de cadena se usa para mostrar un mensaje de error personalizado. El
atributo HTML le permite insertar CSS.
Principalmente hay 3 partes de validar un control y mostrar un mensaje.
i. Crear reglas para las propiedades del modelo en la clase Modelo.

ii. Validando en el controlador
iii. Viendo un mensaje de error en la vista.
1. Crear reglas para las propiedades del modelo en la clase Modelo.
1. utilizando System.ComponentModel.DataAnnotations;
2.
4. {
6. {
7. [ Requerido ( ErrorMessage = "El nombre es requerido. No puede estar vacío" )]
9. }
10. }
2. Validación en el controlador
1. [HttpPost]
2. Í ndice de ActionResult p ú blico ( UserModel um )
3. {
5. {
7. }
8. m á s
9. {
10. volver Ver ();
11. }
12. }
3. Viendo un mensaje de error en la vista.
2. @model UserModel
3.
4. <h3> <code> Html . ValidationMessageFor Ejemplo < / código> </ h3 >
5. < Br />
6.
8. {
9. <strong> Nombre </ strong > @ Html . EditorFor ( m => m . NombreUsuario )
10. @ Html . ValidationMessageFor ( m => m . UserName , "" , new { @class = "text-danger" })
11. < Br /> < br />
13. }
14.
15. < Br /> < br />
16. <strong> Nombre de usuario : < / strong> @ Html.DisplayFor (m => m.UserName) <br />
Salida de HTML
<input class = "entrada-validación-error cuadro de texto de una sola línea"
data-val = "true"
data-val-required = "El nombre es obligatorio. No puede estar vacío"
id = "UserName" name = "UserName"
tipo = "texto"
valor = "" />
<span class = "field-validation-error text-danger"
data-valmsg-for = "UserName"
data-valmsg-replace = "true"> El nombre es obligatorio. No puede estar vacio
</span>
En este tutorial, traté de brindarle un conocimiento fundamental sobre qué es y cómo usar
Html.ValidationMessageFor en ASP.Net MVC 5. Puede aprender la validación completa de
formularios Html con un ejemplo en ASP.Net MVC 5 aquí.
Validación de anotación de datos con ejemplo en ASP.NET MVC

Controlador y Vistas

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

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

Controlador y Vistas

Diunggah oleh

Hak Cipta:

Format Tersedia

Crear Primer Proyecto ASP.

B . AÑADIR PÁGINAS DE VISUALIZACIÓN Y HACER NAVEGACIÓN .

CREAR NUEVO PROYECTO COMPSHOP

Paso 3: Abrir Compartido Layout.cshtmly cambiar el nombre de la aplicación en CompShop Studio.

a. Encuentra la siguiente línea de código.

b. Y reemplazar con este código.

Paso 4: Presiona F5 para ejecutar tu proyecto.

ESTRUCTURA DE LA CARPETA MVC

Scripts - Contiene los scripts de archivos como JavaScript, VBScript, JQueryetc.

Shared : se encuentra en la carpeta de visualización y contiene archivos compartidos como master

Web.config - Contiene configuración de nivel de aplicación.

Agregar un controlador (Controller) y una página de vista (View Page)

3. Dar el nombre del controlador a ItemController . El sufijo "Controllerr" se debe agregar en el

AGREGAR UN VIEWPAGE PARA EL MÉTODO DEL ÍNDICE

3. Se agrega su página de vista de índice. Puedes ver aquí.

2. Agregue el siguiente código en el artículo Index.cshtmlexpediente.

Salida: Volverá a la página de vista de índice

Salida: Devolverá una página en blanco sin resultado.

Cuando ejecute este código, lo redireccionará a la página de contacto .

Paso 2: Añadir enlace de acción en la Index.cshtmlpágina.

Paso 3: Agregue el siguiente código en la página message.cshtml

Paso 4: Abra HomeController.cs y agregue la siguiente línea de código.

Paso 5: Ve Index.cshtmly agrega este código.

Filtros de acción personalizados

Agregar una View Pages en asp.net mvc

5. Abra la página Enquiry.cshtml y escriba el siguiente código en ella.

6. Ejecute su proyecto y vaya al siguiente enlace.

¿Qué pasa si agrego una página de vista sin método de acción?

3. Indique el nombre de la vista: Purchase y haga clic en Add .

5. Ejecute su proyecto y vaya al siguiente enlace. http://localhost:1233/Home/Purchase

Paso 1: Abre el Explorador de soluciones y ve a la carpeta Shared.

Paso 2: Aquí, ya encontrarás 2 páginas de diseño: _Layout.cshtml y Error.cshtml. Aquí, voy a

Paso 4: Ahora, abra la página _DarkLayout.cshtml y pegue el siguiente código diseñado.

Paso 8: Explorar en el panel izquierdo Views Shared y luego seleccione _DarkLayout.cshtml en el

CREAR PÁGINA MAESTRA USANDO DOWNLOADED HTML/CSS TEMPLATE

RenderBody, RenderPage Y RenderSection con Ejemplo

3. Ahora, abre Home DarkLayoutPage.cshtml e inserte_StaticPromotionalPage de esta manera.

<div style="background-color:rebeccapurple; color:antiquewhite; font-weight:bold">

Hello CompShop Application. I am in RenderBody section because there is no named section fo

public ActionResult About()

public ActionResult Contact()

public ActionResult Enquiry()

public ActionResult Purchase()

Adición de Partial Views Pages

¿QUÉ SON LAS VISTAS PARCIALES EN ASP.NET MVC5?

¿CÓMO CREAR UNA PÁGINA DE VISTA PARCIAL?

Aquí está el conjunto completo de códigos de _Layout.cshtml

4. Ahora, el código de _Layout.cshtml córtelo, péguelo en el archivo Header.cshtml

Más datos sobre la página parcial:

¿QUÉ ES LA SINTAXIS DE RAZOR?

¿CÓMO ESCRIBIR LA SINTAXIS RAZOR EN MVC VIEW PAGE?

1. Usa el @{ … }bloque para escribir el código C #.

4. Mantener el valor de la cadena entre comillas dobles ("")

// 1. Insert Item

// 2. Get All Item List

// 3. Update Item Details

// 4. Delete Item

// 2. * Add New Item *

// 3. * Update Item Details *

// 4. * Delete Item Details *

// * 1. This Method contains dummy Item Details. *

// * 2. This Method contains dummy Comment List. *