ASP.NET - Please Read The Complete Post Belongs to AJAX HALF STAR

Asked By Venkatesh Desai on 14-Mar-12 07:26 AM
Earn up to 10 extra points for answering this tough question.

Hi All,


I am using AJAX RATING CONTROL,

If My AVG Rating Count is 3 Then My Filled Stars Wants to be show 3

If My AVG Rating Count is 2.6 Then My Filled Stars Wants to be Show 2 ½ mark

But it was not showing then also it is showing 3 stars.


My Code & My Database Goes Like This,


Create Table Averagerating

(

    ID int IDENTITY(1,1) Primary Key,

    Rating Float,

    UserName Varchar(50)

)

 

<style type="text/css">

    .ratingStar

   {

    white-space:nowrap;

    margin:1em;

    height:14px;

  }

  .ratingStar .ratingItem

{

    font-size: 0pt;

    width: 13px;

    height: 12px;

    margin: 0px;

    padding: 0px;

    display: block;

    background-repeat: no-repeat;

    cursor:pointer;

  }

  .ratingStar .Filled

{

    background-image: url(Images/FilledStar.PNG);

  }

  .ratingStar .Empty

{

    background-image: url(Images/EmptyStar.PNG);

  }

  .ratingStar .Saved

{

    background-image: url(Images/SavedStar.PNG);

  } 

    </style>

<body>

    <form id="form1" runat="server">

    <AJAX:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </AJAX:ToolkitScriptManager>

    <div>

   <asp:UpdatePanel ID="pnlRating" runat="server">

      <ContentTemplate>

      <table width="35%">

        <tr>

        <td width="27%">

          <asp:Label ID="lblMyRating" runat="server" Text="My Average Rating" Font-Bold="true"></asp:Label>

        </td>

        <td>

          <AJAX:Rating ID="Rating1" runat="server" CurrentRating="3" MaxRating="5"

            CssClass="ratingStar" AutoPostBack="true"

            StarCssClass="ratingItem" WaitingStarCssClass="Saved"

            FilledStarCssClass="Filled" EmptyStarCssClass="Empty"

            onchanged="Rating1_Changed">

          </AJAX:Rating>

          <asp:Label ID="lblDisplay" runat="server" ForeColor="Red" Font-Bold="true"></asp:Label>

        </td>

        </tr>

      </table>

      </ContentTemplate>

    </asp:UpdatePanel>

    </div>

    </form>

</body>


SqlConnection con = new SqlConnection("MY CONNECTION");

protected void Page_Load(object sender, EventArgs e)

    {

    if (!IsPostBack)

    {

      BindAverageRatingControl();

    }

    }

    public void BindAverageRatingControl()

    {

   

    DataTable dt = new DataTable();

    con.Open();

    SqlCommand cmd = new SqlCommand("SELECT COUNT(ID) AS NumberOfUsers,SUM(Rating) AS Total FROM Averagerating", con);

    SqlDataAdapter da = new SqlDataAdapter(cmd);

    da.Fill(dt);

    float COUNT = float.Parse(dt.Rows[0]["NumberOfUsers"].ToString());

    float RATING = float.Parse(dt.Rows[0]["Total"].ToString());

    float Result = RATING / COUNT;

    Rating1.CurrentRating = Convert.ToInt32(Result);

    lblDisplay.Text = Result.ToString("0.0");

    }

    protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)

    {

    con.Open();

    SqlCommand cmd = new SqlCommand("Insert Into Averagerating(Rating,UserName)values(@Rating,@UserName)", con);

    cmd.Parameters.AddWithValue("@Rating", Rating1.CurrentRating);

    cmd.Parameters.AddWithValue("@UserName", "DESAI");

    cmd.ExecuteNonQuery();

    con.Close();

    BindAverageRatingControl();

    }



Here my doubt is I want to add Half-Star Image on code behind (OR) I want to use Hover Menu.

Here I wont use JQUERY At All. 

Please give me the answer


Regards,

VenkiDesai.K


[)ia6l0 iii replied to Venkatesh Desai on 14-Mar-12 11:59 AM
The answer lies in your code.
Rating1.CurrentRating = Convert.ToInt32(Result);

So, if you see , currentRating property of this control expects an Integer. Yes, it is behavior by design. This control does not support float values. 

You will have to end up using a jQuery rating plugin, or write a custom one like the one in the link below.
http://imar.spaanjaars.com/410/building-a-simple-rating-control-for-aspnet-20
Somesh Yadav replied to Venkatesh Desai on 15-Mar-12 01:25 AM
Hi try this,

http://www.codeproject.com/Articles/17399/AJAX-ASP-NET-Rating-Control

http://www.aspfree.com/c/a/ASP.NET/Playing-with-Images-in-ASPNET-35-AJAX-Applications/

http://www.codeproject.com/Articles/16009/A-Much-Easier-to-Use-ListView

hope it helps you.
Venkatesh Desai replied to [)ia6l0 iii on 26-Mar-12 05:52 AM

Just Once Again I am Posting Full Content of MyCode Please see The Below One,

<style type="text/css">

.ratingStar

{

white-space:nowrap;

margin:1em;

height:14px;

}

.ratingItem

{

font-size: 0pt;

width: 13px;

height: 12px;

margin: 0px;

padding: 0px;

display: block;

background-repeat: no-repeat;

cursor:pointer;

}

.Filled

{

background-image: url(Images/FilledStar.PNG);

}

.Empty

{

background-image: url(Images/EmptyStar.PNG);

}

.Saved

{

background-image: url(Images/SavedStar.PNG);

}

.Filled1

{

background-image: url(Images/HalfStar.PNG);

}

. Sample1

{

color:Red;

}

. Sample2

{

color:Blue;

}

</style>

<body>

<form id="form1" runat="server">

<AJAX:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

</AJAX:ToolkitScriptManager>

<div>

<asp:UpdatePanel ID="pnlRating" runat="server">

<ContentTemplate>

<table style="width: 34%">

<tr>

<td class="style1">

<asp:Label ID="lblMyRating" runat="server" Text="Average Rating" Font-Bold="true"></asp:Label>

</td>

<td>

<AJAX:Rating ID="Rating1" runat="server" CurrentRating="3" MaxRating="5"

CssClass="ratingStar" AutoPostBack="true"

StarCssClass="ratingItem" WaitingStarCssClass="Saved"

FilledStarCssClass="Filled" EmptyStarCssClass="Empty"

onchanged="Rating1_Changed">

</AJAX:Rating>

</td>

<td>

<asp:Label ID="lblDisplay" runat="server" Font-Bold="true"></asp:Label>

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

Protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){BindAverageRatingControl();}}public void BindAverageRatingControl(){DataTable dt = new DataTable();con.Open();SqlCommand cmd = new SqlCommand("SELECT COUNT(ID) AS NumberOfUsers,SUM(Rating) AS Total FROM Averagerating", con);SqlDataAdapter da = new SqlDataAdapter(cmd);da.Fill(dt);float COUNT = float.Parse(dt.Rows[0]["NumberOfUsers"].ToString());float RATING = float.Parse(dt.Rows[0]["Total"].ToString());float Result = RATING / COUNT;Rating1.CurrentRating = Convert.ToInt32(Result);if (Rating1.CurrentRating == Result){lblDisplay.Text = Result.ToString();lblDisplay.CssClass = "Sample2";Rating1.FilledStarCssClass = "Filled";}else{lblDisplay.Text = Result.ToString("0.0");lblDisplay.CssClass = "Sample1";Rating1.FilledStarCssClass = "Filled1";}}
protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e){con.Open();SqlCommand cmd = new SqlCommand("Insert Into Averagerating(Rating,UserName)values(@Rating,@UserName)", con);cmd.Parameters.AddWithValue("@Rating", Rating1.CurrentRating);cmd.Parameters.AddWithValue("@UserName", "DESAI");cmd.ExecuteNonQuery();con.Close();BindAverageRatingControl(); }
According To my Logic i.e.,

float Result = RATING / COUNT; Rating1.CurrentRating = Convert.ToInt32(Result);if (Rating1.CurrentRating == Result){lblDisplay.Text = Result.ToString();lblDisplay.CssClass = "Sample2";Rating1.FilledStarCssClass = "Filled";}else{lblDisplay.Text = Result.ToString("0.0");lblDisplay.CssClass = "Sample1";Rating1.FilledStarCssClass = "Filled1";}

If i show in Image wise it is clearly understandable i think so,

If My Result is 2 then it shows Blue Color & Yellow Stars Corectly,
MY OUTPUT:


If My Result is 2.8 then it shows Red Color & All 3 Half Stars it was not correct na,
MY OUTPUT:


But,The Expected Output is 2 Yellow Stars,One Half Star & 2 Empty Stars[For 2.8 Result].
MY EXPECTED OUTPUT:


I think Now U can better understand my Logic in the code & also by seeing my OUTPUT's.

Thanks in Advance,VenkiDesai.