1

Razor 構文を使用して 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>");
  }
 });
});

2 番目の方法:

$('#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 に答える