Thursday, December 04, 2008

Rating Control Ajax - Display Message on Rating

One Famous Problem with Rating Control is How to Display Message after Rating is done, without making use of button click.

Following Images Explain How can we display label text on Rating Control Click, without explicitly clicking any button control.

Before Rating Control is Clicked


During Rating Control is Clicked


After Rating Control is Clicked


Now, lets understand how to display message on click of Star Image.

Step1: Declare CSS Styles in Style Sheet file Also Add Images to Image Folder


.ratingStar {
font-size: 0pt;
width: 31px;
height: 30px;
margin: 0px;
padding: 0px;
cursor: pointer;
display: block;
background-repeat: no-repeat;
}

.filledRatingStar {
background-image: url(Images/FilledStar.png);

}

.emptyRatingStar {
background-image: url(Images/EmptyStar.png);
}

.savedRatingStar {
background-image: url(Images/SavedStar.png);
}


Step2: Declare ScriptManager in .aspx file with EnablePartialRendering=true

<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>

Step3: Declare UpdatePannel

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- Declare Rating Control Here -->
</ContentTemplate>
</asp:UpdatePanel>

Step4: Add Rating Control and Label in UpdatePannel

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- Rating Control -->
<cc1:Rating ID="Rating1" runat="server"
BehaviorID="RatingBhvrId1"
CurrentRating="3"
MaxRating="5"
StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyRatingStar"
OnChanged="Rating1_Changed"
ToolTip="Please Rate!"
style="float:left;">
</cc1:Rating>

<!-- Label to Display Message -->
<span id="lblResponse" class="heading"></span>
</ContentTemplate>
</asp:UpdatePanel>

Step5: Declare Necessary Javascript to show "Message" after user performs Rating with the help of e.CallbackResult

<script language="javascript" type="text/javascript">
Sys.Application.add_load(function()
{
$find("RatingBhvrId1").add_EndClientCallback(function(sender, e)
{
var lblCtrl = document.getElementById('lblResponse');
lblCtrl.innerHTML = e.get_CallbackResult();
});
});
</script>
Step6: Declaring Rating1_Changed Event
protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
System.Threading.Thread.Sleep(500);
int iRate = Convert.ToInt16(e.Value);
string strMessage = string.Empty;
switch (iRate)
{
case 1:
strMessage = "Not Useful";
break;
case 2:
strMessage = "Average";
break;
case 3:
strMessage = "Useful";
break;
case 4:
strMessage = "Informative";
break;
case 5:
strMessage = "Excellent";
break;
}
strMessage = "Thanks for Rating, You found this Question " + strMessage;
e.CallbackResult = strMessage;
}

Summary View of .aspx Page

<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<cc1:Rating ID="Rating1" runat="server"
BehaviorID="RatingBhvrId1"
CurrentRating="3"
MaxRating="5"
StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyRatingStar"
OnChanged="Rating1_Changed"
ToolTip="Please Rate!"
style="float:left;">
</cc1:Rating>
<br />
<span id="lblResponse" class="heading"></span>
<script language="javascript" type="text/javascript">
Sys.Application.add_load(function()
{
$find("RatingBhvrId1").add_EndClientCallback(function(sender, e)
{
var lblCtrl = document.getElementById('lblResponse');
lblCtrl.innerHTML = e.get_CallbackResult();
});
});
</script>
</ContentTemplate>
</asp:UpdatePanel>

7 comments:

DotNetGuts said...

For maintaining scroll position of rating control.

Maintain Scroll Position Rating Control

Ivan said...

Thanks, really helpful!

Anonymous said...

why do you put a sleep in your change event?

DotNetGuts said...

Sleep is too create time delay, you can replace sleep with actual database code.

Anonymous said...

Instead of writing custom JS, you can set AutoPostBack="true" in the Ajax Rating control and alter your Changed Event to read:

lblResponse.Text = "Update done. Value = " + e.Value + "Tag = " + e.Tag;

Abhishek said...

I am getting the following error:
Microsoft JScript runtime error: 'Sys' is undefined.

Any idea, on how to resolve this?

Unknown said...

It works nice for me. Good job! ;)

Most Recent Post

Subscribe Blog via Email

Enter your email address:



Disclaimers:We have tried hard to provide accurate information, as a user, you agree that you bear sole responsibility for your own decisions to use any programs, documents, source code, tips, articles or any other information provided on this Blog.
Page copy protected against web site content infringement by Copyscape