用添加的文本更新Div，註釋功能

我正在開發一個帶有razor語法的MVC應用程序。用添加的文本更新Div，註釋功能

我正在開發評論功能的部分類。

我有代碼在其中disply輸出的註釋在以下模式。

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>

如何做到這一點？

來源

2012-09-14 user1668543

根據你的代碼，評論都顯示在「CommentTextBlock」分區。因此，在「添加評論」按鈕上單擊，您可以使用.append（）jQuery函數，即在按鈕單擊時添加div內容。更多信息請訪問：http：//api.jquery.com/append/ – 2012-09-14 05:56:42

每件事看起來都不錯，試試'url：'SaveComments''，我希望你有一個操作方法'SaveComments'，它帶有一個參數'comments' – FosterZ

點擊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-14 05:59:56 FosterZ

用添加的文本更新Div，註釋功能

回答

相關問題