Scribd
Cargar
90 vistas16 páginas

Introducción A HTML Helpers en ASP

Este documento introduce los helpers HTML en ASP.net MVC 4. Explica que los helpers HTML son métodos que devuelven cadenas de texto como etiquetas HTML o scripts. Luego, muestra tres formas de crear un helper HTML personalizado para recortar texto a un número determinado de caracteres: 1) creando una clase estática, 2) directamente en la vista, 3) en una página personalizada.

Cargado por

Efrain JVivanco
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
90 vistas16 páginas

Introducción A HTML Helpers en ASP

Este documento introduce los helpers HTML en ASP.net MVC 4. Explica que los helpers HTML son métodos que devuelven cadenas de texto como etiquetas HTML o scripts. Luego, muestra tres formas de crear un helper HTML personalizado para recortar texto a un número determinado de caracteres: 1) creando una clase estática, 2) directamente en la vista, 3) en una página personalizada.

Cargado por

Efrain JVivanco
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 16

INTRODUCCIN A

HTML HELPERS en
ASP.net MVC 4
En este post hablaremos de los helpers de ASP.Net MVC 4, quiero ir
tocndolos de apoco as que comenzaremos viendo las distintas formas
en que puedo ir interactuando con ellos; podemos crear un helpers?.
Si se puede en eso me enfocare en este post veamos como quedad:
Bsicamente y sin complicarnos mucho en una definicin compleja de
que es un HTML Helper, podramos decir que es un mtodo que
devuelve una cadena de texto y esta cadena de texto puede ser lo que
nosotros queramos, desde etiquetas HTML, scripts
Crearemos un proyecto de tipo MVC al cual llamaremos EjemploHelpers:

Dejaremos como motor de vista Razor y que sea una aplicacin de


internet.

La idea no es hacer un ejemplo largo y complicado si no ver como


podemos hacer un HTML Helpers personalizado en ASP.NET MVC 4.
El Problema ser el siguiente; imaginemos que tengo algo as:

Quiero esconder la mayor parte del texto y que me de la


oportunidad de leerlo completo si eso quiero.
Solo quiero que me muestre un numero determinado de
caracteres y no todos de esta forma.

Como se puede ver de esta forma podra poner un hipervnculo


a otra pagina donde leera el texto completo.
La idea para este Helpers personalizado es que me permita
recortar el texto a un numero determinado de caracteres que yo
defina.
Primero se mandara todo el texto como la primera imagen y se
recortara ese texto como se muestra en la segunda imagen.
En el controlador que nos dar el proyecto por defecto
modificaremos el ViewBag de esta forma, para mandarle todo el
texto.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

HomeController
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Mvc;
namespaceEjemploHelpers.Controllers
{
publicclassHomeController : Controller
{
publicActionResultIndex()
{

13.
14.
15.
16.

enferma.;
de la cocina.;
en el sofa. ;
y el lleva sus;

ViewBag.Message=El ha vuelto. Mama esta dormida o vuelve a estar


ViewBag.Message+=Yo me escondo y me acurruco debajo de la mesa
ViewBag.Message+=Veo a mama a traves de mis dedos. Esta dormida
ViewBag.Message+=Su mano cae sobre la alfombra verde y pegajosa,

17.

ViewBag.Message+=botas grandes con la hebilla brillante y esta de pie


junto a mama, gritando.;
18.
returnView();
19.
}
20.
21.
publicActionResultAbout()
22.
{
23.
ViewBag.Message=Your app description page.;
24.
25.
returnView();
26.
}
27.
28.
publicActionResultContact()
29.
{
30.
ViewBag.Message=Your contact page.;
31.
32.
returnView();
33.
}
34.
}
35.
}

Muy bien ya que tenemos el texto que queremos recortar.


Haremos este Helpers de tres Formas para ver como podramos
interactuar con el.
Crearemos una carpeta en nuestro proyecto y en ella
colocaremos una clase que le podremos Helpers.

Dentro de esta carpeta crearemos una clase la cual llamaremos


HtmlHelpers:

Ocuparemos un using dentro de esta clase el cual


es using System.Web.Mvc. Nuestra clase quedara de esta
forma:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

class HtmlHelpers
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Mvc;

namespaceEjemploHelpers.Helpers
{
publicstaticclassHtmlHelpers
{
publicstaticstringCortarTexto(thisHtmlHelperphelper, stringpTextoCortar, int
pLongitud)
12.
{
13.
if (pTextoCortar.Length<=pLongitud)
14.
{
15.
returnpTextoCortar;
16.
}
17.
else
18.
{
19.
returnpTextoCortar.Substring(0, pLongitud) + [Leer Mas];
20.
}
21.
}
22.
}
23.
}

Esta clase la haremos esttica y haremos un mtodo esttico


que nos cortara el texto Primera Forma. Para implementarlo en
nuestra vista nos iremos al Index del Home:

Como podemos ver hay que colocar un using que nos permita
utilizar la clase que esta en nuestra carpeta Helpers este ser:

@using EjemploHelpers.Helpers.
Con ello solo hay que utilizar el Helpers que hicimos
anteriormente en la clase utilizando el mtodo CortarTexto, el
nos har el favor de recortar el texto al tamao que queramos.
Recuerda que estamos en la vista del controlador llamada Index
te dejo el cdigo completo abajo.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

Index.cshtml
@{
ViewBag.Title=Home Page;
}
@usingEjemploHelpers.Helpers;

@section featured {
<sectionclass=featured>
<divclass=content-wrapper>
<hgroupclass=title>
<h1>@ViewBag.Title.</h1>
<h2>@Html.CortarTexto(ViewBag.Messageasstring, 57)</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
<ahref=http://asp.net/mvc&#8221;title=ASP.NET MVC
Website>http://asp.net/mvc</a>.
17.
The page features <mark>videos, tutorials, and samples</mark> to
help you get the most from ASP.NET MVC.
18.
If you have any questions about ASP.NET MVC visit
19.
<ahref=http://forums.asp.net/1146.aspx/1?
MVC&#8221;title=ASP.NET MVC Forum>our forums</a>.
20.
</p>
21.
</div>
22.
</section>
23.
}
24.
<h3>We suggest the following:</h3>
25.
<olclass=round>
26.
<liclass=one>
27.
<h5>Getting Started</h5>
28.
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic
websites that
29.
enables a clean separation of concerns and that gives you full control over
markup
30.
for enjoyable, agile development. ASP.NET MVC includes many features
that enable
31.
fast, TDD-friendly development for creating sophisticated applications that
use
32.
the latest web standards.
33.
<ahref=http://go.microsoft.com/fwlink/?LinkId=245151&#8221;>Learn
more</a>
34.
</li>
35.

36.
37.
38.
39.

<liclass=two>
<h5>Add NuGet packages and jump-start your coding</h5>
NuGet makes it easy to install and update free libraries and tools.
<ahref=http://go.microsoft.com/fwlink/?LinkId=245153&#8221;>Learn
more</a>
40.
</li>
41.
42.
<liclass=three>
43.
<h5>Find Web Hosting</h5>
44.
You can easily find a web hosting company that offers the right mix of
features
45.
and price for your applications.
46.
<ahref=http://go.microsoft.com/fwlink/?LinkId=245157&#8221;>Learn
more</a>
47.
</li>
48.
</ol>

Otra forma de utilizar y crear el helpers es esta, Borrare el using


y lo hare de esta forma:

De esta forma creamos el helpers directamente en la vista


Index, el cdigo queda de esta forma:
1.
2.
3.

Index.cshtml
@{
ViewBag.Title=Home Page;
}

4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

@helper CortarTexto(stringinput, intlength)


{
if (input.Length<=length)
{
@input
}
else
{
@input.Substring(0, length)<text>[Leer Mas]</text>
}
}

@section featured {
<sectionclass=featured>
<divclass=content-wrapper>
<hgroupclass=title>
<h1>@ViewBag.Title.</h1>
<h2>@CortarTexto(ViewBag.Messageasstring, 57)</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
<ahref=http://asp.net/mvc&#8221;title=ASP.NET MVC
Website>http://asp.net/mvc</a>.
27.
The page features <mark>videos, tutorials, and samples</mark> to
help you get the most from ASP.NET MVC.
28.
If you have any questions about ASP.NET MVC visit
29.
<ahref=http://forums.asp.net/1146.aspx/1?
MVC&#8221;title=ASP.NET MVC Forum>our forums</a>.
30.
</p>
31.
</div>
32.
</section>
33.
}
34.
<h3>We suggest the following:</h3>
35.
<olclass=round>
36.
<liclass=one>
37.
<h5>Getting Started</h5>
38.
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic
websites that
39.
enables a clean separation of concerns and that gives you full control over
markup
40.
for enjoyable, agile development. ASP.NET MVC includes many features
that enable
41.
fast, TDD-friendly development for creating sophisticated applications that
use
42.
the latest web standards.
43.
<ahref=http://go.microsoft.com/fwlink/?LinkId=245151&#8221;>Learn
more</a>
44.
</li>
45.
46.
<liclass=two>
47.
<h5>Add NuGet packages and jump-start your coding</h5>
48.
NuGet makes it easy to install and update free libraries and tools.
49.
<ahref=http://go.microsoft.com/fwlink/?LinkId=245153&#8221;>Learn
more</a>

50.
51.
52.
53.
54.
55.
56.
57.
58.

</li>

features

<liclass=three>
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of
and price for your applications.
<ahref=http://go.microsoft.com/fwlink/?LinkId=245157&#8221;>Learn

more</a>
</li>
</ol>

Y la ultima forma en que podemos hacer lo mismo es de esta


forma: Primero crearemos una carpeta.

Cuando nos cree la pagina borramos lo que contiene y


colocamos esto.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

CustomHelpers.cshtml
@helper CortarTexto(stringpTextoCortar, intpLongitud)
{
if (pTextoCortar.Length<=pLongitud)
{
@pLongitud
}
else
{
@pTextoCortar.Substring(0, pLongitud)<text>[Leer Mas]</text>
}
}

Como hicimos con el anterior borraremos lo que hicimos y


utilizaremos esta pagina para nuestro helpers.

De esta forma solo utilizamos la pagina que creamos el cdigo


quedara de esta forma:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

CustomHelpers.cshtml
@{
ViewBag.Title=Home Page;
}

2>

@section featured {
<sectionclass=featured>
<divclass=content-wrapper>
<hgroupclass=title>
<h1>@ViewBag.Title.</h1>
<h2>@CustomHelpers.CortarTexto(ViewBag.Messageasstring, 57)</h

</hgroup>
<p>
To learn more about ASP.NET MVC visit
<ahref=http://asp.net/mvc&#8221;title=ASP.NET MVC
Website>http://asp.net/mvc</a>.
16.
The page features <mark>videos, tutorials, and samples</mark> to
help you get the most from ASP.NET MVC.
17.
If you have any questions about ASP.NET MVC visit
18.
<ahref=http://forums.asp.net/1146.aspx/1?
MVC&#8221;title=ASP.NET MVC Forum>our forums</a>.
19.
</p>
20.
</div>
21.
</section>
22.
}
23.
<h3>We suggest the following:</h3>
24.
<olclass=round>
25.
<liclass=one>
26.
<h5>Getting Started</h5>
27.
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic
websites that
28.
enables a clean separation of concerns and that gives you full control over
markup
29.
for enjoyable, agile development. ASP.NET MVC includes many features
that enable
30.
fast, TDD-friendly development for creating sophisticated applications that
use
31.
the latest web standards.
32.
<ahref=http://go.microsoft.com/fwlink/?LinkId=245151&#8221;>Learn
more</a>
33.
</li>
34.
35.
<liclass=two>
36.
<h5>Add NuGet packages and jump-start your coding</h5>
37.
NuGet makes it easy to install and update free libraries and tools.
38.
<ahref=http://go.microsoft.com/fwlink/?LinkId=245153&#8221;>Learn
more</a>
39.
</li>
40.

41.
42.
43.
44.
45.
46.
47.

features

<liclass=three>
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of
and price for your applications.
<ahref=http://go.microsoft.com/fwlink/?LinkId=245157&#8221;>Learn

more</a>
</li>
</ol>

De estas tres formas si las corremos de una en una nos


mostrara la pagina as:

La idea de este post es ver como podemos crear un helpers


personalizado pero en mi caso lo hice de esta forma pero en
realidad podemos hacer lo mismo para label, textboxt, etc. Solo
hay que saber que queremos hacer en realidad.

También podría gustarte