添加文字和评论功能更新Div

Updating the Div with added text, comment feature

本文关键字：更新 Div 功能 评论 文字 添加      更新时间：2023-09-26

我正在开发一个使用剃刀语法的MVC应用程序。

我正在开发用于注释功能的分部类。

我有如下模式显示注释输出的代码。

John Smith 15-Aug-2012 
-------------------------------
Called Customer today, hold me to call later.
Will Parkar 15-Aug-2012 
-------------------------------
Keep track with him.
*Add New Comment in below text box.*
 ___________________________________________
|Called Again...                            |
|                                           |
|___________________________________________|
 Add Comment   Clear

现在，每当用户将注释放在文本框中时，该文本都应该添加到上面的列表中。。。

输出应该是

John Smith 15-Aug-2012 
-------------------------------
Called Customer today, hold me to call later.
Will Parkar 15-Aug-2012 
-------------------------------
Keep track with him.

John Smith 16-Aug-2012 
-------------------------------
Called Again...    <---------------------New Comment get added here.
*Add New Comment in below text box.*
 ___________________________________________
|                                           |
|                                           |
|___________________________________________|
 Add Comment   Clear

我有以下代码。。。

    @model  IEnumerable<CRMEntities.Comment>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

 <!DOCTYPE html>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    function clearText() 
    {
         document.getElementById('Comment').value = "";
    }
</script>

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 $('#AddCommentButton').click(function () {
 $.ajax({
  type:'post',
  url: '/Comment/SaveComments', //url to your action method
  dataType: 'json',
  data: { 'comments': $('#Comment').val() },
  success: function(data)
  {
      $('#ParentBlock').appendChild("<div>" + data.msg + "</div>");
  }
 });
});
</script>


<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".ShowComments").click(function () {
            $(".ParentBlock").slideToggle("slow");
            $("CommentP").append(document.getElementById('Comment').value);

        });
    });
</script>


<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $(".ShowComments2").click(function () {
          $(".1").append("<strong>Hello</strong>");
        });
    });

</script>

<style type="text/css"> 
div.ParentBlock
{
position:relative;
display:none;
}
#ClassPara
{
   position:relative;
   background-color:#ECF5FC;
   cursor:pointer;
   border:2px;
   width: 115px;
   border-style:solid;
   border-width:thin;
   border-color: #DCEDF8;
}

<style type="text/css">
#OwnerName
{
    background-color : #F0F6FF;
    font-style:normal;
    font-family:Calibri;
}

#CommentTextBlock
{
     background-color : #F9F9FF;
}
#EmpName
{
   font-style:normal;
   font-size:medium;
}
#Clear
{
    text-decoration:underline;
    cursor:pointer;
    color:Blue;
}
#AddComment
{
    text-decoration:underline;
    cursor:pointer;
    color:Blue;
}

</style>

</head>
<body>
@{

    <p id="ClassPara" class="ShowComments" >Show Comments</p>

    <div class="ParentBlock">

    @foreach (var item in Model)
    {
        <div id="OwnerName">
         <span class="EmpName"> @Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { @style = "color:#1A6690;" })</span>
           @Html.DisplayFor(ModelItem => item.CommentDateTime)
        </div>
       @* <div id="CommentTextBlock">
           @Html.DisplayFor(ModelItem => item.CommentText)
        </div>*@
        <p class="CommentP">
           @Html.DisplayFor(ModelItem => item.CommentText)
        </p>
        <br />

    }

    </div>

   @Html.TextArea("Comment", "", 5, 80, "asdsd")

    <input type="button" value="Add Comment" id="AddCommentButton"/>                         
    <input type="button" value="Clear" onclick="clearText()"/>                    
    <br />


  @*  <label id="AddComment">Add Comment</label>
    <label id="Clear" onclick="clearText()">Clear</label>*@
}

</body>
</html>

如何做到这一点？

单击ADD Comment按钮，将该注释发布到您的操作中，以将其保存到数据库或您想要保存的任何位置，然后在ajax的回调函数中返回该注释以在页面上显示。

$('#addCommentButtonID').click( function() {
 $.ajax({
  type:'post',
  url: 'SaveComments' //url to your action method
  dataType: 'json',
  data: {'comments':$('#textboxId').val()},
  success: function(data)
  {
     $('#yourMainDiv').appendChild("<div>"+data.msg+"</div>");
  }
 });
});

第二种方式：

$('#addCommentButtonID').click( function() {
    $.post('SaveComments',comments:$('#commentTextbox').val(),
        function (data) {
           $('#yourMainDiv').appendChild("<div>"+data.msg+"</div>");
        },'json');
});

您的行动

public JsonResult SaveComments(string comments)
{
   // save it wherever you want
   // after saving success return this string as jsonresult
   return Json(new { sc = true, msg = comment });
}
相关文章：