单击视图以增加表中数据库中的列答案

【问题标题】：On click in view to increment column in database in table单击视图以增加表中数据库中的列
【发布时间】：2017-02-21 04:05:34
【问题描述】：

所以我有一个名为 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">&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>

我想要做的是在模态中单击类似按钮时在增量和减量之间进行切换。因此，当您单击“like”按钮时，它会将该特定行的 AgreeNumber 列加一，然后变为“like”。然后，如果您单击不同的按钮，它会将该行的列减 1。

我在想点击调用一个 javascript 函数，该函数执行一个原始 sql 语句，该语句类似于这个

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

  }

这个问题的另一个曲线球是每行为每个项目创建一个。

非常感谢您的帮助

提前致谢

【问题讨论】：

当点击喜欢或不喜欢时，您需要编写一个javascript来执行ajax调用，将相关数据传递给服务器，如记录ID和+1或-1，然后在您的控制器中您可以使用 linq 或执行存储过程来更新数据库，永远不要使用内联查询
感谢您的回复。您能否提供一些示例代码来说明如何执行此操作。

标签： javascript sql-server asp.net-mvc razor

【解决方案1】：

希望下面的回答对你有帮助

为喜欢和不喜欢创建 2 个图像

剃须刀

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

通过 ajax 调用访问控制器操作

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");
            }
        });
    });
});

在控制器动作中写下like和like的函数

控制器

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

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

【讨论】：