Updating a label within GridView?

Question

I have developed a wall (nested comments) where people can comment on scraps(posts). It includes a thumbs up/down feature, the problem is that when i click on thumbs up the entire page reloads. I want just the label which is displaying number of votes(likes) to be updated and nothing else. How can i do this? This is my attempt which is not working.. ASPX:

<asp:ImageButton ID="lnklike" runat="server" ImageUrl="~/Images/thumbsup.png" height="20px" Width="20px" CommandName="like" CommandArgument='<%# Eval("ScrapId")%>'/> &nbsp;
<asp:UpdatePanel ID="UpdatePanel1" runat="Server">
    <Triggers>
        <asp:AsyncPostBackTrigger controlid="lnklike" eventname="click"  />
    </Triggers>
    <ContentTemplate>  <asp:Label ID="Label1" runat="server" Text='<%# Controls_GetUserScraps.abc((int)Eval("ScrapId")) %>' />

protected void GridViewRowCommand(Object sender, GridViewCommandEventArgs e)
{

    var scrapId = Int32.Parse(e.CommandArgument.ToString());

    switch (e.CommandName)
    {
        case "like":

            string chklike = "select likestatus from tbl_like where fromid='" + Session["UserId"] + "' and scrapid='" + scrapId + "'";
            int a = dbo.GetLikesMethod(chklike);
            string chkthumbsdown = "select thumbsdownstatus from tbl_like where fromid='" + Session["UserId"] + "' and scrapid='" + scrapId + "'";
            int b = dbo.GetLikesMethod(chkthumbsdown);

            if (a == 0 && b == 0)
            {
                string sendlike = "insert into tbl_like (ScrapId,FromId,LikeStatus) values('" + scrapId + "','" + Session["UserId"] + "',1)";
                dbo.insert(sendlike);
                //abc(scrapId);
                GetUserScraps(int.Parse(Request.QueryString["Id"].ToString()));
            }
            else if (a != 0)
            {

                Response.Write("already liked");
            }
            else if (b != 0)
            {
                Response.Write("you can not like something you already downvoted!");
            }

            break;
    }
}

Method to get number of thumbs up /likes:

public static int abc(int scrpid)
{    
     string getlikes = "select COUNT(*) from tbl_like inner join Scrap on tbl_like.scrapid=Scrap.Id where tbl_like.likestatus=1 and tbl_like.scrapid='" + scrpid + "'";

     dboperation dbo = new dboperation();
     int a = dbo.GetLikesMethod(getlikes);

     return a;
}

public void GetUserScraps(int Id)
{
    string getUserScraps = "SELECT u.Id as UserId,u.firstname,u.ImageName,s.FromId,s.ToId,s.Message,s.SendDate,s.ID as ScrapId FROM [tbl_user] as u, Scrap as s WHERE u.Id=s.FromId AND s.ToId='" + Request.QueryString["Id"].ToString() + "'";
    //string getlikes = "select COUNT(*) from tbl_like inner join Scrap on tbl_like.scrapid=Scrap.Id where tbl_like.likestatus=1 and tbl_like.scrapid='"+<%#DataBinder.Eval(Container.DataItem,"ScrapId")%>+"'";
    //  <%#DataBinder.Eval(Container.DataItem,"ScrapId")%>

    dt = dbClass.ConnectDataBaseReturnDT(getUserScraps);
    if (dt.Rows.Count > 0)
    {
        GridViewUserScraps.DataSource = dt;
        GridViewUserScraps.DataBind();
    }
}

Answer 1

In the grid I would add a link like this:

<asp:TemplateField ItemStyle-Wrap="false" ItemStyle-Width="35px">
    <ItemTemplate>
       <a href="javascript:void(0);" onclick="Link to your javascript method/ajax method">
                                         </a>
    </ItemTemplate>
    <ItemStyle Wrap="False"></ItemStyle>
</asp:TemplateField>

Then use a jquery ajax call like this

Return your new count in JSON and update the label

Ajax Call

function UpdateLikeStatus(imageID, labelid)
{
      $.ajax({
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                url: 'Services/MiscService.asmx/UpdateLikeStatus',
                data: "{'imageid':'" + imageID + "'}",
                dataType: "json",
                success: function (data) {
                    //This is the label you want to update with the new count.

                    $('#labelid').html(data.d);

                }
            });
}

This would be your Webservice call which can also be used in a WCF service. To see how to implement a AJAX webservice look HERE

[WebMethod(EnableSession = true)]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public string UpdateLikeStatus(string imageid)
{
   string returnedData = "";         
   //Make call to stored procedure that does the update
   returnedData = Storedprocedurecall.UpdateLikeStatus(imageid); //Updates the status and returns a count 
     //Now return the new count.
   return returnedData;  

}

On the click event of the image or whatever you are using to update the like status.

<img src="" id="genericimage" border="0" onclick="UpdateLikeStatus('<%#Eval("imageid") %>', this);" />

imageid = the id of the image you are wanting to update the like status

If you still don't understand let me know.