Question

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

然后我有一个显示所有行的View（索引）（匿名评论），显示每个评论的标题，然后当你点击标题时，它会弹出一个标题，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>

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

我在想点击调用一个javascript函数来执行一个原始的sql语句，这个函数就是这样的此

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

  }

此问题的另一个曲线球是每个项目都为每个项目创建的事实。

非常感谢帮助

提前致谢

Answer 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不同的函数

<强>控制器

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

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

单击视图以增加表

1 个答案: