Moose TheTitan Moose TheTitan - 1 month ago 8
Javascript Question

On click in view to increment column in database in table

so I have a database table called AnonymousComment which contains the following details:

[Id] INT IDENTITY (1, 1) NOT NULL,
[Title] VARCHAR (50) NULL,
[Comment] TEXT NULL,
[AgreeNumber] INT NULL,
[MetaId] VARCHAR (50) NULL,
[UserFeeling] TEXT NULL,
[AnonymousDate] DATETIME NULL,


Then I have a View (Index) that displays all the rows (Anonymous Comments), displaying the title of each comment then when you click on the title, it shows the title, UserFeeling (emoticon) and comment in a pop up modal as shown in the picture below
enter image description here

The code for the index view is as followed

@using System.Web.UI.WebControls
@using Siza.Models
@model IEnumerable<Siza.Models.AnonymousComment>

@{
ViewBag.Title = "Siza Anonymous";
Layout = "";
}


<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" s
type="image/png"
href="~/Content/favicon.ico" />

<title>Siza</title>

<!--Hover Popup CSS-->
<link href="~/Content/css/popuphover.css" rel="stylesheet">


<!-- Custom Fonts -->
<link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--JQuery Plugin-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!--some more of matt's crap-->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">



<style>
divider {
height: 1px;
width: 100%;
display: block; /* for use on default inline elements like span */
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}

div#imageToggle img {
cursor: pointer;

}

.mystyle input[type="text"] {
height: 100px;
font-size: 36px;
}



.textwrap {
display: inline-block;
white-space: nowrap;
margin: 5px;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #808080;
font-size: 24px;
background: white;
-o-transition: color .2s ease-out, background 1s ease-in;
-ms-transition: color .2s ease-out, background 1s ease-in;
-moz-transition: color .2s ease-out, background 1s ease-in;
-webkit-transition: color .2s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition: color .2s ease-out, background 1s ease-in;
}

</style>
</head>


<div class="row col-lg-12 text-center fade-in one">
@foreach (var item in Model)
{



<!-- Modal -->
<div class="modal fade" id="@item.Id" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Post Number: @item.Id</h4>
<h4 class="modal-title">@item.Title</h4>
<i class="@item.UserFeeling"></i>
</div>
<div class="modal-body">
<div class="floating-label-form-group controls">@Html.TextAreaFor(modelItem => item.Comment, new { @readonly = true })</div>
</div>

<div class="modal-footer">


<div align="center"><img src="http://pikcle.com/experiments/demo/skype/experiments/trans.png" class="emoticon thumbsup" title="thumbsup"/> <h4>Like</h4></div>



<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>



<span class="wrapper" data-toggle="modal" data-target="#@item.Id">
<div class="textwrap">
@Html.DisplayFor(modelItem => item.Title)
</div>
<span class="tooltip">
<div align="center">
<i class="@item.UserFeeling"></i><br />
<img src="http://pikcle.com/experiments/demo/skype/experiments/trans.png" class="emoticon thumbsup" title="thumbsup" /> Likes:@item.AgreeNumber

</div>
</span>
</span>
}
</div>


Wat I want to do, is to have a toggle between increment and decrement onclick of the like button in the modal. So when you click on the like button, it increments the AgreeNumber column by one for that specific row then it turns to unlike. Then if you click on the unlike button, it decrements the column by 1 for that row.

I was thinking have on click to call a javascript function which executes a raw sql statement which goes something along the lines of
this

@{
using (var context = new SizaData_1Entities()){
context.AnonymousComments.SqlQuery("UPDATE dbo.AnonymousComment SET AgreeNumber = AgreeNumber - 1 WHERE Id =" + item.Id);
}

}


Another curve ball for this problem is the fact that each row created with a for each item.

Help would be greatly appreciated

Thanks in advance

Answer

I hope the following answer will help you

Create 2 image for like and unlike

Razor

<img id="likeImg" src="~/image/like.png" />
<img id="unLikeImg" src="~/image/unlike.png" /> 

Access the controller action via the ajax call

Ajax

$(function () {
    $("#likeImg").click(function () {
        $.ajax({
            url: '/Home/SetLike',
            contentType: 'application/json; charset=utf-8',
            type: 'POST',
            cache: false,
            success: function (result) {
                // Success Statement
            },
            error: function (xhr, status, error) {
                alert("Error");
            }
        });
    });

    $("#unLikeImg").click(function () {
        $.ajax({
            url: '/Home/SetUnLike',
            contentType: 'application/json; charset=utf-8',
            type: 'POST',
            cache: false,
            success: function (result) {
                // Success Statement
            },
            error: function (xhr, status, error) {
                alert("Error");
            }
        });
    });
});

In controller action write the function for like and unlike

Controller

    public void SetLike()
    { 
        // Like Code here
    }

    public void SetUnLike()
    {
        // Unlike code here
    }
Comments