AJAX Control Toolkit Tutorials using Rating Extender ASP.NET C#



AJAX Control Toolkit Tutorials using Rating Extender ASP.NET C#

 

AJAX Control Toolkit Tutorials using Rating Extender ASP.NET C#
Were you looking for a Tutorial on the Ajax Control Toolkit Rating Extender? If you were then you have reach the right place to Learn AJAX using ASP.NET and C#.
In Today’s Tutorial we will show you a simple example on how to use this simple but very useful control to put on your web forms. For instance if you are asking a few questions and you would like some sort of dynamic feedback option from your visitors, you would then use this control and insert images such as Yellow stars or Even Thumbs up so your visitors can rate your content or review or product, Similar to a movie review site or a Restaurant review website.
AJAX has made web development very dynamic and exciting, The AJAX Control toolkit has also simplified how AJAX is now used and can be used. Thanks to the AJAX it is now possible to use it virtually on any website or webform.
And …..
Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we've found so far.
 
Below is the reference from the Microsoft AJAX control Toolkit Library.
 
 
Reference list for the Rating control
 
The Rating control provides an intuitive rating experience that allows users to select the number of stars that represents their rating. The page designer can specify the initial rating, the maximum rating to allow, the alignment and direction of the stars, and custom styles for the different states a star can have. Rating also supports a ClientCallBack event that allows custom code to run after the user has rated something.
The properties in italics are optional.
1. <ajaxToolkit:Rating ID="ThaiRating" runat="server"  
2.     CurrentRating="2"  
3.     MaxRating="5"  
4.     StarCssClass="ratingStar"  
5.     WaitingStarCssClass="savedRatingStar"  
6.     FilledStarCssClass="filledRatingStar"  
7.     EmptyStarCssClass="emptyRatingStar"  
8.     OnChanged="ThaiRating_Changed" />  
·         AutoPostBack - True to cause a postback on rating item click.
·         CurrentRating - Initial rating value
·         MaxRating - Maximum rating value
·         ReadOnly - Whether or not the rating can be changed
·         StarCssClass - CSS class for a visible star
·         WaitingStarCssClass - CSS class for a star in waiting mode
·         FilledStarCssClass - CSS class for star in filled mode
·         EmptyStarCssClass - CSS class for a star in empty mode
·         RatingAlign - Alignment of the stars (Vertical or Horizontal)
·         RatingDirection - Orientation of the stars (LeftToRightTopToBottom or RightToLeftBottomToTop)
·         OnChanged - ClientCallBack event to fire when the rating is changed
·         Tag - A custom parameter to pass to the ClientCallBack
 
It is Super Simple to Add AJAX to our webform or website.
Here How!
·         First Things First we will add a New WebForm to this project and name it Rating.aspx
·         When using AJAX in Viausla Studio, you will always want to add a ScriptManager to the page.
·         Then you will want then add a Rating control extender to whatever form you have made.
·         Now we have built a simple and straight forward asking how spicy you like your food.
·         We did that by adding a few panels, Labels and other controls.
·         Reference the Markup Below to see how we did it. You may do this however you would like to.
·         Have Fun !
 
 
The markup of the page will look like
<%@ Page Language="C#" %>
<%@ 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">
 
<script runat="server">
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        ThaiRating.RatingAlign = (lstAlign.SelectedIndex == 1) ?
                Orientation.Vertical :
                Orientation.Horizontal;
        ThaiRating.RatingDirection = (lstDirection.SelectedIndex == 1) ?
                RatingDirection.RightToLeftBottomToTop :
                RatingDirection.LeftToRightTopToBottom;
    }
 
    protected void Submit_Click(object sender, EventArgs e)
    {
        string howSpicy = "[unknown]";
        switch (ThaiRating.CurrentRating)
        {
            case 1:
                howSpicy = "bland";
                break;
            case 2:
                howSpicy = "mild";
                break;
            case 3:
                howSpicy = "spicy";
                break;
            case 4:
                howSpicy = "scorching hot";
                break;
            case 5:
                howSpicy = "tongue melting";
                break;
        }
        lblResponse.Text = "You prefer Thai food that is <b>" + howSpicy + "</b>.";
    }
 
    protected void ThaiRating_Changed(object sender, RatingEventArgs e)
    {
        System.Threading.Thread.Sleep(400);
        e.CallbackResult = "Update done. Value = " + e.Value + " Tag = " + e.Tag;
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ajax Control - Rating</title>
    <style>
   
.ratingStar {
    font-size: 0pt;
    width: 13px;
    height: 12px;
    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);
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1"   runat="server">
        </asp:ToolkitScriptManager>
             
        <b>Rating Demonstration</b><br /><br />
        <asp:UpdatePanel runat="server" ID="up1">
            <ContentTemplate>
                <div style="float: left;">How spicy do you like your Thai food? &nbsp;</div>
                <asp:Rating ID="ThaiRating" runat="server" BehaviorID="RatingBehavior1"
                    CurrentRating="2"
                    MaxRating="5"
                    StarCssClass="ratingStar"
                    WaitingStarCssClass="savedRatingStar"
                    FilledStarCssClass="filledRatingStar"
                    EmptyStarCssClass="emptyRatingStar"
                    OnChanged="ThaiRating_Changed"
                    style="float: left;" />
                  
                <div style="clear:left;">
                    <table>
                        <tr>
                            <td>Alignment:</td>
                            <td>
                                <asp:DropDownList ID="lstAlign" runat="server" AutoPostBack="true">
                                    <asp:ListItem Selected="true" Text="Horizontal" />
                                    <asp:ListItem Text="Vertical" />
                                </asp:DropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td>Direction:</td>
                            <td>
                                <asp:DropDownList ID="lstDirection" runat="server" AutoPostBack="true">
                                    <asp:ListItem Selected="True" Text="Left to Right or Top to Bottom" />
                                    <asp:ListItem Text="Right to Left or Bottom to Top" />
                                </asp:DropDownList>
                            </td>
                        </tr>
                    </table>
                    <br />
                   
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit_Click" /><br /><br />
                    <asp:Label ID="lblResponse" runat="server" Text="[No response provided yet]"></asp:Label>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
 
    </form>
</body>
</html>
 
 Load the page in browser looks like as follows
 
 
The output in browser after clicking the link button will be
 
 As you know
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
So We hope you enjoyed our Nifty AJAX tutorial, We try to keep things simple so you may understand what is going on, As these Controls start to get a little more complex we will also get into more details. We encourage you to develop some controls and get creative, We Have the latest AJAX Information on AJAXTutorials.com and if you ever need more tutorials you can always look here or suggest some.
If you have questions regarding this or any tutorials please feel free to comment below.
Also
Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we've found so far.
 
 
We look forward to your feedback if there is a particular Tutorial or Subject you would like to see please feel free to suggest it in our Suggest a Tutorial Section.
 
Thank You for visiting AJAXTutorials.com the Place to Learn about AJAX ASP.NET


Comments
Sengkang West Way EC said:

Several buses are available near Lush Acres EC along with shopping centers and restaurants. Lush Acres EC is also near Waterway Point, the shopping, dining and entertainment hub which is scheduled to open in 2 years time in Sengkang. Also, it is right beside Fernvale Link. Entertainment for your loved ones and friends are therefore at your fingertips with the full condo facilities as well as the amenities near Lush Acres EC.

Posted Jun 21, 2013 12:46 AM
Timberland Shoes said:

There are no comments yet...Kick things off by filling out the form below.

Posted Jun 25, 2013 5:48 AM
avukat ankara said:

good project thanks

Posted Jul 13, 2013 4:46 AM
mekanik karıştırıcı fiyatları said:

Thanks for providing some food for thought with this post.

Posted Aug 7, 2013 2:23 PM
The Panorama Ang Mo Kio said:

With such a short drive to the city area as well as the orchard and bugis area, entertainment for your love ones and family will come at a stone’s throw away in Ang Mo Kio Condo Launch

Posted Aug 30, 2013 1:07 AM
The Inflora said:

The Inflora Condo is a new and upcoming Flora Road New Launch Condo located in Flora Road, within a short drive to Singapore Expo, Tampines Point, Century Square and IKEA. With expected completion in mid 2017, it comprises of TBA towers with TBA units and stands TBA storeys tall

Posted Sep 13, 2013 9:04 AM
Uçak Kiralama said:

Uçak Kiralama Hizmet Helikopter Turu , Jet Kiralama , Vip Uçak

Posted Sep 20, 2013 8:40 AM

Leave a Comment