Componentes Bootstrap para ASP.NET

Quando iniciamos um novo projeto, a primeira coisa que pensamos é, o que usar como acelerador para o desenvolvimento visual e logo nos vem a cabeça em usar o Bootstrap. Mais quem não conhece o Bootstrap acaba por ter que aprender para utilizar e isso poderá demandar um pouco de tempo e atrasar o projeto.

O Bootstrap é um framework CSS que nos permite desenvolver um website ou aplicação web utilizando uma gama de componentes e funcionalidades basicamente utilizando HTML, CSS e jQuery.

Já venho utilizando o Bootstrap a um bom tempo e já desenvolvi diversos projetos com ele e sempre que inicializo um novo projeto, eu preciso reescrever novamente as tags para ter todos os componentes que preciso em tela. Porem, com o objetivo de acelerar o meu desenvolvimento e também com o objetivo de estudar dois assuntos diferentes, resolvi criar os meus próprios ASP.NET Server Controls Bootstrap, ou seja, criei alguns componentes Bootstrap para ASP.NET.

Mais antes de ter feito isso, realizei uma rápida pesquisa pela internet para ver o que eu encontrava de projetos nesse nível. O que acabei por encontrar o projeto criado pelo Pedro Fernandes e que utilizei como ponta pé inicial para desenvolver o meu projeto. Alguns dos componentes criados por ele foram reaproveitados, outros modificados ou melhorados e outros reescritos. Vale lembrar que o meu único objetivo era para estudar ASP.NET Server Controls.

O objetivo desse artigo é mostrar um pouco do que foi feito com o comparativo de alguns componentes e a disponibilização do fontes. O componentes criados foram:

  • Alert
  • Button
  • PageHeader
  • Table
  • Images
  • Panel
  • Carousel
  • List Group
  • Collapse
  • Wells
  • Label
  • Breadcrumbs
  • Progress bars
  • Modal
  • Glyphicon

Carousel

O primeiro componente que irei citar é o Carousel que é um dos que mais gostei de criar. Se reparar, ele tem dois parâmetros, onde um eu informa o Glyphicon para avançar e outro apara retroceder o Carousel. Abaixo o código para uso em um WebForm.


<Bootstrap:Carousel ID="Carousel1" runat="server" GlyphiconNext="ChevronRight" GlyphiconPrev="ChevronLeft">
<CarouselTemplate>
<Bootstrap:CarouselItem AlternativeText="First slide"
ImageUrl="img1.jpg">
<CarouselCaptionTemplate>
<h4>First slide</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</CarouselCaptionTemplate>
</Bootstrap:CarouselItem>
<Bootstrap:CarouselItem AlternativeText="Second slide"
ImageUrl="img2.jpg">
<CarouselCaptionTemplate>
<h4>Second slide</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</CarouselCaptionTemplate>
</Bootstrap:CarouselItem>
<Bootstrap:CarouselItem AlternativeText="Third slide" ImageUrl="img3.jpg">
<CarouselCaptionTemplate>
<h4>Third slide</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</CarouselCaptionTemplate>
</Bootstrap:CarouselItem>
</CarouselTemplate>
</Bootstrap:Carousel>

Se eu tivesse que escrever o HTML do Carousel, ele seria algo parecido com o que teremos abaixo.


<div id="Carousel1" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#Carousel1"></li>
<li data-slide-to="1" data-target="#Carousel1"></li>
<li data-slide-to="2" data-target="#Carousel1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="First slide" src="img1.jpg">
<div class="carousel-caption">
<h4>First slide</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</div>
</div><div class="item">
<img alt="Second slide" src="img2.jpg">
<div class="carousel-caption">
<h4>Second slide</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</div>
</div><div class="item">
<img alt="Third slide" src="img3.jpg">
<div class="carousel-caption">
<h4>Third slide</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#Carousel1" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#Carousel1" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

Collapse

Outro componente que gostei muito de ter feito foi o Collapse. Esse me ajudou bastante a entender todo o funcionamento de um Server Control e o resultado ficou ótimo. Repare que o componente possui em seu conteúdo Button, ou seja, temos a possibilidade de utilizar outros Server Controls dentro do Collapse. Para escrever seu código em ASP.NET, ficará da seguinte forma:


<Bootstrap:Collapse ID="Collapse1" runat="server">
<CollapseTemplate>
<Bootstrap:CollapseItem ID="CollapseItem1" runat="server" Opened="true">
<HeaderTemplate>
Collapsible Group Item #1
</HeaderTemplate>
<BodyTemplate>
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
<Bootstrap:Button ID="Button11" runat="server" ButtonType="Danger" Text="Button Sample" />
</BodyTemplate>
</Bootstrap:CollapseItem>
<Bootstrap:CollapseItem ID="CollapseItem2" runat="server" Opened="false">
<HeaderTemplate>
Collapsible Group Item #2
</HeaderTemplate>
<BodyTemplate>
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
<Bootstrap:Button ID="Button12" runat="server" ButtonType="Success" Text="Button Sample" />
</BodyTemplate>
</Bootstrap:CollapseItem>
</CollapseTemplate>
</Bootstrap:Collapse>

Já o HTML é conforme abaixo (irei resumi-lo pois ficará um código muito grande:


<div id="Collapse1" class="panel-group">
<div id="Collapse1_CollapseItem1" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#Collapse1" href="#Collapse1_CollapseItem1_ctl01" class="">Collapsible Group Item #1
</a>
</h4>
</div>
<div id="Collapse1_CollapseItem1_ctl01" class="panel-collapse collapse in" style="height: auto;">
<div class="panel-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
<a id="Collapse1_CollapseItem1_ctl01_Button11" class="btn btn-danger" href="javascript:__doPostBack('Collapse1$CollapseItem1$ctl01$Button11','')">Button Sample</a>
</div>
</div>
</div>
<div id="Collapse1_CollapseItem2" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#Collapse1" href="#Collapse1_CollapseItem2_ctl01" class="collapsed">Collapsible Group Item #2
</a>
</h4>
</div>
<div id="Collapse1_CollapseItem2_ctl01" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
<a id="Collapse1_CollapseItem2_ctl01_Button12" class="btn btn-success" href="javascript:__doPostBack('Collapse1$CollapseItem2$ctl01$Button12','')">Button Sample</a>
</div>
</div>
</div>
</div>

Glyphicon

Já o Glyphicon, ele é o mais simples. Nos permite incluir um ícone apensar selecionando de uma lista e pode ser usado da seguinte forma:


<Bootstrap:Glyphicon ID="Glyphicon1" runat="server" GlyphiconType="Adjust" />

O HTML, segundo a documentação do Bootstrap ficará assim:


<span class="glyphicon glyphicon-star"></span>

Alem dos componentes citados, alguns outros foram criados e outros poderiam ser facilmente implementados. Porem, deixarei aqui disponível o fonte para quem quiser aprender um pouco sobre o desenvolvimento de ASP.NET Server Control e do Bootstrap.

Veja abaixo os outros componentes criados:

Button

Modal

Tables

Progressbar

Panel

List Group

Fonte do projeto: Github.

Não deixe de participar do fórum. Siga o C# Brasil no Twitter e Facebook.

Até o próximo artigo e bons estudos!

4 thoughts on “Componentes Bootstrap para ASP.NET”

  1. Obrigado pela dica.
    Iniciei a pouco tempo no curso ADV, o c# com orientação a objetos, e achei o que o site possui ótimas dicas para me aperfeiçoar.

  2. Valeu pela dica, vi o código da classe modal, e gostaria de aprender mais sobre o mesmo, alguns códigos que vi como: PersistenceMode, TemplateInstance, ParseChildren. Gostaria que indicasse um livro ou apostila que ensinasse mais, para que não só copie e código, mas aprenda.
    Desde já obrigado.

    1. Olá Felipe

      Existe um livro muito bom que gosto e possuo que é o ASP.NET Avançado do Hamilton Veríssimo. Talvez seja um pouco difícil de encontrar por ser um livro lançado em 2005.
      Mais dá uma pesquisa no Google que você vai encontra-lo.

Os comentários estão fechados.