Customizar Controles para as antigas versões do asp.net não era uma tarefa tão fácil em comparação ao novo ASP.NET MVC.
E com esta facilidade quero apresentar a criação de um componente de IMAGE que pode ser muito utilizado em nossas aplicações.
HTML Helper
HTML são propriedades da VIEWPAGE base CLASS. Ou seja você possui os create para INPUT, LINKS, FORMS. Veja o Exemplo de código a seguir:
@using (Html.BeginForm()){
@Html.ValidationSummary(true)
<div class="editor-label">
//Label
@Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
//Edit (input)
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</div>
}
Estas propriedades nos auxiliam muito, mas ainda podemos melhorar as funcionalidades. vamos criar um componente helper onde vamor buscar automaticamente uma imagem com URL.
Com o projeto MVC aberto, vamos criar uma classe chamada SiteHelper. Esta classe terá o seguinte código a seguir:
using System:
using System.Collections.Generic;
using System.Linq;
using Sytem.Web;
using System.Web.Mvc;
namespace Projeto.Estrutura
{
public static class SiteHelper
{
public static MvcHtmlString Image (this.HtmlHelper,
string src,
string alt)
{
//Cria uma variável de TagBuilder de IMG
var builder = new TagBulder("img");
//Acrescentamos o atributo SRC
builder.MergeAttribute("src",src);
//Acrescenteamos o Atributo ALT
builder.MergeAttribute("alt", altText);
//Retorna o MVCHtmlString com fechamento de Tag
return MvcHtmlString.Create(builder.Tostring(TagRenderMode.SelfClosing);
}
}
}
Dentro da View , um ponto importante deve ser observado. devemo fazer a referência a nova classe criada:
@using Projeto.Estrutura
<div>
//Novo componente de Image
@Html.Image(Image.Url, Item.Name)
</div>
Somente este código ja irá resolver e criar um componente helper para inserção de novas imagens com o atributo ALT. Caso você queira colocar esta classe e consequentemente os componentes sempre disponíveis na aplicações va para o arquivo web.Config e acrescente o código a seguir:
<pages pagebaseType="System.web.Mvc">
<namespaces>
<add namespace="System.Web.MVC"/>
<add namespace="System.Web.MVC.Ajax"/>
<add namespace="System.Web.MVC.Html"/>
<add namespace="System.Web.Routing"/>
<add namespace="Projeto.Estrutura"/>
</namespaces>
</pages>
Bom, espero que aproveitem esta dica e criem seus novos componentes. Até o próximo artigo.
Referência
MVChttp://www.asp.net/MVC
