Thursday 31 March 2016

How to Create Rating Control in ASP.Net With 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 .

  1. <head runat="server">  
  2.     <title></title>  
  3.     <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />  
  4.     <link href="Bootstrap/css/star-rating.css" rel="stylesheet" />  
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
  6.     <script src="Bootstrap/js/star-rating.js"></script>  
  7. </head>  
Step 3
Now call your rating control. Before calling your rating control please learn how to use Bootstrap from my previous article.
  1. <div class="row">  
  2.   <div class="col-lg-12">  
  3.    
  4.   <input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl" >  
  5.   <hr>  
  6.   <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">  
  7.   <hr>  
  8.   <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">  
  9.   <hr>  
  10.   <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">  
  11.   <hr>  
  12.   <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >  
  13.   <hr>  
  14.   </div>  
  15. </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:
  1. <script>  
  2.        $(document).ready(function () {  
  3.            $("#input-21b").on("rating.change"function (event, value, caption) {  
  4.                alert("You rated: " + value + " = " + $(caption).text());  
  5.            });  
  6.        });  
  7.    </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.
  1. <asp:HiddenField ID="hdfRatingValue" runat="server" />  
Now assign your rated value into your hidden field. Let's see how to do this using jQuery. 
  1. <script>  
  2.        $(document).ready(function () {  
  3.            $("#input-21b").on("rating.change"function (event, value, caption) {  
  4.                  
  5.                var ratingValue = $('#<%=hdfRatingValue.ClientID%>').val();  
  6.                ratingValue = value;  
  7.                alert(ratingValue);  
  8.            });  
  9.        });  
  10.    </script>  
Now you can get the rating value from code behind. Type hdfRating.value and save your value to the database.
 
Full Example
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="RatingControl.index" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />  
  9.     <link href="Bootstrap/css/star-rating.css" rel="stylesheet" />  
  10.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
  11.     <script src="Bootstrap/js/star-rating.js"></script>  
  12.   
  13.     <script>  
  14.         $(document).ready(function () {  
  15.             $("#input-21b").on("rating.change", function (event, value, caption) {  
  16.                   
  17.                 var ratingValue = $('#<%=hdfRatingValue.ClientID%>').val();  
  18.                 ratingValue = value;  
  19.                 alert(ratingValue);  
  20.             });  
  21.         });  
  22.     </script>  
  23. </head>  
  24. <body>  
  25.     <form id="form1" runat="server">  
  26.     <div>  
  27.          
  28.         <div class="row">  
  29. <div class="col-lg-12">  
  30.      
  31.     <input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl" >  
  32.     <hr>  
  33.     <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">  
  34.     <hr>  
  35.     <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">  
  36.     <hr>  
  37.     <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">  
  38.     <hr>  
  39.     <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >  
  40.     <hr>  
  41.     </div>  
  42.         </div>  
  43.       
  44.     </div>  
  45.          <asp:HiddenField ID="hdfRatingValue" runat="server" />  
  46.     </form>  
  47. </body>  
  48. </html>  
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace RatingControl  
  9. {  
  10.     public partial class index : System.Web.UI.Page  
  11.     {  
  12.         protected void Page_Load(object sender, EventArgs e)  
  13.         {  
  14.   
  15.         }  
  16.         public void saveRating()  
  17.         {  
  18.           string val= hdfRatingValue.Value;  
  19.         }  
  20.     }  
  21. }  

How to create new AMP pages

Introduction:

Here i am going to explain how to create Accelerated Mobile Pages Project (AMP).

What is AMP page.? 

The Accelerated Mobile Pages (AMP) Project is an open source initiative that makes it easy for publishers to create mobile-friendly content.

Step 1: Your html must start with <html amp>
Step 2: Your page must have canonical tag
Step 3: Your page must have viewport meta tag
Step 4: Your page should have all google structured date tags

For example: 
  1.      <meta property="og:site_name" content="OnetamilNews" />
  2.     <meta property="og:url" content="Content">
        <meta property="og:type" content="article"/>
        <meta itemprop="datePublished" content="12-12-12" />
        <meta itemprop="dateModified" content="12-12-12"/>
        <meta property="og:image" content="img/1.png"/>
   

Step 5: You should't use any external css and js files except amp related files.

Step 6: Create inline css and your style tag should start like this
  1.   <style amp-custom>
  2.         body {
                font-family: "Merriweather Sans",Arial,Helvetica,sans-serif;
                background: #f4f4f4;
            }
    </style>


Step 7: Include your amp files



  1. <head>  
  2.    <script custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" async></script>
        <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
        <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
        <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
        <script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" async></script>
        <%--<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>--%>
        <script src="https://cdn.ampproject.org/v0.js" async></script>
  3. </head>  

Step 8: Inside body design your page
        1. Image tag must start like this


  1. <body>  
  2.    <amp-img width=600 height=400 layout='responsive' src="img/1.jpg"/>
  3. </body>  


2. Your content should not have any inline css and any style attributes.
3. Don't use any javascript of juquery functions

Step 9: How to validate AMP page?
       
        Open developer console on your browser. Press F12
        Add #development=1 with your url
For Example: http://onetamilnews.com/AMP/newsdetail.aspx#development=1