Introduction
In this post, I am explain how to Implement 5 star rating system in ASP.NET inside Gridview.Steps :
Step - 1 : Create New Project.
Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.Step-2: Add a Database.
Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.Step-3: Create 2 table for Save/ Fetch Data.
Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have used two tables as below
Table1 |
Table2
 |
Step-4: Add Entity Data Model.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.
Step-5: Add a Class.
Right Click on Solution Explorer > Add > Class > Enter Class Name > Add.Here is the class.
namespace ASPRatingApp
{
public class ArticleWithScore
{
public int ArticleID { get; set; }
public string ArticleTitle { get; set; }
public int Score { get; set; }
}
}
Step-6: Add a Webpage and Design for show/save rating from/to database.
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.JS Code
<script src="Scripts/jquery-1.7.1.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".rating-star-block .star").mouseleave(function () {
$("#" + $(this).parent().attr('id') + " .star").each(function () {
$(this).addClass("outline");
$(this).removeClass("filled");
});
});
$(".rating-star-block .star").mouseenter(function () {
var hoverVal = $(this).attr('rating');
$(this).prevUntil().addClass("filled");
$(this).addClass("filled");
$("#RAT").html(hoverVal);
});
$(".rating-star-block .star").click(function () {
var v = $(this).attr('rating');
var newScore = 0;
var updateP = "#" + $(this).parent().attr('id') + ' .CurrentScore';
var artID = $("#" + $(this).parent().attr('id') + ' .articleID').val();
$("#" + $(this).parent().attr('id') + " .star").hide();
$("#" + $(this).parent().attr('id') + " .yourScore").html("Your Score is : <b style='color:#ff9900; font-size:15px'>" + v + "</b>");
$.ajax({
type: "POST",
url: "Default.aspx/SaveRating",
data: "{articleID: '" + artID + "',rate: '" + v + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
setNewScore(updateP, data.d);
},
error: function (data) {
alert(data.d);
}
});
});
});
function setNewScore(container, data) {
$(container).html(data);
$("#myElem").show('1000').delay(2000).queue(function (n) {
$(this).hide(); n();
});
}
</script>
HTML Code
<style type="text/css">
.rating-star-block .star.outline {
background: url("images/star-empty-lg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.rating-star-block .star.filled {
background: url("images/star-fill-lg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.rating-star-block .star {
color:rgba(0,0,0,0);
display : inline-block;
height:24px;
overflow:hidden;
text-indent:-999em;
width:24px;
}
a {
color:#005782;
text-decoration:none;
}
</style>
<h3>Rating in ASP.NET</h3>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CellPadding="5">
<Columns>
<asp:BoundField HeaderText="Article ID" DataField="ArticleID" />
<asp:BoundField HeaderText="Article Title" DataField="ArticleTitle" />
<asp:TemplateField>
<ItemTemplate>
<div class="rating-star-block" id='div_<%#Container.DataItemIndex %>'>
<input type="hidden" class="articleID" value='<%#Eval("ArticleID") %>' />
Current Score :<span class="CurrentScore"><%#Eval("Score") %></span><br /><div class="yourScore">Your Score : </div>
<a class="star outline" href="#" rating="1" title="vote 1"> vote 1</a>
<a class="star outline" href="#" rating="2" title="vote 2"> vote 2</a>
<a class="star outline" href="#" rating="3" title="vote 3"> vote 3</a>
<a class="star outline" href="#" rating="4" title="vote 4"> vote 4</a>
<a class="star outline" href="#" rating="5" title="vote 5"> vote 5</a>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="myElem" style="position:absolute; top:10px; left:50%; display:none; background-color:yellow; padding:5px; border:1px solid red">
Thank you for your rating!
</div>
</div>
Step-7: Write code in page_load event for fetch data from database and show in Gridview.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
PopulateArticle();
}
}
Here is the function...
private void PopulateArticle()
{
using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
var v = (from a in dc.Articles
join b in dc.ArticleScores on a.ArticleID equals b.ArticleID into bb
from b in bb.DefaultIfEmpty()
group new { a, b } by new { a.ArticleID, a.ArticleTitle } into AA
select new
{
AA.Key.ArticleID,
AA.Key.ArticleTitle,
Score = AA.Sum(a => a.b.Score) == null ? 0 : AA.Sum(a => a.b.Score),
Count = AA.Count()
});
List<ArticleWithScore> AWS = new List<ArticleWithScore>();
foreach (var i in v)
{
AWS.Add(new ArticleWithScore
{
ArticleID = i.ArticleID,
ArticleTitle = i.ArticleTitle,
Score = i.Score/i.Count
});
GridView1.DataSource = AWS;
GridView1.DataBind();
}
}
}
Step-8: Write code(function) for Save users rating into database which is calling from Jquery.
Import this 2 Namespace
using System.Web.Services;
using System.Web.Script.Services;
[WebMethod]
[ScriptMethod(ResponseFormat= ResponseFormat.Json)]
public static int SaveRating(int articleID, int rate)
{
int result = 0;
using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
dc.ArticleScores.Add(new ArticleScore
{
ArticleID = articleID,
ScoreID = 0,
Score = rate,
CreateDate = DateTime.Now
});
dc.SaveChanges();
var newScore = (from a in dc.ArticleScores
where a.ArticleID.Equals(articleID)
group a by a.ArticleID into aa
select new
{
Score = aa.Sum(a=>a.Score)/aa.Count()
}).FirstOrDefault();
result = newScore.Score;
}
return result;
}
Step-9: Run Application.
Related Post
-
