Web developer tutorial: Bootstrap

Introduction

Here i am going to explain how to create a rating control in ASP.Net with Bootstrap.

Step 1
Download files from github.com.

Step 2

Open Visual Studio, add your downloaded file into your project .

<head runat="server">  
    <title></title>  
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />  
    <link href="Bootstrap/css/star-rating.css" rel="stylesheet" />  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
    <script src="Bootstrap/js/star-rating.js"></script>  
</head>  

Step 3

Now call your rating control. Before calling your rating control please learn how to use Bootstrap from my previous article.

<div class="row">  
  <div class="col-lg-12">  
   
  <input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl" >  
  <hr>  
  <input id="input-21b" type="number" class="rating" min=0 max=5 step=0.5 data-glyphicon="false" data-star-captions="{}" data-default-caption="{rating} Stars" data-size="lg">  
  <hr>  
  <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">  
  <hr>  
  <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">  
  <hr>  
  <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >  
  <hr>  
  </div>  
</div>  

Here, value is your filled start on page load, min is the minimum star value, max is the maximum star or maximum rating, data-size is your rating control size.

For your better understanding please visit here.

Step 4

Now we can see how to get the rated value from this rating control using jQuery as in the following:

<script>  
       $(document).ready(function () {  
           $("#input-21b").on("rating.change", function (event, value, caption) {  
               alert("You rated: " + value + " = " + $(caption).text());  
           });  
       });  
   </script>  

Step 5

Let's see how to get the rated value from code behind in C#. Add one hidden field in your design page and assign your rated value into your hidden field.

<asp:HiddenField ID="hdfRatingValue" runat="server" />  

Now assign your rated value into your hidden field. Let's see how to do this using jQuery.

<script>  
       $(document).ready(function () {  
           $("#input-21b").on("rating.change", function (event, value, caption) {  
                 
               var ratingValue = $('#<%=hdfRatingValue.ClientID%>').val();  
               ratingValue = value;  
               alert(ratingValue);  
           });  
       });  
   </script>  

Now you can get the rating value from code behind. Type hdfRating.value and save your value to the database.

Full Example

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="RatingControl.index" %>  
  
<!DOCTYPE html>  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />  
    <link href="Bootstrap/css/star-rating.css" rel="stylesheet" />  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
    <script src="Bootstrap/js/star-rating.js"></script>  
  
    <script>  
        $(document).ready(function () {  
            $("#input-21b").on("rating.change", function (event, value, caption) {  
                  
                var ratingValue = $('#<%=hdfRatingValue.ClientID%>').val();  
                ratingValue = value;  
                alert(ratingValue);  
            });  
        });  
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
         
        <div class="row">  
<div class="col-lg-12">  
     
    <input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl" >  
    <hr>  
    <input id="input-21b" type="number" class="rating" min=0 max=5 step=0.5 data-glyphicon="false" data-star-captions="{}" data-default-caption="{rating} Stars" data-size="lg">  
    <hr>  
    <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">  
    <hr>  
    <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">  
    <hr>  
    <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >  
    <hr>  
    </div>  
        </div>  
      
    </div>  
         <asp:HiddenField ID="hdfRatingValue" runat="server" />  
    </form>  
</body>  
</html>  

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
  
namespace RatingControl  
{  
    public partial class index : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
  
        }  
        public void saveRating()  
        {  
          string val= hdfRatingValue.Value;  
        }  
    }  
}  

Introduction:

Here i am going to explain how to add bootstrap Carousel plugin slider into your website. You can read my previous article to read how to implement bootstrap.

Steps:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/img_chania.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/img_chania2.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/img_flower.jpg" alt="Flower">
</div>
<div class="item">
<img src="img/img_flower2.jpg" alt="Flower">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Web developer tutorial

Thursday, 31 March 2016

How to Create Rating Control in ASP.Net With Bootstrap

How to add Bootstrap Carousel slider

Blog Archive