BLOGs
Design & Development
Published September 19th, 2016 by

Using Bootstrap Components in ASP.NET

bootstrap components

In this blog post, asp.net development company India experts will talk about automating a few parts of development process. They will explain the use of Bootstrap components in asp.net. Read this post completely and learn how experts use it.

Hello everyone, today we will talk about how to automatize some part of our development process (very useful for full stack developers), mainly the creation of the design part of our ASP.NET applications.

Normally when we start a new project, the one of the things that we think of is that what to use to speed up the development of visual part, and many times the Bootstrap CSS framework comes to our choice. For those who doesn’t know the framework, must loose time to learn how to use it.

The Bootstrap is a framework for CSS which enables us to create a websites or application using a set of components and functionalities which are already pre built, and are mostly composed out of HTML, CSS and JQuery.

You may even be a very big specialist in the Bootstrap, doing a development for many time, but every time when you start a new project you will need to write again all tags to have components necessary for the screen.

Recently I’ve been searching a lot on the internet about bootstrap in .NET and found an awesome library, which already contains a large list of components. But also allows and teaches you how to build your own custom bootstrap components for the WebForms.

You may find that project at the following web site (http://tinyurl.com/BootstASPNET).

Let’s see what a project have to offer for us.

Carousel

The first component we will find in the library is the Carousel component, the very interesting and useful one. If you explore its component you will discover that it has two parameters, where one informs a Glyphicon to go forward and other to go backward. Here is the code which may be used inside of WebForm.

<Bootstrap:Carousel ID="MainCrl" runat="server" GlyphiconNext="Right" GlyphiconPrev="Left">

  <CarouselTemplate>

      <Bootstrap:CarouselItem AlternativeText="sld 1"

          ImageUrl="imgaw.jpg">

          <CarouselCaptionTemplate>

              <h4>Sample header</h4>

              <p>Sample text.</p>

          </CarouselCaptionTemplate>

      </Bootstrap:CarouselItem>

      <Bootstrap:CarouselItem AlternativeText="sld 2"

          ImageUrl="imgsfs.jpg">

          <CarouselCaptionTemplate>

              <h4>Sample heaader</h4>

              <p>sample text.</p>

          </CarouselCaptionTemplate>

      </Bootstrap:CarouselItem>

      <Bootstrap:CarouselItem AlternativeText="sld 3" ImageUrl="sdgfsdf.jpg">

          <CarouselCaptionTemplate>

              <h4>Sample Header</h4>

              <p>Sample Text</p>

          </CarouselCaptionTemplate>

      </Bootstrap:CarouselItem>

  </CarouselTemplate>

</Bootstrap:Carousel>

 

But if we had to write the HTML of a Carousel, it would look something like this:

<div id=" MainCrl " class="carousel slide" data-ride="carousel" data-interval="2000">

  <ol class="carousel-indicators">

      <li class="active" data-slide-to="0" data-target="#C1"></li>

      <li data-slide-to="1" data-target="#C1"></li>

      <li data-slide-to="2" data-target="#C1"></li>

  </ol>

  <div class="carousel-inner">

      <div class="item active">

          <img alt="sld 1" src="imgaw.jpg">

          <div class="carousel-caption">

              <h4>Sample header</h4>

              <p>sample text.</p>

          </div>

      </div><div class="item">

          <img alt="sld 2" src="imgsfs.jpg">

          <div class="carousel-caption">

              <h4>Sample header</h4>

              <p>Sample text</p> 

          </div>

      </div><div class="item">

          <img alt="sld 3" src="sdgfsdf.jpg">

          <div class="carousel-caption">

              <h4>Sample header</h4>

              <p>Sample text.</p>                              

          </div>

      </div>

  </div>

  <a class="left carousel-control" href="#C1" data-slide="prev"><span class="glyphicon glyphicon-left"></span></a>

  <a class="right carousel-control" href="#C1" data-slide="next"><span class="glyphicon glyphicon-right"></span></a>

</div>

 

Very different, and mainly when you making a development for webForms and then put a lot of html between your components it turns specially confusing.

Collapse component

Another component that I liked a lot is the Collapse component. This component has a button inside of its content that means that we have an ability to use other server controls inside of collapse. If you want to use this control in ASP.NET the code will look something like that:

<Bootstrap:Collapse ID="MyElement" runat="server">

  <CollapseTemplate>

      <Bootstrap:CollapseItem ID="Item1" runat="server" Opened="true">

          <HeaderTemplate>

              Item #1

          </HeaderTemplate>

          <BodyTemplate>

              <p>Some text goes here</p>

              <Bootstrap:Button ID="Btn1" runat="server" ButtonType="Danger" Text="first button" />

          </BodyTemplate>

      </Bootstrap:CollapseItem>

      <Bootstrap:CollapseItem ID="Item2" runat="server" Opened="false">

          <HeaderTemplate>

              Item #2

          </HeaderTemplate>

          <BodyTemplate>

              <p>Some text goes here</p>

              <Bootstrap:Button ID="Btn2" runat="server" ButtonType="Success" Text="second button" />

          </BodyTemplate>

      </Bootstrap:CollapseItem>

  </CollapseTemplate>

</Bootstrap:Collapse>

 

And again the corresponding component when written in HTML would look something like this:

<div id="MyElement" class="panel-group">

  <div id=" MyElement_Item1" class="panel panel-default">

      <div class="panel-heading">

          <h4 class="panel-title">

              <a data-toggle="collapse" data-parent="#MyElement" href="#MyElement_Item1_ctl01" class=""> Item #1

              </a>

          </h4>

      </div>

      <div id="MyElement_Item1_ctl01" class="panel-collapse collapse in" style="height: auto;">

          <div class="panel-body">

              <p>Some text goes here</p>

              <a id="MyElement_Item1_ctl01_Btn1" class="btn btn-danger" href="javascript:__doPostBack('MyElement$Item1$ctl01$Btn1','')">first button</a>

          </div>

      </div>

  </div>

  <div id="MyElement_Item2" class="panel panel-default">

      <div class="panel-heading">

          <h4 class="panel-title">

              <a data-toggle="collapse" data-parent="#Collapse1" href="#MyElement_Item2_ctl01" class="collapsed"> Item #2

              </a>

          </h4>

      </div>

     <div id="MyElement_Item2_ctl01" class="panel-collapse collapse" style="height: 0px;">

          <div class="panel-body">

              <p>Some text goes here</p>

              <a id="MyElement_Item2_ctl01_Btn2" class="btn btn-success" href="javascript:__doPostBack('MyElement$Item2$ctl01$Btn2','')">second button</a>

          </div>

      </div>

  </div>

</div>

 

Glyphicon

Now the glyphicon is the simplest one. This control enables us to include an icon only by selecting one from the list of available icons, and could be used in the following way:

<Bootstrap:Glyphicon ID="FirstAccount" runat="server" GlyphiconType="Home" />

The corresponding HTML, following the bootstrap framework documentation would look like this:

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

You may also find other very useful components in that library, also if you know how to implement custom ASP.NET Server Controls you may implement your own bootstrap components.

Between other components that are already in the library you may find:

Alert Component, Modal Component, Page Header Component, Table Component, Images Component, Panel Component, Button Component, Label Component, Breadcrumbs Component.

Experts of asp.net development company in India have shared this post to explain the use of Bootstrap components in asp.net. Hope everything explained by them in this post is to the point. If you think they have skipped anything, tell in comments.

Conclusions

So we can conclude two very important things with that library, one is that we don’t need any more to style our application with bootstrap css only client side, but instead now we can invent structures, where one may pass configurations for our bootstrap programmatically (from the server).

And the second one the one that automation actually can speed up our work, in many situations we may lost some time writing the to automate our development, but in the long term it will bring us incomparable advantage in the form of time saving and code consistency.

 

 

 

Johnny Morgan

Technical Writer at Aegis Infoways
Johnny Morgan as a technical writer at Aegis Infoways since more than 5 years. I write articles especially for Java, Python and Asp.Net. I have also got well response to write articles on CRM, Hadoop and QA.

Our rankings are completely independent, transparent, and community driven; they are based on user reviews and client sentiment. These design & development companies had to earn their way up and didn't just pay their way up.

View Rankings of Best Design & Development Companies