1

我正在开发一个具有剃刀语法的 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>

这该怎么做 ？

4

1 回答 1

1

单击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 });
}
于 2012-09-14T05:59:56.070 回答