2016-10-12 57 views
0

所以我有一個名爲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(表情)和評論在彈出的模態如圖片所示下面 enter image description here

該指數的代碼視圖如下

@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> 

笏我想要做的,是在增量和減量模式中的類似按鈕onclick之間切換。所以當你點擊類似按鈕時,它會將該編號的AgreeNumber列遞增1,然後變成不一樣。然後,如果你點擊不同按鈕,它將該列減1。

我想有點擊調用JavaScript函數執行肚裏沿 線的東西這個

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

    } 

此問題的另一個弧線球是每一行創建的事實原始的SQL語句與每個項目一個。

幫助將不勝感激

在此先感謝

+1

你需要寫一個JavaScript來做一個Ajax調用,當有人喜歡或不喜歡是clicke d,將相關數據傳遞給服務器,如記錄Id和+1或-1,然後在您的控制器中,您可以使用linq或執行存儲過程來更新數據庫,**絕不使用內聯查詢** –

+0

感謝您的答覆。你是否會提供一些示例代碼來說明如何去做這件事。 –

回答

1

我希望以下的答案將會有助於你

像創建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 
    }