How to Use Rating Concepts on ASP.NET Web Page

By
Introduction :-  While we are accessing a web page on the internet then you will see, a web page request for user's feedback.This feed back provides a key metric to recognize the satisfaction of users. So, the owner of the materials provides a rating system that represent a set of stars, which can be used to receive the feedback.The rating mechanism used by ASP.NET needs a synchronous postback. Here i have used ten rating stars.You can see it after run this application. If you are not installing AjaxToolKit on your visual studio, You can install it from here.  
There are some important properties of rating control as given below:-
  • AutoPostBack :- It sets  to true if you want to perform a postback by clicking a rating item.
  • CurrentRating : - It sets the initial rating value to display the selected rating item when the page is loaded.
  • MaxRating :- It sets the maximum rating value that you want to allow to rate an item.
  • StarCssClass :- It sets the CSS class for the visible star.
  • RatingAlign :-It sets  an alignment for the starts.Vertical or Horizontal.
  • Tag :- It sets the custom parameter to pass to the ClientCallBack event.
  • ReadOnly :- It determines whether or not the rating can be changed.
  • RatingDirection :- It sets the rating direction.The value can be Left To Right ,Top To Bottom or Right To Left, Bottom To Top .
  • WaitingStarCssClass :- It sets the CSS class for the star in the filled state.
  • FilledStarCssClass :- It sets the CSS class for the the star in the filled state. 
  • EmptyStarCssClass :- It sets the CSS class for the the star in the Empty state. 
  • OnChanged :- It sets the clientCallBack event to fire when the rating item is changed. 
There are some steps to implement this whole concepts as given below:-
Step 1:- First open your visual studio -->  File  --> New -->Website --> Select ASP.NET Empty website ---> OK ---> Open Solution Explorer --> Add a New Web Form (Default.aspx) --> Drag and Drop ToolkitScriptManager on the page -->Paste three type star images in your solution Explorer as given below:-
explorer

Step 2:- Now Open Source file (html codes)-->Drag and Drop Rating Control here ---> Sets some properties also as given in this below codes:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Rating Controls</title>
    <style type="text/css">
        .rateStar
	{
		white-space:nowrap;
		margin:1em;
		height:14px;
	}
	.rateItem 
	{
		font-size: 0pt;
		width: 13px;
		height: 12px;
		margin: 0px;
		padding: 0px;
		display: block;
		background-repeat: no-repeat;
		cursor:pointer;
	}
	.FillStar
	{
		background-image: url(images/FilledStar.png);
	}
	.BlankStar 
	{
		background-image: url(images/BlankStar.png);
	}
	.SaveStar
	{
		background-image: url(images/SavedStar.png);
	}
	    .style1
        {
            color: #FF0066;
        }
        .style2
        {
            color: #000099;
        }
        .style3
        {
            background-color: #FFCCFF;
        }
	</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <strong><span class="style1">
        Click on the stars to rate the Titles&nbsp; 
        mentioned below</span>:-</strong><br />
        <span class="style2"><strong><span class="style3">MY.NET Tutorials</span></strong></span><br />
        <asp:Rating ID="Rating1" runat="server" CurrentRating="4" MaxRating="10" 
 		  CssClass="rateStar" StarCssClass="rateItem" WaitingStarCssClass="SaveStar" 
 		  FilledStarCssClass="FillStar" EmptyStarCssClass="BlankStar" 
 		  AutoPostBack="true">
        </asp:Rating>
        <strong><span class="style3">INDIA</span></strong><br />
        <asp:Rating ID="Rating2" runat="server" CurrentRating="5" MaxRating="10" 
 		  CssClass="rateStar" StarCssClass="rateItem" WaitingStarCssClass="SaveStar" 
 		  FilledStarCssClass="FillStar" EmptyStarCssClass="BlankStar" 
 		  AutoPostBack="true">
        </asp:Rating>
        <strong><span class="style3">US</span></strong><br />
        <asp:Rating ID="Rating3" runat="server" CurrentRating="5" MaxRating="10" 
 		  CssClass="rateStar" StarCssClass="rateItem" WaitingStarCssClass="SaveStar" 
 		  FilledStarCssClass="FillStar" EmptyStarCssClass="BlankStar" 
 		  AutoPostBack="true">
        </asp:Rating>
    </div>
    </form>
</body>
</html>

Step 3:- Now Click Design --> You will see following stars  on the Form as shown below:-
form

Step 4:- Now run the application(press F5) --> You will see following output as shown below:-


For More...
  1. Create registration and login page with all functionality
  2. Create setup file and install it on your desktop
  3. oops concepts in c#
  4. Three tier Architecture concepts with real life examples
  5. Call by value and call by reference
  6. How To SQL(.mdf) database on asp.net website
Download Whole Attached File
      DOWNLOAD

0 comments:

Post a Comment

Powered by Blogger.