Home/ Questions/Q 8574613
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T19:30:48+00:00

I am developing an MVC application with razor syntax. I am developing the partial

  • 0

I am developing an MVC application with razor syntax.

I am developing the partial class for commenting feature.

I have code in which disply output of comments in following pattern.

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

Now, whenever user put the comment in text box , that text should added in above list…

out put should be

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

I have below code…

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

How to do this ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    On click of ADD Comment button post that comment to your action to save it to Database or wherever you want to save, and then return that comment in call back function of ajax to show it on page.

    $('#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>");
  }
 });
});

    Second way :

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

    Your Action

    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 });
}
    • 0