[英]On click in view to increment column in database in table
因此,我有一个名为AnonymousComment的数据库表,其中包含以下详细信息:
[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,
然后,我有一个显示所有行(匿名评论)的视图(索引),显示每个评论的标题,然后单击标题时,它以弹出模式显示标题,UserFeeling(表情符号)和评论,如图所示在下面的图片中
索引视图的代码如下
@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">×</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>
我想做的是,在模态中的like按钮的onclick的递增和递减之间进行切换。 因此,当您单击“ like”按钮时,它将为该特定行将AgreeNumber列增加一,然后变为不相同。 然后,如果您单击“ likely”按钮,它将使该行的列减1。
我当时想单击以调用一个javascript函数,该函数执行一个原始sql语句,其内容与此相似
@{
using (var context = new SizaData_1Entities()){
context.AnonymousComments.SqlQuery("UPDATE dbo.AnonymousComment SET AgreeNumber = AgreeNumber - 1 WHERE Id =" + item.Id);
}
}
解决此问题的另一个方法是,为每个项目创建一个行。
帮助将不胜感激
提前致谢
希望以下答案对您有帮助
创建2个喜欢和不同的图片
剃刀
<img id="likeImg" src="~/image/like.png" />
<img id="unLikeImg" src="~/image/unlike.png" />
通过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");
}
});
});
});
在控制器动作中为喜欢和不喜欢写函数
控制者
public void SetLike()
{
// Like Code here
}
public void SetUnLike()
{
// Unlike code here
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.