Hello All,
I am new to programming and Ajax and need help.
I am trying to create a Like and dislike counter for my webpage (similar to facebook like button). I am using WebMatrix Razor syntax and SQL CE database.
Below is my code which works fine, I want you expert's to take a look at code and please let me know if this is the correct way of doing it.
I have one page which displays data and the Like /DisLike buttons. I have 2 server pages. When user clicks on 'Like' button it calls the Like.cshtml server page and when user clicks on 'Dislike' button it calls the DisLike.cshtml page. Is this the right way of doing it or a lengthy way, please suggest if there is a better option.
My code below
Defaul Page
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title></title><script>
function CountLikes(str) {
var xmlhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "Likes.cshtml?ids=" + str, true);
xmlhttp.send();
}</script><script>
function CountDisLikes(str) {
var xmlhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "DisLikes.cshtml?ids=" + str, true);
xmlhttp.send();
}</script></head><body>
@{
var dbase = Database.Open("Rating");
var topic = dbase.Query("SELECT * FROM Rating ORDER BY ID");
}<div>
@foreach (var row in topic)
{<div style="border: 1px solid"><b>Topic:</b>@row.topic<br /><b>Likes:</b>@row.CountLikes<br /><b>DisLikes:</b>@row.CountDisLikes<br /><button name="action" value="@row.ID" onclick="CountLikes(this.value)">Like</Button><button name="action" value="@row.ID" onclick="CountDisLikes(this.value)">DisLike</button><br /> <br /></div>
}</div></body></html>Server Page Like.cshtml
@{
var TopicId="";
var CountLikes="";
if (!IsPost) {
if(!Request.QueryString["IDS"].IsEmpty()){
TopicId = Request.QueryString["IDS"];
var db=Database.Open("Rating");
var updateCommand="UPDATE Rating SET CountLikes=CountLikes + 1 where ID=@1";
db.Execute(updateCommand, CountLikes, TopicId);
}
}
}Server Page DisLike.cshtml
@{
var TopicId="";
var CountDisLikes="";
if (!IsPost) {
if(!Request.QueryString["IDS"].IsEmpty()){
TopicId = Request.QueryString["IDS"];
var db=Database.Open("Rating");
var updateCommand="UPDATE Rating SET CountDisLikes=CountDisLikes + 1 where ID=@1";
db.Execute(updateCommand, CountDisLikes, TopicId);
}
}
}